When to Use jQuery in Modern Web
jQuery is still useful when a project already depends on it. Keeping the existing API can reduce unnecessary rewrites.
In this page:
Existing jQuery Projects
jQuery still earns its place in a codebase that already depends on it, where rewriting large amounts of existing, working code just to remove the dependency adds real risk without a clear, corresponding benefit. Migration effort is best reserved for situations where it actually solves a concrete problem.
Example: Existing jQuery Projects
<!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").text("jQuery still loaded: " + typeof $ === "function");
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>Simple DOM Tasks
For small pages with a handful of interactive elements, jQuery can make common DOM operations noticeably more concise than the equivalent native code. Native APIs are also a perfectly good choice when a project has no existing jQuery dependency and doesn't need one.
Example: Simple DOM Tasks
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: #1a1a1a; padding: 10px; border-radius: 4px; }
</style>
<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="btn">Toggle</button>
<div id="box">Box</div>
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
function init() {
$("#btn").on("click", function() {
$("#box").toggle();
$("#output").text($("#box").is(":visible") ? "Box visible" : "Box hidden");
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Plugins and Legacy Tools
Many older applications rely on jQuery plugins for things like carousels, form validation, or date pickers, and some of those plugins have no direct native-JavaScript equivalent. In those cases, keeping jQuery around to support a required plugin is often the pragmatic choice.
Example: Plugins and Legacy Tools
<!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="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<div id="datepicker"></div>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
// Some legacy datepicker/carousel plugins have no direct native equivalent
$("#output").text("Loaded via jQuery plugin ecosystem");
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>When Native APIs Are Better
For brand-new projects, native browser APIs can avoid adding an extra dependency entirely. Modern browsers already provide querySelector, addEventListener, fetch, and a range of other APIs that cover most of what jQuery originally existed to simplify.
Example: When Native APIs Are Better
<!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="btn">Click</button>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
function init() {
document.getElementById("btn").addEventListener("click", function() {
$("#output").append($("<div>").text("No jQuery dependency needed here"));
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Choosing jQuery Wisely
The practical approach is to use jQuery where it genuinely solves a real need in a project — especially one that already depends on it — and to compare it fairly against native APIs and any frameworks already in use before reaching for it in something new.
Example: Choosing jQuery Wisely
<!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();
const projectAlreadyUsesJQuery = true;
if (projectAlreadyUsesJQuery) {
$("#output").append($("<div>").text("Keep using jQuery for consistency"));
} else {
$("#output").append($("<div>").text("Consider native APIs for a new project"));
}
});
$("#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
- Adding jQuery to a new project just to call one or two methods, when native
querySelectorandclassListwould do. - Loading a second copy of jQuery because a plugin needs it, causing version conflicts and a larger download.
- Assuming jQuery is required for cross-browser DOM support, when modern browsers support the standard APIs.
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: