Lesson 2: jQuery Basics | Learn jQuery with Interactive Examples

jQuery Syntax Fundamentals

The core jQuery syntax follows a simple pattern: select elements using CSS-style selectors, then perform actions on them using jQuery methods.

The Basic Syntax Pattern:

$(selector).action()

$ - The jQuery accessor function
selector - Finds HTML elements using CSS syntax
action() - Performs an operation on selected elements

Selector Examples

jQuery uses CSS-style selectors to target elements in the DOM:

Selector	Example	Description
Element selector	$("p")	Selects all <p> elements
ID selector	$("#header")	Selects the element with id="header"
Class selector	$(".intro")	Selects all elements with class="intro"
Attribute selector	$("a[target='_blank']")	Selects all links with target="_blank"
Multiple selector	$("h1, h2, h3")	Selects all h1, h2, and h3 elements

Common jQuery Methods

Once you've selected elements, you can perform actions on them:

// Hide elements
$("p").hide();

// Show elements
$("p").show();

// Add CSS class
$("div").addClass("highlight");

// Remove CSS class
$("div").removeClass("highlight");

// Change content
$("#title").text("New Title");

// Handle click event
$("button").click(function() {
  // Action to perform
});

The Document Ready Event

To prevent jQuery code from running before the document is fully loaded, we wrap it in a document ready function.

Why it's essential: jQuery code that manipulates the DOM must run only after the page is fully loaded. Otherwise, it might try to access elements that haven't been created yet.

Standard Syntax

$(document).ready(function() {
  // jQuery code goes here
});

Shorthand Syntax

$(function() {
  // jQuery code goes here
});

Modern Approach

$(function() {
  // jQuery code runs when DOM is ready
});

Try it yourself:

This button will only work if the document is ready:

Click the button to test if document is ready...

Interactive Examples

Practice jQuery basics with these interactive demos. Click the buttons to see jQuery in action.

Example 1: Hiding Elements

This example demonstrates the basic hide() method:

This is a target element

Click the button to make me disappear!

// Hide the element
$("#hideBtn").click(function() {
  $("#target1").hide();
});

// Show the element
$("#showBtn").click(function() {
  $("#target1").show();
});

Example 2: Modifying Content

Change text content and styling with jQuery:

Original Content

This content will be modified by jQuery.

// Change text content
$("#changeTextBtn").click(function() {
  $("#target2 h4").text("Modified Heading");
  $("#target2 p").text("This text has been changed using jQuery!");
});

// Change styling
$("#changeColorBtn").click(function() {
  $("#target2").css({
    "background-color": "#e3f2fd",
    "color": "#0d47a1",
    "border": "2px solid #1a73e8"
  });
});

// Reset to original
$("#resetBtn").click(function() {
  $("#target2 h4").text("Original Content");
  $("#target2 p").text("This content will be modified by jQuery.");
  $("#target2").css({
    "background-color": "",
    "color": "",
    "border": ""
  });
});

Example 3: Multiple Actions

Perform multiple actions in sequence:

Multi-Action Demo

Watch me transform with multiple jQuery actions!

// Multiple actions in sequence
$("#multiActionBtn").click(function() {
  $("#target3")
    .css("background-color", "#f8bbd0")
    .animate({padding: "40px"}, 500)
    .fadeTo(500, 0.7)
    .slideUp(500)
    .slideDown(500)
    .fadeTo(500, 1);
});

Best Practices

Follow these guidelines to write efficient, maintainable jQuery code:

Cache Selectors

Store frequently used selectors in variables to improve performance:

var $header = $("#header");

Use Specific Selectors

Be as specific as possible to avoid unnecessary DOM traversal:

$("ul.nav > li")

Chain Methods

Chain multiple methods together for cleaner code:

$("#elem")
  .addClass("active")
  .fadeIn(300);

Use Modern Events

Prefer .on() for event binding for flexibility:

$("#btn").on("click", function() {
  // Handle click
});

Performance Tip: Avoid using overly broad selectors like $("*") or $("div") on large pages. Instead, use IDs or specific class names to target elements efficiently.