jQuery — Introduction

What is jQuery?

jQuery is a JavaScript library created by John Resig in 2006. Its motto is "Write less, do more."

// Without jQuery
document.getElementById("demo").innerHTML = "Hello";

// With jQuery
$("#demo").html("Hello");

Core Features

• DOM Manipulation — Select, modify, add, remove elements
• Event Handling — Bind events elegantly
• AJAX — Fetch data without page reload
• Animations — Show, hide, fade, slide, animate
• Utilities — Date formatting, iteration, mapping

How jQuery Works

jQuery wraps the browser's native APIs, providing a consistent interface:

// jQuery handles cross-browser differences
$("p").on("click", function() {
    $(this).toggleClass("active");
});

The $ Function

$ is just an alias for jQuery:

// These are identical
$(document).ready(function() { });
jQuery(document).ready(function() { });

DOM Ready

Always wrap jQuery code in a ready handler:

$(document).ready(function() {
    // Code runs after DOM is fully loaded
});

// Shorthand
$(function() {
    // Same thing
});

jQuery vs Modern JavaScript

Feature	jQuery	Vanilla JS
Syntax	Concise	Verbose
Browser support	Excellent	Modern only
File size	87KB	0KB
Learning curve	Easy	Moderate
Performance	Good	Faster

When to Use jQuery

• Legacy projects already using it
• Quick prototypes and demos
• WordPress and CMS plugins
• Projects requiring old browser support

When to Skip jQuery

• New projects with modern JS features
• React, Vue, or Angular applications
• Performance-critical applications
• Mobile-first projects

Mini Practice

1. Compare jQuery and vanilla JS for selecting elements
2. Write the same functionality both ways
3. Load jQuery and test $ is available
4. Use $(document).ready()

Up Next

Continue with Get Started — your first jQuery script.