jQuery Syntax

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.

The Basic jQuery Syntax

Every jQuery statement follows the same three-part structure:

$(selector).action();

Here is what each part means:

$ The jQuery function — your entry point into the jQuery world ("selector") A CSS-style selector that targets the HTML element(s) you want to work with .action() The jQuery method (action) you want to perform on the selected element(s)

Part	Example	Meaning
`$`	`$`	Accesses the jQuery library
Selector	`("p")`	Selects all `<p>` elements on the page
Action	`.hide()`	Hides the selected element(s)

Simple jQuery Examples

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();

The Document Ready Event

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();
});

Note: The $(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.

Long Form vs Short Form

jQuery also provides a shorter, modern way to write the document ready handler. Both versions do exactly the same thing — choose whichever you prefer:

Long Form (Traditional)


                                        $(document).ready(function() {

                                          // code runs here

                                        });

Short Form (Modern)


                                        $(function() {

                                          // code runs here

                                        });

Tip: The short form $(function() { ... }) is the most commonly used pattern in modern jQuery code. Both are correct — pick one style and stick with it throughout your project.

A Full Working Example

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

jQuery Syntax Rules to Remember

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

Key Points to Remember

Every jQuery statement follows the pattern: $(selector).action();
The $ sign is a shorthand for the jQuery() function
Selectors work just like CSS — #id, .class, element
Always wrap your code in $(document).ready() or its short form $(function() {})
jQuery methods can be chained — you can call multiple actions on the same element in one line
jQuery must be loaded before your custom script for everything to work

Good to know: jQuery uses the same CSS selector syntax you already know — #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!

« Previous Lesson Next Lesson »