Techie BabajiLearn to Code. Build Real Skills.
jQuery · Basics

Introduction to jQuery

You will meet jQuery in many existing projects. This lesson shows you how to read it confidently and when plain JavaScript is the better choice.

Beginner 5 min Lesson 1 of 22 Runnable examplesExamples use jQuery 3.x.
Before you start:JavaScript: DOM Manipulation
0/22 in jQuery
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 1, 2026

Related tutorials

Interview questions

Learning objectives#

  • Recognise the $() function and chaining
  • Wait for the DOM with $(fn)
  • Map common jQuery calls to modern DOM APIs
  • Decide whether to keep or remove jQuery

Explanation#

jQuery wraps elements in a jQuery object. $(selector) finds elements; methods like .addClass() and .on() then act on every matched element at once, and most methods return the same object so calls can be chained.

jQuery was essential when browsers had inconsistent APIs. Today querySelectorAll, classList, addEventListener and fetch cover most of its features natively.

Keep jQuery in a project that already depends on it heavily (for example, plugins or ASP.NET MVC unobtrusive validation). Avoid adding it to new projects just for DOM selection.

Code example: jQuery and its modern equivalent#

HTMLjQuery and its modern equivalent Runnable
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<button id="jq">jQuery toggle</button>
<button id="js">Vanilla JS toggle</button>
<p class="note" style="font-family:sans-serif">Toggle my highlight.</p>
<style>.hl { background: #fde68a; }</style>
<script>
  // jQuery
  $(function () {
    $('#jq').on('click', function () {
      $('.note').toggleClass('hl');
      console.log('jQuery toggled');
    });
  });


  // Modern JavaScript equivalent
  document.querySelector('#js').addEventListener('click', () => {
    document.querySelectorAll('.note').forEach(el => el.classList.toggle('hl'));
    console.log('Vanilla JS toggled');
  });
</script>
Expected output
Both buttons toggle a yellow highlight on the paragraph and log a message.
Opens this example in the full playground

Step-by-step explanation#

  1. $(function () { … }) runs the code once the DOM is ready.
  2. $("#jq").on("click", …) attaches a click handler.
  3. $(".note").toggleClass("hl") toggles the class on every matching element.
  4. The vanilla version uses querySelectorAll and classList.toggle for the same result with no library.

Real-world use case#

Maintaining an ASP.NET MVC 5 application that uses jQuery for AJAX and jquery.validate.unobtrusive for client-side validation.

Common mistakes#

Mixing jQuery objects and DOM elements

$(".x")[0] is a DOM element, not a jQuery object, so jQuery methods are not available on it.

Re-querying the DOM repeatedly

Cache selections in a variable: const $list = $("#list").

Best practices#

  • Load jQuery once, from a pinned version
  • Prefix variables that hold jQuery objects with $
  • Use event delegation with .on(event, selector, handler)
  • Prefer native APIs for new code

Remember this#

$(selector) finds; .method() acts on every match.

Most jQuery methods return the same object — chain them.

Existing jQuery project: keep it. New project: try native JS first.

Practice exercise#

Your task: Convert $(".item").addClass("active").text("Selected"); to modern JavaScript.

Need a hint?
querySelectorAll returns a list; loop with forEach and use classList.add and textContent.
Show solution
JavaScript Illustrative
document.querySelectorAll('.item').forEach(el => {
  el.classList.add('active');
  el.textContent = 'Selected';
});

Mini quiz#

Introduction to jQuery quizMultiple choice Question 1 of 3

What is the modern equivalent of $(".card").addClass("open")?

Score so far: 0/0

Want more? Practise all jQuery MCQs · jQuery interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.