1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
# jQuery
> jQuery is a fast, small, and feature-rich JavaScript library.
For information on how to get started and how to use jQuery, please see [jQuery's documentation](https://api.jquery.com/).
For source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).
If upgrading, please see the [blog post for @VERSION](@BLOG_POST_LINK). This includes notable differences from the previous version and a more readable changelog.
## Including jQuery
Below are some of the most common ways to include jQuery.
### Browser
#### Script tag
```html
<script src="https://code.jquery.com/jquery-@VERSION.min.js"></script>
```
or, to use the jQuery ECMAScript module:
```html
<script type="module">
import $ from "https://code.jquery.com/jquery-@VERSION.min.js";
</script>
```
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 the `ajax`, `callbacks`, `deferred`, `effects` & `queue` modules, we’ve released a “slim” version that excludes these modules. You can load it as a regular script:
```html
<script src="https://code.jquery.com/jquery-@VERSION.slim.min.js"></script>
```
or as a module:
```html
<script type="module">
import $ from "https://code.jquery.com/jquery-@VERSION.slim.min.js";
</script>
```
#### Import maps
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">`:
```html
<script type="importmap">
{
"imports": {
"jquery": "https://code.jquery.com/jquery-@VERSION.min.js",
"jquery/slim": "https://code.jquery.com/jquery-@VERSION.slim.min.js"
}
}
</script>
```
Now, the following will work to get the full version:
```html
<script type="module">
import $ from "jquery";
// Use $ here
</script>
```
and the following to get the slim one:
```html
<script type="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.
### Using jQuery from npm
There are several ways to use jQuery from npm. One is to use a build tool like [Webpack](https://webpack.js.org/), [Browserify](http://browserify.org/) or [Babel](https://babeljs.io/). 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 the [Node.js pre-requisites](#nodejs-pre-requisites) section for more details on the Node.js-specific part of this.
To install the jQuery npm package, invoke:
```sh
npm install jquery
```
In the script, including jQuery will usually look like this:
```js
import $ from "jquery";
```
If you need to use jQuery in a file that's not an ECMAScript module, you can use the CommonJS syntax:
```js
const $ = require( "jquery" );
```
#### Individual modules
jQuery is authored in ECMAScript modules; it's also possible to use them directly. They are contained in the `src/` 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 or `src/`. If you rely on it, verify your setup before updating jQuery.
All top-level modules, i.e. files directly in the `src/` directory export jQuery. Importing multiple modules will all attach to the same jQuery instance.
Remember that some modules have other dependencies (e.g. the `event` module depends on the `selector` one) so in some cases you may get more than you expect.
Example usage:
```js
import $ from "jquery/src/css.js"; // adds the `.css()` method
import "jquery/src/event.js"; // adds the `.on()` method; pulls "selector" as a dependency
$( ".toggle" ).on( "click", function() {
$( this ).css( "color", "red" );
} );
```
### AMD (Asynchronous Module Definition)
AMD is a module format built for the browser. For more information, we recommend [require.js' documentation](https://requirejs.org/docs/whyamd.html).
```js
define( [ "jquery" ], function( $ ) {
} );
```
Node.js doesn't understand AMD natively so this method is mostly used in a browser setup.
### Node.js pre-requisites
For jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/jsdom/jsdom). This can be useful for testing purposes.
jQuery checks for a `window` global with a `document` property and - if one is not present, as is the default in Node.js - it returns a factory accepting a `window` as a parameter instead.
To `import` jQuery using this factory, use the following:
```js
import { JSDOM } from "jsdom";
const { window } = new JSDOM( "" );
import jQueryFactory from "jquery";
const $ = jQueryFactory( window );
```
or, if you use `require`:
```js
const { JSDOM } = require( "jsdom" );
const { window } = new JSDOM( "" );
const $ = require( "jquery" )( window );
```
If the `window` global is present at the moment of the `import` or `require` of `"jquery"`, it will resolve to a jQuery instance, as in the browser. You can set such a global manually to simulate the behavior; with `import`:
```js
import { JSDOM } from "jsdom";
const { window } = new JSDOM( "" );
globalThis.window = window;
const { default: $ } = await import( "jquery" );
```
or with `require`:
```js
const { JSDOM } = require( "jsdom" );
const { window } = new JSDOM( "" );
globalThis.window = window;
const $ = require( "jquery" );
```
#### Slim build in Node.js
To use the slim build of jQuery in Node.js, use `"jquery/slim"` instead of `"jquery"` in both `require` or `import` calls above.
|
