About

jQuery (Core) is a cross-browser JavaScript library (created by John Resig) which provides abstractions for common client-side tasks such as DOM traversal, DOM manipulation, event handling, animation and Ajax.

jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library. The development of jQuery and related projects is coordinated by the jQuery Foundation.

Features

jQuery includes the following features:

DOM element selections using the multi-browser open source selector engine Sizzle, a spin-off of the jQuery project

DOM traversal and modification (including support for CSS 1–3)

DOM manipulation based on CSS selectors that uses node element names and attributes (e.g. ID and class) as criteria to build selectors

Events

Effects and animations

Ajax

JSON parsing (for older browsers)

Extensibility through plug-ins

Utilities - such as user agent information, feature detection

Compatibility methods that are natively available in modern browsers but need fall backs for older ones - For example the inArray() and each() functions.

Multi-browser (not to be confused with cross-browser) support.

Support

Both version 1.x and 2.x of jQuery support "current - 1 versions" (meaning the current stable version of the browser and the version that preceded it) of Firefox, Chrome, Safari and Opera.

jQuery 1.x also supports IE6 or higher. However, jQuery 2.x dropped IE 6–8 support (which represents less than 28% of all browsers in use) and can run only with IE 9 or higher.

jQuery Versions

jQuery is updated frequently, so the library should be used carefully. Some functions become deprecated with newer versions of jQuery. Follow the release notes to be on track of the features.

Current Stable Version: 2.1.4 *// For IE > 8

Old Stable Version: 1.11.3 *// For all browser

When asking jQuery questions, you should:

Isolate the problematic code and reproduce it in an online environment such as JSFiddle, JSBin, or CodePen. However, be sure to include the problematic code in your question — don't just link to the online environment. You can also use Stack Snippets to include the runnable code in the question itself.

Also, remember that many functions can perform multiple changes in one call, by grouping all the values into an object. Instead of:

$('.test').css('color', 'orange').css('background-color', 'blue');

use:

$('.test').css({ 'color': 'orange', 'background-color': 'blue' });

Variable naming conventions

jQuery wrapped variables are usually named starting with $ to distinguish them from standard JavaScript objects.

var $this = $(this);

Know your DOM properties and functions

While one of the goals of jQuery is to abstract away the DOM, knowing DOM properties can be extremely useful. One of the most commonly made mistakes by those who learn jQuery without learning about the DOM is to utilize jQuery to access properties of an element:

$('img').click(function () {
$(this).attr('src'); // Bad!
});

In the above code, this refers to the element from which the click event handler was fired. The code above is both slow and verbose; the code below functions identically and is much shorter, faster and readable.

$('img').click(function () {
this.src; // Much, much better
});

Idiomatic syntax for creating elements

Although the following two examples seem to be functionally equivalent and syntactically correct, the first example is preferred:

While the first example will be slower than the second, the benefits of greater clarity will likely outweigh the nominal speed differences in all but the most performance-sensitive applications.

Moreover, the idiomatic syntax is robust against the injection of special characters. For instance, in the 2nd example, a quote character in variable would prematurely close the attributes. Doing the proper encoding by yourself remains possible even if not recommended because it is prone to error.