Questions tagged [jquery]

About

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

jQuery simplifies HTML document traversal and manipulation, event handling, animation, and AJAX due to its API that works across a multitude of browsers.

jQuery provides a platform to create plugins that extend its 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 use 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 fallbacks for older ones - For example the inArray() and each() functions
• Multi-browser (not to be confused with cross-browser) support

Browser Support

jQuery supports the current stable version, and the preceding version or "current - 1 version," of Chrome, Edge, Firefox, and Safari. It also supports the current stable version of Opera.

In addition, jQuery 1.x supports Internet Explorer version 6 or higher. However, support for IE 6-8 was dropped by jQuery 2.x and by jQuery 3.x, which support only IE 9 or higher.

Finally, jQuery supports the stock mobile browser on Android 4.0 and higher, and Safari on iOS 7 and 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 with the features.

The jQuery CDN provides download links for all versions of jQuery, including the latest stable versions of each branch.

When asking jQuery related questions, you should:

1. Read the jQuery API documentation carefully and search Stack Overflow for duplicates before asking.
2. Isolate the problematic code and reproduce it in an online environment such as JSFiddle, JSBin, or CodePen. For Live Connect you can also use LiveWeave. 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.
3. Tag the question appropriately; always include jquery, and use the other web development tags (html, javascript, ajax) as applicable. The most popular jQuery plugins also have their own tags, such as jquery-ui, jquery-mobile, and jquery-validate; for every other plugin include the tag jquery-plugins.
4. Indicate the version of the jQuery library used, so that any answers can provide version-appropriate solutions.
5. Mention which browser the code is having problems on and what error messages, if any, were thrown by the browser. If the problems are consistent in a cross-browser way, then that's valuable information too.

Frequently Asked Questions

• Getting the ID of the element that fired an event using jQuery
• Difference between this and $(this)
• Difference between jQuery() and jQuery.fn
• jQuery.click() vs onClick - jQuery vs HTML
• Scope in an $.ajax callback function
• How to return the response from an AJAX call
• Switching a DIV background image with jQuery
• using jQuery.on / event delegation or Event binding on dynamically created elements
• Save access to this scope

Hello world example

This shows "Hello world!" in the alert box on each link click after the DOM is ready (JSFiddle):

// callback for document load
$(function () {
    // select anchors and set click handler
    $("a").click(function (event) { 
        // prevent link default action (redirecting to another page)
        event.preventDefault();

        // show the message
        alert("Hello world!"); 
    });
});

Resources

• Download
• Getting started with jQuery
• How jQuery works
• Official documentation
• Official interactive tutorial
• Official jQuery Learning Center
• jQuery Fundamentals
• jQuery's GitHub page
• jQuery Source Viewer
• Google Hosted jQuery Libraries
• List of jQuery Release Notes
• Official forum
• Official blog
• NuGet package (for use as part of an ASP.NET website)

Video Tutorial

• Codechool Try jQuery - An interactive web-based Free JQuery tutorial

Popular plugins

• Validation
• Cycle2
• tablesorter
• DataTables
• jQuery Grid
• prettyPhoto for lightbox
• Retina Display Image
• Parallax
• Superfish for Navigation Menu
• Gijgo
• Plugins repository

Other jQuery Foundation projects

• jQuery UI
• jQuery Mobile
• QUnit
• Sizzle

Best practices and commonly made mistakes

Related question: jQuery pitfalls to avoid

Remember to use a ready handler

If your code is somehow manipulating the DOM, then you need to ensure that it is run after the DOM finishes loading.

jQuery provides ways to do that with an anonymous function:

$(function () { 
    /* code here */ 
});

// Or
$(document).ready(function () { 
    /* code here */ 
});

or with a named function:

$(functionName);

// Or
$(document).ready(functionName);

These are alternatives to placing the JavaScript code or script tag in the HTML right before the closing </body> tag.

In jQuery 3.x, the recommended way to add a ready handler is $(function () {}), while other forms such as $(document).ready(function () {}) are deprecated. Also, jQuery 3.x removes the ability to use .on("ready", function () {}) to run a function on the "ready" event.

Avoid conflicts by using noConflict() and a different alias for jQuery

If your jQuery code conflicts with another library that also uses the $ sign as an alias, then use the noConflict() method:

jQuery.noConflict();

Then you can safely use $ as an alias for the other library while using the name jQuery itself for jQuery functions.

Alternatively, you can call

$jq = jQuery.noConflict();

and use $jq as an alias for jQuery. For example:

$jq(function () {
    $jq("a").click(function (event) { 
        event.preventDefault();
        alert("Hello world!"); 
    });
});

It is also possible to assign jQuery to $ within a certain scope:

jQuery(function ($) {
    // In here, the dollar sign is an alias for jQuery only.
});

// Out here, other libraries can use the dollar sign as an alias.

Then you can use $ as an alias for jQuery inside that function block, without worrying about conflicts with other libraries.

Cache your jQuery objects and chain whenever possible

Calling the jQuery function $() is expensive. Calling it repeatedly is extremely inefficient. Avoid doing this:

$('.test').addClass('hello');
$('.test').css('color', 'orange');
$('.test').prop('title', 'Hello world');

Instead cache your jQuery object in a variable:

var $test = $('.test');

$test.addClass('hello');
$test.css('color', 'orange');
$test.prop('title', 'Hello world');

Or better yet, use chaining to reduce repetition:

$('.test').addClass('hello').css('color', 'orange').prop('title', 'Hello world');

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 more 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:

$('<p>', {
    text: 'This is a ' + variable, 
    "class": 'blue slider', 
    title: variable, 
    id: variable + i
}).appendTo(obj);

By comparison, a string concatenation approach is much less readable and far more brittle:

$('<p class="blue slider" id="' + variable + i + '" title="' + variable + '">This is a ' + variable + '</p>').appendTo(obj);

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.

Chat Rooms

Chat about jQuery with other Stack Overflow users:

• Web Developers
• Java, Spring,Struts,Hibernate, PHP, jQuery & JavaScript Beginners

Alternatives/Competitors

Other well-known JavaScript libraries are:

• YUI Library - Yahoo User Interface Library (not actively maintained).
• MooTools
• Underscore
• Lodash

Public repositories:

• cdnjs - Cloudflare community driven project, currently used by ~1,143,000 websites worldwide.
• jsdelivr - An equally free and open source alternative CDN to cdnjs.

Related Tags

• javascript
• jquery-plugins
• jquery-ui
• jquery-mobile
• jquery-migrate
• dom
• html
• jquery-datatables
• jquery-animate