Add jQuery via CDN
Include jQuery on your page with a single script tag from a CDN.
Syntax
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>To use jQuery you must load it before your own script. The easiest way is a CDN (Content Delivery Network) link.
The script tag
Place this inside your <head> or at the end of the <body>:
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>Why a CDN?
- No file to download or host yourself.
- Fast delivery from servers near your users.
- The
.min.jsversion is compressed for speed.
Your own script tag must come after the jQuery tag, or $ will be undefined.
Example
Loading editor…
Press Run to see the result.
When to use it
- A landing page links to the jQuery CDN so visitors benefit from a cached copy already in their browser.
- A developer prototype adds the jQuery CDN script tag before their own script to start coding immediately.
- A WordPress site loads the integrity-checked CDN version to protect against supply-chain attacks.
More examples
Basic CDN script tag in head
The simplest inclusion: one script tag in <head> before any code that uses jQuery.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="demo">Loaded via CDN</p>
</body>
</html>CDN with SRI integrity check
Adding integrity and crossorigin lets the browser block a tampered CDN file before it executes.
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous">
</script>CDN with local fallback
Falls back to a local copy if the CDN is unavailable, ensuring the page always loads jQuery.
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
if (typeof jQuery === "undefined") {
document.write('<script src="/js/jquery.min.js"><\/script>');
}
</script>
Discussion