jQuery or modern JavaScript?

What you'll learn

How common jQuery tasks look in modern plain JavaScript, and how to decide which to use in a project.

Why it matters

jQuery was created in 2006 to smooth over big differences between browsers and to make the DOM less painful. Today browsers agree with each other and have the features built in. You will still meet jQuery in older sites, WordPress themes and plugins, so you need to read it, but for new code you often will not need it.

Explanation

Modern browsers provide direct equivalents:

Task	jQuery	Plain JavaScript
Select	$(".item")	document.querySelectorAll(".item")
One element	$("#a")	document.querySelector("#a")
Text	$(el).text("x")	el.textContent = "x"
Add class	$(el).addClass("on")	el.classList.add("on")
Event	$(el).on("click", fn)	el.addEventListener("click", fn)
Hide	$(el).hide()	el.style.display = "none"
Fetch JSON	$.getJSON(url)	fetch(url).then(r => r.json())
Ready	$(function () {})	document.addEventListener("DOMContentLoaded", fn)

Reasons to keep jQuery:

• You maintain an existing project or theme that already uses it.
• A plugin you depend on requires it.
• Your team knows it well and the project is small.

Reasons to choose plain JavaScript:

• No extra file to download (jQuery is about 30 KB compressed).
• Modern frameworks (React, Vue) manage the DOM themselves and do not mix well with jQuery.
• The skills carry over to every other tool.

Example

The same behaviour written both ways: clicking a button changes a message and toggles a class.

Step-by-step walkthrough

1. Both handlers do the same job: set the text and toggle the on class.
2. The jQuery version is shorter because methods chain.
3. The plain version is a few lines longer but needs no library and is just as readable.
4. Click each button in the preview. Notice that they behave identically.
5. For heavy DOM work the extra lines add up, which is why jQuery was so popular. For modern projects, helper functions or a framework fill that gap.

Try it yourself

Rewrite this jQuery line in plain JavaScript: $(".item").css("color", "red");. Hint: loop over querySelectorAll and set el.style.color.

Same job, two waysjQuery

Editable code<style> .on { color: tomato; font-weight: bold; } </style> <button id="jq">jQuery version</button> <button id="js">Plain JS version</button> <p id="msg">Waiting...</p> <script> $("#jq").on("click", function () { $("#msg").text("Clicked with jQuery").toggleClass("on"); }); document.querySelector("#js").addEventListener("click", function () { const msg = document.querySelector("#msg"); msg.textContent = "Clicked with plain JS"; msg.classList.toggle("on"); }); </script>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Adding jQuery to a new project out of habit just to use one or two features.
• Mixing jQuery and a framework that controls the same DOM.
• Using an outdated jQuery version with known security problems. Keep it updated.
• Rewriting a working jQuery site for no reason. Replace it only when there is a real benefit.

Quick quiz

Summary

• Modern browsers have built-in equivalents for most jQuery features.
• Keep jQuery for legacy code and plugins; prefer plain JavaScript or a framework for new projects.
• Knowing both lets you read any codebase.

You finished the jQuery track. Try the practice exercises to lock it in.

<style>
  .on { color: tomato; font-weight: bold; }
</style>

<button id="jq">jQuery version</button>
<button id="js">Plain JS version</button>
<p id="msg">Waiting...</p>

<script>
  // jQuery
  $("#jq").on("click", function () {
    $("#msg").text("Clicked with jQuery").toggleClass("on");
  });

  // Plain JavaScript
  document.querySelector("#js").addEventListener("click", function () {
    const msg = document.querySelector("#msg");
    msg.textContent = "Clicked with plain JS";
    msg.classList.toggle("on");
  });
</script>