Adding jQuery to a Webpage
You can load jQuery from a CDN by adding a script element.
In this page:
Syntax
<script src="https://code.jquery.com/jquery-version.min.js"></script>Add the CDN Script
A script tag pointing at a public CDN URL downloads the jQuery library file before your page runs, with no local install needed. This is the fastest way to get started, since there's nothing to download or configure locally.
Example: Add the CDN Script
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
</style>
</head>
<body>
<button id="runBtn">Check jQuery</button><button id="resetBtn" class="secondary">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function () {
$("#output").text("jQuery " + $.fn.jquery + " is loaded from the CDN <script> tag in <head>");
});
$("#resetBtn").click(function () { $("#output").empty(); });
</script>
</body>
</html>Run jQuery Code
Once the CDN script tag has loaded jQuery into the page, the global $ function becomes available to any script that runs afterward. Using $() to select elements is the first thing most developers try to confirm the library loaded correctly.
Example: Run jQuery Code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
var $initial = $("body").children();
$("#runBtn").click(function() {
$("#output").text($("body").length);
});
$("#resetBtn").click(function() {
$("body").children().not($initial).remove();
$("#output").empty();
});
</script>
</body>
</html>Place Your Script
Your own script tag must come after the jQuery CDN tag in the HTML, or the browser will throw a '$ is not defined' error the moment your code runs. Keeping load order correct is one of the most common early mistakes with CDN-based setups.
Example: Place Your Script
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
</style>
</head>
<body>
<button id="runBtn">Show jQuery version</button><button id="resetBtn" class="secondary">Reset</button>
<div id="output"></div>
<script>
$("#resetBtn").click(function () { $("#output").empty(); });
$("#runBtn").click(function () {
$("#output").text("jQuery version: " + $.fn.jquery);
});
</script>
</body>
</html>Use a Button
Wiring a button to a click handler is a quick way to prove the whole setup works end-to-end -- if the console logs a message when you click, both the CDN load and your script are wired up correctly.
Example: Use a Button
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<button id="test">Test</button>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
function init() {
$("#test").click(function() {
$("#output").append($("<div>").text("jQuery is working"));
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Check That jQuery Loaded
Logging jQuery.fn.jquery or $.fn.jquery to the console prints the exact version string of the loaded library, which is useful for confirming you got the version you expected from the CDN, especially when debugging a compatibility issue.
Example: Check That jQuery Loaded
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text(String($.fn.jquery)));
$("#output").append($("<div>").text(String(jQuery.fn.jquery)));
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Putting your own
<script>above the jQuery CDN tag, so the browser reports$ is not definedbecause jQuery has not loaded yet. - Adding the CDN tag but never checking it loaded, so a blocked or mistyped URL silently breaks every
$()call on the page. - Loading jQuery more than once (for example a CDN tag plus a local copy), which can overwrite the first copy and wipe out plugins attached to it.
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: