Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
The jQuery npm package is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
DOM Traversal and Manipulation
Easily select and manipulate HTML elements. This code changes the text of all paragraph elements to 'Hello World'.
$( 'p' ).text( 'Hello World' );
Event Handling
Quickly handle events like clicks. This code sets up an alert to be displayed when any button is clicked.
$( 'button' ).click( function() { alert( 'Button clicked!' ); } );
Animation
Perform animations on elements. This code makes a div element slide up slowly.
$( 'div' ).slideUp( 'slow' );
AJAX
Facilitate asynchronous HTTP (Ajax) requests. This code fetches the content of test.html and inserts it into the body of the current page.
$.ajax({ url: 'test.html', success: function(data) { $( 'body' ).html( data ); } });
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. It's smaller in size compared to jQuery but does not support as many browsers.
Cash is an absurdly small jQuery alternative for modern browsers. It provides jQuery-style syntax for manipulating the DOM, handling events, and making AJAX requests, but with a smaller footprint.
MooTools is a collection of JavaScript utilities designed for the intermediate to advanced JavaScript developer. It allows you to write powerful and flexible code with its elegant, well documented, and coherent API. MooTools code is extensively documented and easy to read, which is a strong point compared to 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. For source files and issues, please visit the jQuery repo.
If upgrading, please see the blog post for 4.0.0-beta. This includes notable differences from the previous version and a more readable changelog.
Below are some of the most common ways to include jQuery.
<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>
or, to use the jQuery ECMAScript module:
<script type="module">
import { $ } from "https://code.jquery.com/jquery-4.0.0-beta.module.min.js";
</script>
or:
<script type="module">
import { jQuery } from "https://code.jquery.com/jquery-4.0.0-beta.module.min.js";
</script>
All jQuery modules export named $
& jQuery
tokens; the further examples will just show $
. The default import also works:
<script type="module">
import $ from "https://code.jquery.com/jquery-4.0.0-beta.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 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:
<script src="https://code.jquery.com/jquery-4.0.0-beta.slim.min.js"></script>
or as a module:
<script type="module">
import { $ } from "https://code.jquery.com/jquery-4.0.0-beta.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">
:
<script type="importmap">
{
"imports": {
"jquery": "https://code.jquery.com/jquery-4.0.0-beta.module.min.js",
"jquery/slim": "https://code.jquery.com/jquery-4.0.0-beta.module.slim.min.js"
}
}
</script>
Now, the following will work to get the full version:
<script type="module">
import { $ } from "jquery";
// Use $ here
</script>
and the following to get the slim one:
<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.
There are several ways to use jQuery from npm. One is to use a build tool like Webpack, Browserify or Babel. 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 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" );
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:
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 is a module format built for the browser. For more information, we recommend require.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, a window
with a document
is required. Since no such window exists natively in Node, one can be mocked by tools such as jsdom. This can be useful for testing purposes.
For Node-based environments that don't have a global window
, jQuery exposes a dedicated jquery/factory
entry point.
To import
jQuery using this factory, use the following:
import { JSDOM } from "jsdom";
const { window } = new JSDOM( "" );
import { jQueryFactory } from "jquery/factory";
const $ = jQueryFactory( window );
or, if you use require
:
const { JSDOM } = require( "jsdom" );
const { window } = new JSDOM( "" );
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 both require
or import
calls above. To use the slim build in Node.js with factory mode, use jquery/factory-slim
instead of jquery/factory
.
FAQs
JavaScript library for DOM operations
The npm package jquery receives a total of 10,939,338 weekly downloads. As such, jquery popularity was classified as popular.
We found that jquery demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.