Getting Started

jQuery Introduction

Learn jQuery — the JavaScript library that simplified DOM manipulation and shaped modern web development.

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

Why Learn jQuery?

  • Powers millions of legacy websites
  • Extremely simple syntax
  • Great for understanding DOM concepts
  • Used in many older WordPress themes and plugins
  • Quick to add interactivity without a framework

jQuery vs Modern JavaScript

Modern JavaScript (ES6+) has absorbed many jQuery features natively:

  • document.querySelector replaces $()
  • fetch() replaces $.ajax()
  • classList replaces addClass/removeClass

That said, jQuery is still widely used and worth knowing.

Including jQuery

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

Example

javascript
// jQuery uses $ as a shorthand for jQuery
// The $() function selects elements

// Wait for DOM to be ready
$(document).ready(function() {
  console.log("DOM is ready!");
});

// Shorthand (does the same thing):
// $(function() {
//   console.log("DOM is ready!");
// });

// Select elements
const heading = $("h1");           // by tag
const myDiv = $("#myDiv");         // by ID
const buttons = $(".btn");         // by class
const inputs = $("input[type=text]"); // by attribute

// Basic manipulation
$("h1").text("Hello, jQuery!");
$("p").html("<strong>Bold text</strong>");
$(".card").css("background-color", "lightblue");

// Show/hide
$(".modal").show();
$(".modal").hide();
$(".modal").toggle();
Try it yourself — JAVASCRIPT