jQuery has a simple, consistent syntax that you will recognize and reuse in every script you write. Once you understand the basic pattern, reading and writing jQuery code becomes very intuitive. This page breaks down every piece of that pattern with clear examples.
Every jQuery statement follows the same three-part structure:
$(selector).action();Here is what each part means:
| Part | Example | Meaning |
|---|---|---|
$ |
$ |
Accesses the jQuery library |
| Selector | ("p") |
Selects all <p> elements on the page |
| Action | .hide() |
Hides the selected element(s) |
Let's look at a few real statements to see the pattern in action:
// Hides all <p> elements on the page
$("p").hide();
// Shows all <div> elements
$("div").show();
// Changes the text of an element with id="title"
$("#title").text("New Heading Text");
// Adds a CSS class to all elements with class="card"
$(".card").addClass("highlight");
// Fades out all images
$("img").fadeOut();One of the most important rules in jQuery is this: your code should not run until the HTML page has fully loaded. If jQuery tries to find an element before the browser has rendered it, it will fail silently.
To prevent this, always wrap your jQuery code inside the document ready handler:
$(document).ready(function() {
// Your jQuery code goes here — runs after page is ready
$("p").hide();
});$(document).ready() function waits for the HTML
document to be fully parsed before running any jQuery. Without it, your scripts may try
to interact with elements that do not exist yet.
jQuery also provides a shorter, modern way to write the document ready handler. Both versions do exactly the same thing — choose whichever you prefer:
$(document).ready(function() {
// code runs here
});
$(function() {
// code runs here
});
$(function() { ... }) is the most
commonly used pattern in modern jQuery code. Both are correct — pick one style and stick
with it throughout your project.
Here is a complete HTML page that demonstrates jQuery syntax in practice. When the button is clicked, the paragraph fades out:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Syntax Demo</title>
</head>
<body>
<h2>jQuery Syntax Example</h2>
<p id="info">This paragraph will fade out when you click the button.</p>
<button id="fadeBtn">Fade Out</button>
<!-- Step 1: Include jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Step 2: Write your jQuery code -->
<script>
$(function() {
$("#fadeBtn").click(function() {
$("#info").fadeOut("slow");
});
});
</script>
</body>
</html>Breaking down what happens:
$(function() { ... }) — waits for the page to fully load$("#fadeBtn") — selects the button by its id.click(function() { ... }) — listens for a click event$("#info").fadeOut("slow") — fades out the paragraph slowly| Rule | Why It Matters |
|---|---|
Always start with $ |
It is the jQuery function — all jQuery code begins here |
| Use quotes around selectors | $("p") — the selector must be a string inside quotes |
| Chain methods with a dot | $("p").hide().fadeIn() — multiple actions in one line |
| End statements with a semicolon | Good JavaScript habit — prevents unexpected errors |
| Wrap code in document ready | Ensures your elements exist before you try to select them |
$(selector).action();$ sign is a shorthand for the jQuery() function#id, .class,
element$(document).ready() or its short form
$(function() {})#id for IDs, .class for classes, and element names like
p or div for tag names. If you know CSS, you already know
jQuery selectors!
$(p) tries to evaluate p as a JavaScript variable, not a CSS selector — it must be a string: $("p").
this so you can chain them, but a few (like reading .text() with no argument) return a plain value instead — chaining after those will error.
$(document).ready() with window.onload. ready() fires as soon as the HTML structure is parsed; onload waits for images and other resources too — using the wrong one can delay your interactivity unnecessarily.
A second example — since most jQuery methods return the same jQuery object, you can chain several actions onto one selection in a single statement:
<p id="msg">Watch me change.</p>
<button id="goBtn">Go</button>
<script>
$(function() {
$("#goBtn").click(function() {
$("#msg").css("color", "green").text("Updated via chaining!").fadeOut(2000);
});
});
</script>Q: Can I write $(selector).action() without document ready?
A: You can, but it's risky — if the script runs before that element exists in the DOM, the selection will be empty and the action will silently do nothing.
Q: Is $ always the jQuery function?
A: Usually, but another library could also claim $. Use jQuery.noConflict() if you need both libraries active at once.
Q: How many methods can I chain together?
A: As many as you like, as long as each one returns a jQuery object. See the jQuery Core API docs for which methods support chaining.