jQuery — Syntax

The jQuery Syntax

jQuery selectors use CSS syntax wrapped in $():

$("selector").action();

Selecting Elements

// By ID
$("#myId");

// By class
$(".myClass");

// By element
$("p");

// By attribute
$("[type='text']");

// Complex selectors
$("div.container p.highlight");

Chaining Actions

$("h1")
    .css("color", "red")
    .addClass("highlight")
    .fadeIn();

$(this)

$(this) refers to the current element in an event handler:

$("button").click(function() {
    $(this).hide(); // Hides the clicked button
});

Function Notation

jQuery uses function notation, not method notation:

// jQuery — function style
$(selector).hide();

// Vanilla JS — method style
element.style.display = "none";

Factory Pattern

$() creates jQuery objects from different inputs:

$("<p>New paragraph</p>"); // From HTML string
$(document);               // From DOM object
$("#id");                  // From selector
$(function() {});          // Document ready

jQuery Object vs DOM Element

var $el = $("#demo");   // jQuery object
var el = $el[0];        // DOM element
var el2 = $el.get(0);   // Same as above

Mini Practice

1. Select elements by ID, class, and tag
2. Chain three actions on a single element
3. Use $(this) in a click handler
4. Convert between jQuery and DOM objects

Up Next

Continue with Selectors — finding elements on the page.