Introduction to jQuery

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It simplifies HTML document traversal, event handling, animation, and AJAX with an easy-to-use API that works across browsers.

CDN include:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

jQuery Syntax

// $ is the jQuery function
$(selector).action();

// Wait for DOM to load
$(document).ready(function() {
    // Your code here
});

// Shorthand
$(function() {
    console.log("DOM ready");
});

Selectors

$("p")           // all <p> elements
$("#main")       // element with id="main"
$(".card")       // elements with class="card"
$("ul li")       // descendants
$("div > p")     // direct children
$("input[type='text']") // attribute
$("p:first")     // first <p>
$("tr:even")     // even table rows
$("p:contains('hello')") // contains text

DOM Manipulation

// Content
$("#title").text("New Title");
$("#box").html("<b>Bold</b>");
$("input").val("default value");

// CSS
$(".card").css("background", "#f0f0f0");
$(".card").css({ color: "red", fontSize: "18px" });

// Classes
$("div").addClass("active");
$("div").removeClass("hidden");
$("div").toggleClass("visible");
$("div").hasClass("active"); // true/false

// Attributes
$("a").attr("href", "https://example.com");
$("img").attr("src", "new.jpg");
$("input").prop("disabled", true);

Traversal

$("#item").parent();
$("#item").children();
$("#item").siblings();
$("#item").next();
$("#item").prev();
$("li").first();
$("li").last();
$("li").eq(2);          // 3rd element
$("div").find("p");     // descendants
$("p").filter(".intro"); // filter set

jQuery vs Vanilla JS

When to Use jQuery in 2024

Key Takeaway: jQuery simplified cross-browser DOM manipulation for years. While modern vanilla JS and frameworks often replace it, jQuery is still widely used in legacy code and some CMS platforms like WordPress.