Everything you wanted to know about jQuery

1. What is jQuery?

jQuery is a javascript toolkit created by John Resig with the motto of “Write less, do more”. jQuery became popular due to its developer friendly API which was easy to use and fun to work with largely based on object chaining. jQuery is an extensible system where extensions are called jQuery Plugins.

jQuery is a  library written in JavaScript that provides cross browser DOM traversal, manipulation, data, ajax, event handling and effects for creating modern web applications.
2. Where can I learn jQuery?

3. What is the significance of jQuery?

By Allen Cheung
In no small way jQuery accelerated the proliferation of the non-static web, or “web 2.0.” The milestone I use as a marker for the start of the Web 2.0 (AJAX-driven web app) has always been Gmail.  It did things no other website even attempted at the time, when most sites were content being static pages of HTML + a tiny bit of CSS. Javascript was not considered a serious language and support was minimal. Nobody outside of a few engineers at Google and devoted JS evangelists understood how each browser ran code.

jQuery made it really easy for anyone to programmatically access and manipulate a page. Easy for engineers who otherwise wouldn’t touch a website; easy for designers who wouldn’t touch code. It massively added to the number of websites and developers who aspired to build something more than text + images, whether that meant animations, complex forms, or responsive apps rivaling that of contemporary desktop software.

Of course, there is downside to this progress.  It’s very easy to write bad jQuery code.   Additionally the library prefers ease of use at the expense of imposing stricter/better engineering practices. Still, I think it’s a net positive – there are plenty of other JS libraries if the fast-and-loose style of jQuery leaves a bad taste in your mouth.
4. What are all the advantages of jQuery?

By Simon Willison
jQuery’s API is astonishingly well designed. It’s extremely consistent once you learn its rules (e.g. methods often take one argument to read a value and two arguments to set one, e.g. .css(), .attr(), .width(), .height()) and its functionality is so complete that the last few major releases of the library have hardly added any new methods at all. jQuery’s performance improves noticeably with every release, with the API staying exactly the same.

Also Read :  10 Useful JQuery Lightbox Plugins of 2015

jQuery plays extremely well with other code. It doesn’t extend any built-in JavaScript objects, and it only adds one symbol to the global namespace (the jQuery symbol) – it aliases $ as well, but you can undo that with jQuery.noConflict(). Even discounting browser differences, jQuery is an enormous improvement on the DOM. It makes DOM manipulation extremely easy, which means it’s much easier to implement things using progressive enhancement – taking existing DOM elements on the page and enhancing their behaviour.
5. What jQuery basics should all backend web developers know?

By Mariz Melo
Learn JavaScript first. Once you fully understand JS, jQuery will not be a problem. Also as a back-end web developer you probably want to check on the $.ajax() method and JSON/XML (if you don’t already know about them). Quick intro to jQuery anyway:

Select elements in jQuery is extremely easy. You will use the CSS syntax for that:


<div id =”mydiv”><span>hello</span> world!</div>


#mydiv { property: value; }





Did you notice the difference between JavaScript and jQuery here? JavaScript gets an element using the id name only “mydiv” on the other hand jQuery uses the same syntax as CSS “#mydiv”. Keep that in mind.

To apply some CSS to this div:


document.getElementById("mydiv").style.background = "red";


$("#mydiv").css({"background": "red"});

This is called the Fluent Interfaces or Method chaining

Now lets get the <span> element inside of this div:

$(“#mydiv span”).css({“color”: “white”});

Note that I am using the method $.css() here. jQuery documentation is great and with a quick google search you will find a method for almost anything you need.

Use your jQuery scripts inside a document.ready declaration:

$(document).ready(function() {
    // your code here

Short version:

    // your code here

Put your scripts on the bottom of your page when possible.
6. Are there any disadvantages of using Javascript framework like jQuery?

Also Read :  Collection of JQuery Navigation Tutorials For Web Designers

By Robert Accettura
The biggest disadvantage is that you likely don’t use all of jQuery, just a few parts.  Carrying the whole thing on a site is therefore a slight bandwidth waste and a slowdown.  It is possible to build your own with just the pieces you want, but few actually do that.

By Shaun O’Connell
It’s not intended for mobile. The web is going mobile, but some mobile browsers (with their limited memory / CPU) can take up to 8 seconds just to parse jQuery.  See:


By Erick Vanegas
One of the disadvantage of the new Framework era , is that programmers don’t learn the language but the framework,… and then they lack of deep knowledge for more complicated problems that can be resolved with naked javascript

7. Which is better, jQuery Mobile or Sencha Touch?


8. What are some bad jQuery practices to avoid?

By Rick Waldron
Speaking on behalf of the jQuery Bugs Team…

The first and the worst of all bad practices we encounter in bug reports is that users don’t read the documentation. jQuery’s API docs are very easy to follow and loaded with examples of code that just works.

The second worst offender is writing code that doesn’t use any form of caching, eg.

The second worst offender is writing code that doesn’t use any form of caching, eg.

// BAD
// Show "foo"
// Later in the code...
// add class "thing" to "foo"
 // Also, somewhere else...
// Hide "foo"


// Good!
// Cache "foo"
var $foo = $("#foo");
// Show "foo"
// Later in the code...
// add class "thing" to "foo"
// Also, somewhere else...
// Hide "foo"

The third is ignoring jQuery’s built-in implicit iterator behaviour

// BAD
// For each node matched by ".stuff", apply the class "other"
$(".stuff").each(function( i, elem ) {


Also Read :  10 Useful Chrome Extensions for jQuery Developers
// Way smarter.
// Match ".stuff" and apply the class "other"


By Mark Vilrokx
Not caching $(this) (or any other object you searched for and then use)

Every time you use $(‘.someClass’), jQuery tries to find that node.  This means that if you use $(this) in a loop for example, it will go off and find the same object over and over again.  You should cache the object:

var $this = $(this);

and then just use $this rather than $(this).


20 popular and very useful jQuery links from DZone

1. Form Functionality and Validation plugins

2. Shopping Carts for interactive shopping

3. jQuery goodies and online tools for web designers

4. Working with jQuery mobile panels

5. Best jQuery plugins August 2013

6. Best jQuery lightbox plugins for developers

7. How to build a dynamic Imgur upload app using jQuery

8. 40 jQuery plugins to improve your website

9. jQuery audio and video plugins

10. jQuery popup plugins for developers

11. jQuery carousel plugins

12. jQuery tooltip plugins

13. Introjs step by step guide tutorial

14. jQuery tutorials tips and tricks for developers

15. jQuery plugins that all designers should check today

16. Using jQuery to add a dynamic back to top floating button with smooth scroll

17. 15 jQuery code snippets for developers

18. jQuery tables

19. Best jQuery chart libraries for building interactive charts

20. Smart headers footers jQuery

Video Tutorials: Here



Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.