Repository files navigation

jQuery is a fast, small, and feature-rich JavaScript library.

For information on how to get started and how to use jQuery, please seejQuery's documentation.For source files and issues, please visit thejQuery repo.

If upgrading, please see theblog post for 4.0.0-rc.1. This includes notable differences from the previous version and a more readable changelog.

Below are some of the most common ways to include jQuery.

<scriptsrc="https://code.jquery.com/jquery-4.0.0-rc.1.min.js"></script>

or, to use the jQuery ECMAScript module:

<scripttype="module">import{$}from"https://code.jquery.com/jquery-4.0.0-rc.1.module.min.js";</script>

or:

<scripttype="module">import{jQuery}from"https://code.jquery.com/jquery-4.0.0-rc.1.module.min.js";</script>

All jQuery modules export named$ &jQuery tokens; the further examples will just show$. The default import also works:

<scripttype="module">import$from"https://code.jquery.com/jquery-4.0.0-rc.1.module.min.js";</script>

However, named imports provide better interoperability across tooling and are therefore recommended.

Sometimes you don’t need AJAX, or you prefer to use one of the many standalone libraries that focus on AJAX requests. And often it is simpler to use a combination of CSS, class manipulation or the Web Animations API. Similarly, many projects opt into relying on native browser promises instead of jQuery Deferreds. Along with the regular version of jQuery that includes theajax,callbacks,deferred,effects &queue modules, we’ve released a “slim” version that excludes these modules. You can load it as a regular script:

<scriptsrc="https://code.jquery.com/jquery-4.0.0-rc.1.slim.min.js"></script>

or as a module:

<scripttype="module">import{$}from"https://code.jquery.com/jquery-4.0.0-rc.1.module.slim.min.js";</script>

To avoid repeating long import paths that change on each jQuery release, you can use import maps - they are now supported in every modern browser. Put the following script tag before any<script type="module">:

<scripttype="importmap">{"imports":{"jquery":"https://code.jquery.com/jquery-4.0.0-rc.1.module.min.js","jquery/slim":"https://code.jquery.com/jquery-4.0.0-rc.1.module.slim.min.js"}}</script>

Now, the following will work to get the full version:

<scripttype="module">import{$}from"jquery";// Use $ here</script>

and the following to get the slim one:

<scripttype="module">import{$}from"jquery/slim";// Use $ here</script>

The advantage of these specific mappings is they match the ones embedded in the jQuery npm package, providing better interoperability between the environments.

You can also use jQuery from npm even in the browser setup. Read along for more details.

There are several ways to use jQuery from npm. One is to use a build tool likeWebpack,Browserify orBabel. For more information on using these tools, please refer to the corresponding project's documentation.

Another way is to use jQuery directly in Node.js. See theNode.js pre-requisites section for more details on the Node.js-specific part of this.

To install the jQuery npm package, invoke:

npm install jquery

In the script, including jQuery will usually look like this:

import{$}from"jquery";

If you need to use jQuery in a file that's not an ECMAScript module, you can use the CommonJS syntax:

const$=require("jquery");

The CommonJS moduledoes not expose named$ &jQuery exports.

jQuery is authored in ECMAScript modules; it's also possible to use them directly. They are contained in thesrc/ folder; inspect the package contents to see what's there. Full file names are required, including the.js extension.

Be aware that this is an advanced & low-level interface, and we don't consider it stable, even between minor or patch releases - this is especially the case for modules in subdirectories orsrc/. If you rely on it, verify your setup before updating jQuery.

All top-level modules, i.e. files directly in thesrc/ directory export jQuery. Importing multiple modules will all attach to the same jQuery instance.

Remember that some modules have other dependencies (e.g. theevent module depends on theselector one) so in some cases you may get more than you expect.

Example usage:

import{$}from"jquery/src/css.js";// adds the `.css()` methodimport"jquery/src/event.js";// adds the `.on()` method; pulls "selector" as a dependency$(".toggle").on("click",function(){$(this).css("color","red");});

AMD is a module format built for the browser. For more information, we recommendrequire.js' documentation.

define(["jquery"],function($){});

Node.js doesn't understand AMD natively so this method is mostly used in a browser setup.

For jQuery to work in Node, awindow with adocument is required. Since no such window exists natively in Node, one can be mocked by tools such asjsdom. This can be useful for testing purposes.

For Node-based environments that don't have a globalwindow, jQuery exposes a dedicatedjquery/factory entry point.

Toimport jQuery using this factory, use the following:

import{JSDOM}from"jsdom";const{ window}=newJSDOM("");import{jQueryFactory}from"jquery/factory";const$=jQueryFactory(window);

or, if you userequire:

const{JSDOM}=require("jsdom");const{ window}=newJSDOM("");const{ jQueryFactory}=require("jquery/factory");const$=jQueryFactory(window);

To use the slim build of jQuery in Node.js, use"jquery/slim" instead of"jquery" in bothrequire orimport calls above. To use the slim build in Node.js with factory mode, usejquery/factory-slim instead ofjquery/factory.