Intro to jQuery & Setup

Introduction

jQuery is a fast, small JavaScript library that simplifies DOM manipulation, event handling, animation, and AJAX with a single, consistent API. Its motto was "write less, do more" — a one-line jQuery call often replaced a dozen lines of cross-browser vanilla JavaScript.

Released in 2006, jQuery dominated the web for over a decade. Today modern JavaScript (the querySelector, fetch, and ES6 features you already learned) covers most of what jQuery offered, so new projects often skip it. But jQuery still powers a huge portion of existing sites — including parts of the WordPress ecosystem — so reading and maintaining it is a real, employable skill.

Theory

The $ function

jQuery exposes one global function, jQuery, aliased as $. You pass it a CSS selector and it returns a "jQuery object" wrapping all matching elements, which you can then chain methods on:

$('p')              // all <p> elements
$('#title')         // element with id="title"
$('.btn')           // all elements with class "btn"
$('ul li:first')    // first <li> inside a <ul>

Adding jQuery via CDN

The simplest way is a single script tag pointing at a CDN. Place it before your own script:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="app.js"></script>

$(document).ready()

Code that touches the DOM must wait until the DOM is built. jQuery's ready handler runs your code as soon as the document structure is available:

$(document).ready(function () {
  // safe to query and modify the DOM here
});

// modern shorthand — identical behavior:
$(function () {
  // ...
});

Real World Example

This page loads jQuery, so the button below is wired up with real jQuery. Clicking it changes the message text:

$(function () {
  $('#greetBtn').on('click', function () {
    $('#greetMsg').text('Hello from jQuery!');
  });
});

Common Mistakes

• Running DOM code before the page loads. Without $(document).ready() (or placing the script at the end of the body), your selectors may match nothing.
• Loading your script before jQuery. $ is undefined until jQuery's script runs, causing "$ is not defined" errors.
• Forgetting jQuery returns a collection. $('.item') wraps all matches; methods apply to every element.
• Reaching for jQuery on a brand-new project. Modern vanilla JS usually does the job without the extra dependency.

Best Practices

• Pin a specific version in the CDN URL (e.g. jquery-3.7.1.min.js) for predictable behavior.
• Use the $(function(){ ... }) shorthand for ready handlers.
• Cache selectors you reuse: const $list = $('#list'); instead of querying repeatedly.
• For new code, know the vanilla equivalent — it's often just as short and has no dependency.

Practice Exercise

1. Create an HTML file and add the jQuery CDN script tag.
2. Add a heading and a button.
3. In a $(document).ready() handler, log a message to the console to confirm jQuery loaded.
4. Select the heading with $('h1') and change its text using .text().

Assignment

Build a tiny "theme switcher" page:

1. Add the jQuery CDN and a button labeled "Toggle".
2. In a ready handler, attach a click handler to the button.
3. On click, change the body's background color (use .css() — you'll learn it formally in lesson 3).
4. Verify nothing runs before the DOM is ready.

Interview Questions

• What is jQuery? — A JavaScript library that simplifies DOM manipulation, events, effects, and AJAX with a unified, chainable API.
• What does $ represent? — It's an alias for the global jQuery function used to select elements and access jQuery features.
• Why use $(document).ready()? — To run code only after the DOM is fully parsed, so element selections succeed.
• Is jQuery still relevant? — Less so for new projects (modern JS covers most needs), but it's everywhere in legacy code and the WordPress ecosystem, so it's worth knowing.
• What's the vanilla equivalent of $('#id')? — document.querySelector('#id') (or getElementById('id')).

Additional Resources

• api.jquery.com — the official jQuery API reference
• learn.jquery.com — the official beginner guide
• youmightnotneedjquery.com — vanilla JS equivalents for common jQuery calls