Installing jQuery

Installing jQuery means getting the library loaded in your page so the global $ / jQuery function exists before your code runs. There are three common ways: a public CDN, a local file you self-host, or an npm package for module-based builds.

Pros: zero download cost for returning users (the CDN is already cached from other sites), global CDN latency.

html
<!-- Pin a specific version in production -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
        crossorigin="anonymous"></script>

The integrity attribute is a Subresource Integrity (SRI) hash — the browser refuses to run the script if the bytes don't match.

Pros: works offline, no third-party request. Pros for privacy-sensitive or enterprise deployments.

bash
curl -O https://code.jquery.com/jquery-3.7.1.min.js

html
<script src="/static/js/jquery-3.7.1.min.js"></script>

For Webpack / Vite / Rollup projects:

bash
npm install jquery

js
import $ from 'jquery';
$('.btn').on('click', doSomething);

jQuery ships two variants:

• Full (~30 kB gz) — includes everything: AJAX, effects, deferreds.
• Slim (~23 kB gz) — drops AJAX and effects. Great when you only need DOM + events.

html
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>

• Three install options: CDN, self-host, npm — pick based on your stack.
• Always pin a specific version in production — never use latest.
• Use the SRI integrity= attribute on CDN scripts for tamper protection.
• The slim build saves bytes when you don't need AJAX or effects.
• For bundler projects, import $ from 'jquery' + tree-shaking = smallest payload.

1. Set up an empty HTML page loading jQuery from CDN + print $.fn.jquery in the console to verify.
2. Swap to the slim build and note the file-size reduction in the Network tab.
3. Copy jquery-3.7.1.min.js into a /static/ folder and self-host. Verify it loads.

• Bookmark https://releases.jquery.com/jquery/ — it has every version and SRI hash.
• Never load two copies of jQuery on the same page — it silently overwrites $.
• Pair with jquery-migrate to keep using old plugins on jQuery 3+.