How to read jQuery

Touch an existing site or a WordPress theme and you’ll meet code like $('.card').addClass('on');. This article is a quick reference for reading it, not for learning to write it. Learn three quirks of the syntax and the rest is a lookup.

Quirk 1: $() is “the function that collects elements”

The $ you see everywhere is the name of a function jQuery provides. Put a CSS selector in the parentheses and it returns everything that matches.

$('.card')      // every element with the class card
$('#title')     // the element whose id is title
$('li')         // every li tag

In plain JavaScript that’s document.querySelectorAll('.card'). The selector syntax is the same as CSS, so if you can read CSS you can read this part.

Quirk 2: dots chain together (method chaining)

jQuery code keeps going with dots.

$('.card').addClass('is-open').css('color', 'red');

Read it top to bottom and you’re fine. “Collect .card → add the class is-open → set the text colour to red.” jQuery’s methods hand the collection back after doing their work, so the next step can follow immediately.

When you meet a long line, break at the dots to take it apart.

$('.card')
  .addClass('is-open')
  .css('color', 'red');

Quirk 3: everything wrapped in $(function () { ... });

Files often start like this.

$(function () {
  // the actual work goes here
});

It means “run the contents once the HTML has finished loading.” Without it, code can try to touch elements that aren’t on the page yet, and “nothing happens.” These three all mean the same thing, so treat them as one:

$(function () { ... });
$(document).ready(function () { ... });
jQuery(function ($) { ... });   // the form you'll see in WordPress

The last one is needed because WordPress disables the $ alias.

The lookup table

When something won’t parse, look it up here.

Changing content

Changing appearance

Reacting

Moving and fetching

Reading three real snippets

Working with the table, here are the shapes you’ll actually meet.

Toggling a class with a button

$('.menu-button').on('click', function () {
  $('.menu').toggleClass('is-open');
});

“When .menu-button is clicked, toggle the class is-open on .menu.” The insides of a hamburger menu are usually just this.

In plain JavaScript:

document.querySelector('.menu-button').addEventListener('click', function () {
  document.querySelector('.menu').classList.toggle('is-open');
});

this is “the element that just reacted”

$('.tab').on('click', function () {
  $('.tab').removeClass('is-active');
  $(this).addClass('is-active');
});

$(this) is the element that was just clicked. So: “strip is-active off every tab, then put it back on the one that was pressed.” Tab switching is almost always this shape.

Processing one at a time

$('.item').each(function (i) {
  $(this).css('animation-delay', i * 0.1 + 's');
});

each processes the collected elements one at a time. i counts from 0, so this reads as “delay each one another 0.1s”—a stagger effect.

Knacks for reading

• See $, think “it’s collecting elements”—the contents are a CSS selector
• When dots chain, read top to bottom—look up only the methods you don’t know
• $(this) is “the current element”—it shows up constantly inside events
• Motion methods like fadeIn do what CSS does, so read them that way
• Don’t guess a method from its name—.prop() and .attr() look alike and aren’t. Look up anything not in the table

Summary

1. $('.card') is a function that collects elements; the contents are a CSS selector
2. The dotted chain reads top to bottom
3. $(function () { ... }) signals “run after the HTML has loaded”
4. $(this) is “the element that just reacted”—very common inside events
5. Don’t guess unfamiliar methods—look them up in the table

Just being able to read it makes existing sites unintimidating. You never have to learn to write it.