jQuery Introduction

Beginner
⏱️ 16 min read
📚 Updated: Aug 2026
🎯 5 Examples
🚀 7 Try-it labs
DOM · events · $()
jQuery introduction tutorial for beginners on CodeToFun
Overview

What You’ll Learn

This page is a self-contained introduction to jQuery—a popular JavaScript library for front-end interactivity. You will learn how to load it, use $() and document ready, and where jQuery still fits next to vanilla JS and modern frameworks.

What it is

JS library

DOM selection, events, effects, and AJAX with a concise $() API.

Install

CDN script

Load jQuery 3.7.1 from a CDN before your own scripts.

Ready + $()

Syntax

Wait for the DOM, then select and chain methods on elements.

DOM & events

Interact

Update content, toggle classes, and bind click handlers.

Examples

5 labs

CDN setup, hide, text, click toggle, and fade effects.

Next steps

Callbacks

Continue to callbacks, then selectors, events, and AJAX.

Introduction

jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversal and manipulation, event handling, animation, and AJAX interactions for rapid web development.

It lets developers write less code while achieving more—especially when maintaining existing sites or building interactive pages without a heavy framework. jQuery does not replace JavaScript. It is written in JavaScript and provides a friendly API on top of the browser’s DOM. The famous $ function is shorthand for “find these elements and let me work with them.”

Why it matters?

One consistent $() API covers selection, events, effects, and AJAX—and still powers a huge share of WordPress themes, admin UIs, and legacy sites.

Key Highlights

Write less, do more

Common DOM tasks that take many vanilla lines fit in one chained expression.

Cross-browser helpers

jQuery smooths older browser quirks that still appear in enterprise environments.

Chainable API

$("#box").hide().fadeIn() reads left to right on one selection.

Plugins & AJAX

Huge plugin ecosystem plus $.get / $.ajax for server data.

In short: load jQuery, wait for DOM ready, select with $(), and chain methods—without forgetting plain JavaScript underneath.

Setup

✍ How to Use jQuery

Include jQuery via CDN or a local file, then wrap your code in a document-ready handler. These tutorials use jQuery 3.7.1.

Installation

Add a <script> tag before your own scripts. A CDN is fine for demos; pin a version in production.

index.html
<!-- Place before your own scripts -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="app.js"></script>
Try It Yourself

Basic syntax

jQuery revolves around selecting HTML elements and performing actions on them:

script.js
$(function () {
    $("#elementID").hide();
});
Try It Yourself

$(function () { ... }) is shorthand for $(document).ready(...). The selector $("#elementID") targets an element with id="elementID".

DOM manipulation

Powerful selectors let you target nodes by ID, class, tag, or CSS-style queries, then call methods like .html(), .append(), or .remove().

Event handling

Use .on("click", handler) (or shorthand .click(handler)). Event delegation lets you attach one listener to a parent and handle events from dynamically added children.

Animation effects

Methods like .fadeIn(), .fadeOut(), .slideToggle(), and .animate() build smooth transitions without low-level timing code.

💡
Beginner tip

Learn basic JavaScript first (variables, functions, DOM). Then jQuery will feel like a shortcut for repetitive tasks such as selecting elements and attaching click handlers.

Concepts

🧰 Core Building Blocks

ConceptWhat it doesTypical use
$() / jQuery()Factory: find, create, wrap, or run on DOM readyStart every selection
ChainingCall multiple methods on one selection$("#box").hide().fadeIn()
.on()Attach event listenersClicks, forms, keyboard
.html() / .text()Read or update contentMessages and templates
.css() / .addClass()Change styles and classesUI state and themes
Effects.show(), .hide(), .fadeToggle()Reveal and hide panels
AJAX$.get(), $.ajax()Fetch JSON or HTML
PluginsThird-party extensions on top of jQuerySliders, date pickers, validate
Cheat Sheet

⚡ Quick Reference

TaskExample
Document ready$(function () { ... });
Select by ID$("#header")
Select by class$(".btn")
Click handler$("#btn").on("click", fn);
Set text$("#msg").text("Hello");
GET request$.get("/api/data", callback);
Library version$.fn.jquery → 3.7.1
Compare

📋 jQuery vs Vanilla vs Frameworks

Same outcome—different trade-offs for syntax, dependencies, and scale.

jQuery
$("#btn").on("click", fn)

Concise DOM API, plugins, strong legacy support

Vanilla JS
querySelector + addEventListener

No extra dependency; modern browsers cover most needs

React / Vue
components + state

Best for large SPAs with structured UI state

Context

When to Use jQuery

Pick jQuery, vanilla JS, or a framework based on the project—not fashion alone.

  1. Legacy or WordPress sites

    Themes, plugins, and admin scripts often already ship jQuery—extend them cleanly.

  2. Quick DOM scripts

    Menus, toggles, and small animations are fast to write with $() chaining.

  3. Plugin ecosystem

    Need a date picker or slider that assumes jQuery? The library is the glue.

  4. Prefer vanilla for new apps

    Greenfield SPAs usually choose React/Vue or plain querySelector + fetch.

Key benefit: jQuery remains the fastest path to maintain and extend the enormous amount of existing jQuery code on the web.

Hands-On

Examples Gallery

Five starter snippets. Use View Output here, or Try It Yourself to edit the lab.

Example 1 — Load jQuery from a CDN

After the script runs, $ is global. Log the version to confirm the load order.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Demo</title>
</head>
<body>
  <p id="demo">Hello, jQuery!</p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(function () {
      console.log("jQuery version:", $.fn.jquery);
    });
  </script>
</body>
</html>
Try It Yourself

How It Works

The CDN script defines $ and jQuery. Your inline script waits for DOM ready, then reads $.fn.jquery—the version string shipped with that build.

Example 2 — Hide an element on page load

Requires HTML: <div id="banner">Welcome!</div>. When the page loads, the banner disappears immediately.

script.js
$(function () {
    $("#banner").hide();
});
Try It Yourself

How It Works

$("#banner") selects the element by ID. .hide() sets display: none. Running inside $(function(){}) guarantees the node exists before selection.

Example 3 — Update text content

.text() sets plain text (safe from HTML injection). .html() parses markup inside the element.

script.js
$(function () {
    $("#greeting").text("Welcome back!");
    $("h1.title").html("<em>Dashboard</em>");
});
Try It Yourself

How It Works

The first call replaces text content of #greeting. The second injects italic markup into every h1.title. Prefer .text() for untrusted or user-provided strings.

Example 4 — Toggle a class on click

Each click adds or removes the open class on #sidebar. Pair with CSS such as .open { display: block; } for a simple menu.

script.js
$(function () {
    $("#menu-btn").on("click", function () {
        $("#sidebar").toggleClass("open");
    });
});
Try It Yourself

How It Works

.on("click", ...) binds a listener once. Inside the handler, .toggleClass("open") flips the class list so CSS can show or hide the sidebar.

Example 5 — Fade in a message

Chaining .hide() then .fadeIn(800) creates a smooth 800 ms fade-in when the page loads.

script.js
$(function () {
    $("#alert").hide().fadeIn(800);
});
Try It Yourself

How It Works

The selection stays the same across the chain: hide immediately, then animate opacity over 800 milliseconds. Effects return the jQuery object so you can keep chaining.

Use Cases

Where jQuery still earns a place in a project.

1. Interactive UI scripts

Menus, modals, tabs, and form helpers without a full SPA framework.

Example: $("#menu").toggleClass("open")

2. WordPress & CMS themes

Many themes already enqueue jQuery for customizer and front-end scripts.

Example: theme.js using $

3. Partial page updates

Load HTML fragments or JSON and inject them into a container.

Example: $.get("/partial", html => $("#main").html(html))

4. Effects and polish

Fade, slide, and simple .animate() transitions for alerts and panels.

Example: $("#alert").fadeIn(400)

5. Legacy admin dashboards

Older IE-era codebases still rely on jQuery’s consistent API.

Example: intranet tools and CRM UIs

6. jQuery UI / plugins

Widgets and plugins that expect $ as the host library.

Example: datepickers and autocomplete

Advantages

Why teams still reach for jQuery.

  1. 1. Concise, chainable syntax

    Select once, then chain hide, fade, and class updates in a readable line.

  2. 2. Broad compatibility

    A consistent API across browsers that still show up in enterprise and CMS work.

  3. 3. Plugin ecosystem

    Thousands of UI widgets and helpers build on the same $ foundation.

  4. 4. Built-in AJAX helpers

    $.get, $.post, and $.ajax simplify common async patterns.

Usage Tips

Small habits that keep jQuery code predictable.

  1. 1. Always wait for DOM ready

    Wrap scripts in $(function(){}) so selectors find real elements.

  2. 2. Cache repeated selections

    Store var $nav = $("#nav"); when you use the same node many times.

  3. 3. Pin a version in production

    These pages use 3.7.1. Check $.fn.jquery if demos behave differently.

Common Pitfalls

Mistakes that commonly trip up new jQuery users.

  1. 1. Calling $ before jQuery loads

    $ is not defined means the library script has not run yet.

    → Put the jQuery <script> above your own code.

  2. 2. Selecting before the DOM exists

    Scripts in <head> without ready find zero elements.

    → Use $(function(){ ... }) or place scripts at the end of <body>.

  3. 3. Injecting untrusted HTML

    .html(userInput) can open XSS holes.

    → Prefer .text() for user-provided content.

  4. 4. Stacking duplicate handlers

    Binding .on("click") again after every AJAX refresh multiplies clicks.

    → Use event delegation on a stable parent, or .off() before rebinding.

🧠 How jQuery Runs in the Browser

1

Load HTML & jQuery

The browser parses your page and downloads the jQuery library from CDN or a local file.

Parse
2

DOM ready fires

Your $(function(){...}) callback runs once elements exist in the document.

Ready
3

Select & act

$() finds nodes; methods update the DOM, bind events, or start animations.

Interact
=

Live page updates

Users see toggles, fades, and AJAX-loaded content without full page reloads.

Important

Notes

  • Library, not a language. jQuery is JavaScript—learn the fundamentals first.
  • Still widely deployed. Legacy sites and WordPress keep jQuery relevant in 2026.
  • Vanilla is enough for many new apps. Choose tools based on the codebase you ship.
  • Load first. CDN or local file must run before any $ call.

Quick Takeaway: Load jQuery, wait for ready, select with $(), and chain methods—then decide when vanilla JS or a framework is a better fit.

Compatibility

Browser Support

jQuery is a JavaScript library. After you load it, $() helpers run in browsers that the 3.x docs list. Logos use the shared browser-image-sprite.png sprite from this project.

✓ jQuery 3.7.1

jQuery 3.x

Load the minified build, wait for DOM ready, then select and chain. Behavior is consistent because jQuery implements the helpers.

100% With jQuery loaded
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
jQuery Universal

Bottom line: Safe once jquery-3.7.1.min.js (or equivalent) is loaded. These tutorials pin version 3.7.1.

Wrap Up

🎉 Conclusion

jQuery is a compact toolkit for DOM scripting: load it, wait for ready, call helpers on $, and ship interactive pages quickly. It remains essential for legacy maintenance even when new greenfield apps choose vanilla JS or frameworks.

Continue to Callbacks next, then practice selectors, events, and AJAX on real pages.

Pin jQuery 3.7.1 in demos, and never skip document ready when selecting elements.

Open Try It Lab Next: Callbacks
Pro Tips

💡 Best Practices

✅ Do

  • Load jQuery before your own scripts
  • Use $(function(){}) so the DOM exists before you select elements
  • Prefer .on() for event binding (supports delegation)
  • Use .text() for user-provided content to avoid XSS
  • Cache selections: var $nav = $("#nav"); when reused
  • Pin a specific jQuery version in production (e.g. 3.7.1)

❌ Don’t

  • Mix multiple jQuery versions on one page
  • Rely on jQuery without learning plain JavaScript
  • Use .html() with untrusted user input
  • Attach duplicate click handlers on every AJAX refresh
  • Assume jQuery is required for every new project in 2026
  • Forget the $ alias conflict—use jQuery.noConflict() if needed
Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about jQuery

Your gateway to callbacks, selectors, events, effects, and AJAX.

5
Core concepts
$ 01

JS library

Helpers on $, not a new language

Basics
CDN 02

Load first

Script tag before your code

Setup
rdy 03

Document ready

$(function(){})

Timing
→ 04

Chain

Select once, call many methods

API
3.7 05

Version

Tutorials pin 3.7.1

CDN
🎯 You’re ready to explore jQuery method tutorials
Review How to Use →

❓ Frequently Asked Questions

jQuery is a fast, lightweight JavaScript library that simplifies DOM selection, event handling, animations, and AJAX. It wraps browser APIs in a concise $() syntax so you write less code for common front-end tasks.
Yes. jQuery is built on JavaScript—you should understand variables, functions, and basic DOM concepts first. jQuery saves boilerplate; it does not replace learning how JavaScript works.
Yes, especially in legacy websites, WordPress themes, and admin dashboards. Modern greenfield apps often use React, Vue, or vanilla JavaScript, but millions of pages still rely on jQuery and it remains valuable to maintain and extend those projects.
Add a script tag pointing to the jQuery CDN or a local copy before your own scripts. Then wrap your code in $(function() { ... }) so it runs after the HTML is parsed.
JavaScript is the programming language. jQuery is a library written in JavaScript that provides helper methods. Anything you do with jQuery can be done with plain JavaScript—it just usually takes more lines and cross-browser handling.
It is shorthand for $(document).ready(...). Your callback runs once the HTML document is fully parsed so elements exist before you select them with $().
Practice selectors, .on() for events, .html()/.text() for content changes, and simple animations. Then explore AJAX with $.get or $.ajax, deferred objects, and plugin usage on real pages.

Did you Know? 🔊

Include jQuery with a <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> tag, wait for the DOM with $(function() { ... }), select elements with $(), and chain methods like .hide(), .on('click'), and .fadeIn(). jQuery was released in 2006 by John Resig and, at its peak, ran on the majority of the top million websites.

Try the CDN Demo

Load jQuery 3.7.1 in the live editor, then continue to Callbacks.

Open CDN Try It →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

JavaScript Introduction jQuery Callbacks