jQuery Introduction — What It Is and Why It Still Matters | TipsInLearning

jQuery Lesson 1

Introduction to jQuery

Before you write a single line of jQuery, it helps to understand what it actually is, why it exists, and whether it still makes sense to learn in 2026. This lesson answers all of that — honestly.

12 min read

Beginner

jQuery Basics

A lot of people ask us whether jQuery is still worth learning. The short answer: yes — but not because it's cutting-edge. It's because it's everywhere, it's practical, and it teaches you DOM concepts that carry over to everything else. This lesson gives you the full picture so you can decide for yourself.

What is jQuery?

jQuery is a JavaScript library created by John Resig in 2006. That's it — it's a file of JavaScript code that adds shorter, simpler ways to do things you'd otherwise write in longer vanilla JavaScript.

Its whole point is captured in four words: "Write Less, Do More." Things that take 5 lines of vanilla JavaScript take 1 line of jQuery. That gap has closed over time with modern JavaScript, but jQuery still wins on readability and browser consistency.

"Write Less, Do More"

One line of jQuery often replaces 5–10 lines of vanilla JavaScript

jQuery runs on hundreds of millions of websites — including WordPress, which powers over 40% of the internet and ships jQuery by default. Even if you move on to React or Vue later, you'll still encounter jQuery in real projects.

Why Use jQuery?

Here are the six practical reasons developers still reach for jQuery:

Shorter Code

One line replaces many. Faster to write, easier to read and maintain.

Cross-Browser

Works the same on Chrome, Firefox, Safari, and Edge. No manual browser hacks.

CSS Selectors

Use CSS syntax you already know to find elements — nothing new to learn.

Built-in Effects

Fade, slide, animate — smooth effects without extra libraries.

Easy Events

Attach click, hover, and keyboard handlers cleanly in one line.

Simple AJAX

Load server data without page refreshes — far simpler than raw fetch.

What jQuery Can Do

jQuery covers five main areas. Each one simplifies a different part of working with web pages:

DOM Manipulation

jQuery — DOM

$("#myEl").html("New content");    // Set HTML
$("#myEl").text("Plain text only");  // Set text
$("#myEl").append("Added at end");    // Append content
$("#myEl").remove();                   // Delete element

Effects & Animation

jQuery — Effects

$("#box").hide();          // Instant hide
$("#box").fadeOut(600);   // Fade out over 600ms
$("#box").slideDown();     // Slide open animation

jQuery vs Vanilla JavaScript — The Real Difference

Comparison

// Change color of ALL paragraphs — vanilla JS
const paras = document.querySelectorAll("p");
paras.forEach(p => p.style.color = "red");

// Same thing in jQuery — one line
$("p").css("color", "red");

jQuery Versions

There are three major version families. For any new project, use jQuery 3.x — it's the only one still actively maintained:

jQuery 1.x

2006–2013

Legacy

Supported old IE. Still found in very old codebases — don't use for new projects.

jQuery 2.x

2013–2016

Legacy

Dropped IE 6–8 support. Lighter than 1.x. Also outdated now.

jQuery 3.x

2016–Present

✓ Use This

Current and maintained. Faster, modern JavaScript, Promises support. Always use 3.x.

Adding jQuery to Your Page

The easiest way is the CDN link — no download, one line, works immediately. Put it just before the closing </body> tag, then put your own code in a second script tag after it:

HTML — CDN Setup

<body>

  <!-- your HTML content -->
  <p>Hello!</p>
  <button>Click me</button>

  <!-- Step 1: jQuery first -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- Step 2: Your code second -->
  <script>
    $(function() {
      $("button").click(function() {
        $("p").hide();
      });
    });
  </script>

</body>

Order matters. Your own script tag must always come after the jQuery script tag. If it's before, jQuery doesn't exist yet when your code runs and you'll get a $ is not defined error.

Document Ready — Always Use This

Wrap all your jQuery inside $(function(){...}). This makes sure the page has fully loaded before jQuery tries to find any elements. Without it, your selectors find nothing because the HTML hasn't been parsed yet.

jQuery — Document Ready

// Full version
$(document).ready(function() {
  // all your jQuery here
});

// Shorthand — same thing, most common
$(function() {
  // all your jQuery here
});

Basic Syntax — One Pattern, Everything

Every jQuery statement follows the same three-part structure:

      $("selector").action()
    

Part	What it does	Example
$	The jQuery function — gives you access to everything	$()
selector	Finds HTML elements using CSS syntax	"#id", ".class", "p"
action()	The jQuery method to run on those elements	.hide(), .css(), .click()

jQuery vs Vanilla JavaScript

Task	Vanilla JS	jQuery
Select by ID	document.getElementById("id")	$("#id")
Select by class	querySelectorAll(".class")	$(".class")
Hide element	el.style.display = "none"	$(sel).hide()
Add event	el.addEventListener("click", fn)	$(sel).click(fn)
Browser compat	Manual handling needed	Automatic
File size	Zero overhead	~30KB minified

Honest take: Modern vanilla JavaScript with ES6 has closed much of the gap. React, Vue, and Angular have also replaced jQuery for large single-page apps. But jQuery is still the right choice for WordPress, legacy projects, quick scripts, and learning DOM manipulation in an approachable way.

Pros & Cons

Advantages

Much shorter code than vanilla JS
Cross-browser compatibility handled
Beginner-friendly — CSS selectors you know
Built-in animations and effects
Massive community and plugin library
Used by WordPress — very employable

Disadvantages

Adds ~30KB to page load
Slower than native JavaScript
Not ideal for large single-page apps
Modern JS has reduced the gap
Less relevant for framework-based projects

Your First jQuery Page

Copy this, open it in a browser, click the paragraph — it fades out. Click the button — it comes back. That's jQuery in action:

HTML — Complete First Program

<!DOCTYPE html>
<html>
<body>

  <h1>Hello jQuery!</h1>
  <p>Click me to fade out.</p>
  <button id="showBtn">Bring it back</button>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(function() {

      // Click the paragraph to fade it out
      $("p").click(function() {
        $(this).fadeOut(600);
      });

      // Button brings it back
      $("#showBtn").click(function() {
        $("p").fadeIn(600);
      });

    });
  </script>

</body>
</html>

Practice

Five Things to Try

1Create the page above, open it in the browser, and confirm the paragraph fades when you click it

2Replace .fadeOut() with .slideUp() — notice the different animation. Try .hide() for instant disappear

3Add a second paragraph and confirm both fade when clicked separately using $(this)

4Open the browser console (F12), type jQuery and press Enter — confirm it shows the jQuery function, not undefined

5Try moving your script tag above the jQuery CDN script tag — see the $ is not defined error in the console. Then move it back

Quick Summary

1jQuery is a JavaScript library — it makes DOM manipulation, events, and AJAX shorter to write.

2Add via CDN. jQuery script tag first, your own code script tag second — order matters.

3Always wrap your code in $(function(){...}) so it runs after the page loads.

4Syntax is always $(selector).action() — find something, then do something to it.

5jQuery 3.x is the current version — always use this for new projects.

6It's still worth learning — WordPress, legacy code, and quick scripts use it constantly.

Questions About jQuery

Yes — not because it's the future, but because it's the present on a huge number of sites. WordPress alone powers 40%+ of the web and depends on jQuery. If you ever work with legacy codebases, client sites, or WordPress themes, jQuery will come up. It's also one of the most approachable ways to learn DOM manipulation concepts that transfer directly to vanilla JavaScript and modern frameworks.

Almost certainly because your code is running before jQuery has loaded. Check two things: first, that your jQuery CDN script tag is actually in your HTML. Second, that your own script tag comes after the jQuery script tag, not before. The order matters — jQuery must exist before you try to use it.

The document ready function $(function(){...}) ensures your code runs only after the HTML has fully loaded and the browser has built the DOM. Without it, jQuery tries to find elements before they exist and finds nothing. If you put your script tag at the bottom of the body, just before the closing tag, the DOM is already loaded by that point — but using document ready is still the safe habit to build.

Learn jQuery first if you're a beginner — it teaches you how the browser DOM actually works, how events fire, and how AJAX requests work. These are foundational concepts that make React or Vue much easier to understand later. Jumping to React without that foundation often leads to using it without really understanding what's happening underneath.

Nothing at all — they're exactly the same. $ is just a shorthand alias for jQuery. Writing $("p").hide() and jQuery("p").hide() do identical things. Developers use $ because it's shorter. If you ever run into a conflict where another library also uses $, call jQuery.noConflict() to release the shorthand and use the full jQuery() instead.

jQuery Introduction