jQuery Introduction

What Is jQuery?

jQuery is a fast, lightweight JavaScript library that simplifies DOM selection, events, animations, and AJAX. It wraps browser APIs in a concise $() syntax so common front-end tasks take fewer lines.

Core pattern:
  $(selector).action()

Ready handler (run after HTML parses):
  $(function () { ... })

Same idea: $(document).ready(function () { ... })

These tutorials use jQuery 3.7.1. jQuery still powers many legacy sites, WordPress themes, and dashboards even as newer apps prefer vanilla JS or frameworks.

Why Use jQuery?

Plain JavaScript can do everything jQuery does—jQuery just makes everyday DOM work shorter and more consistent across browsers.

How jQuery Runs

Your page loads jQuery, then your script talks to the DOM through $:

Your First jQuery Script

Include the CDN, then update a paragraph when the DOM is ready:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery CDN setup</title>
</head>
<body>
  <h1>jQuery CDN demo</h1>
  <p id="status">Loading jQuery...</p>

  <!-- Place before your own scripts -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(function () {
      $("#status").text("jQuery " + $.fn.jquery + " is ready.");
    });
  </script>
</body>
</html>

jQuery CDN demo
jQuery 3.7.1 is ready.

How It Works

1. Load. The CDN script defines $ / jQuery on the page.

2. Ready. $(function () { ... }) runs after the HTML is parsed.

3. Update. $("#status").text(...) selects the paragraph and sets its text.

Next, explore callback objects in jQuery Callbacks.

jQuery vs Vanilla vs Frameworks

Pick the tool that matches the project:

Same job, two styles

Hide an element with id banner:

$("#banner").hide();

document.getElementById("banner").style.display = "none";

When to use which

Core Building Blocks

These pieces show up in almost every jQuery script:

Where Is jQuery Used?

jQuery still appears across a lot of the live web:

Key Takeaways