Lesson 1: Introduction to jQuery

Discover the power of jQuery - a fast, lightweight JavaScript library that simplifies HTML document traversal, event handling, and animation for rapid web development.

What is jQuery?

jQuery is a popular, feature-rich JavaScript library designed to simplify client-side scripting of HTML. Created by John Resig in 2006, jQuery provides a concise and powerful API that abstracts away many of the complexities of vanilla JavaScript.

Why jQuery remains relevant:
  • Simplifies complex JavaScript tasks with concise syntax
  • Provides excellent cross-browser compatibility
  • Offers a rich ecosystem of plugins for extended functionality
  • Makes DOM manipulation and event handling significantly easier
  • Still powers over 77% of the top 1 million websites

jQuery vs Vanilla JavaScript

Here's a comparison of common tasks in jQuery vs vanilla JavaScript:

Task Vanilla JavaScript jQuery
Select element by ID 
document.getElementById("demo");
 
$("#demo");
Select elements by class 
document.getElementsByClassName("item");
 
$(".item");
Change element content 
document.getElementById("demo").innerHTML = "New Content";
 
$("#demo").html("New Content");
Add click event handler 
document.getElementById("btn").addEventListener("click", function() {
  // Handle click
});
 
$("#btn").click(function() {
  // Handle click
});
Hide an element 
document.getElementById("elem").style.display = "none";
 
$("#elem").hide();

As you can see, jQuery allows you to accomplish common tasks with significantly less code, making development faster and more efficient.

Including jQuery in Your Project

To use jQuery, you need to include it in your HTML file. You have two primary options: downloading the library or using a CDN (Content Delivery Network).

Using a CDN (Recommended)

CDNs host jQuery files on servers distributed worldwide, providing faster loading times and reliability. Here are the most popular options:

<!-- Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- Microsoft CDN -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jQuery-3.7.1.min.js"></script>

<!-- jQuery Official CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Downloading jQuery

You can download jQuery directly from the official website:

  1. Visit the jQuery download page
  2. Choose the version you want (typically the latest production version)
  3. Download the compressed production version (file ends with .min.js)
  4. Place the file in your project directory and reference it:
<script src="path/to/jquery-3.7.1.min.js"></script>
Important: Always include jQuery before your custom JavaScript files. Place the script tag in the head or just before the closing body tag.

Your First jQuery Program

Here's a complete example of a webpage using jQuery:

<!DOCTYPE html>
<html>
<head>
    <title>My First jQuery Page</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <h1 id="greeting">Hello World!</h1>
    <button id="changeBtn">Change Text</button>

    <script>
        $(document).ready(function() {
            $("#changeBtn").click(function() {
                $("#greeting").text("Welcome to jQuery!");
            });
        });
    </script>
</body>
</html>

Prerequisites

Before diving into jQuery, you should have a solid understanding of:

HTML

Understanding of HTML structure, elements, attributes, and the DOM (Document Object Model) is essential since jQuery primarily interacts with HTML elements.

Learn HTML

CSS

Knowledge of CSS selectors is crucial as jQuery uses the same selector syntax to target elements in the DOM.

Learn CSS

JavaScript

Basic understanding of JavaScript fundamentals (variables, functions, events, etc.) is necessary since jQuery is a JavaScript library.

Learn JavaScript

Why Learn jQuery Today?

With modern JavaScript frameworks like React, Vue, and Angular gaining popularity, you might wonder if jQuery is still worth learning. Here's why it remains valuable:

Legacy Projects

jQuery powers millions of existing websites. Understanding it is essential for maintaining and updating these projects.

Rapid Prototyping

For quick prototypes or small projects, jQuery's concise syntax can be more efficient than setting up a full framework.

Plugin Ecosystem

Thousands of plugins are available for common tasks like sliders, form validation, and animations.

Learning Foundation

jQuery provides an excellent bridge to understanding DOM manipulation and event handling concepts used in modern frameworks.

Industry Insight: According to W3Techs, jQuery is used by 77.6% of all websites whose JavaScript library is known. This makes it the most widely deployed JavaScript library by a large margin.

jQuery Architecture

Understanding jQuery's architecture helps you use it more effectively:

Selector Engine (Sizzle)

jQuery's powerful selector engine allows you to find elements using CSS-style selectors with cross-browser consistency.

DOM Traversal

Easily navigate through the DOM tree with methods like .parent(), .children(), .siblings(), and .find().

Event Handling

jQuery normalizes event handling across browsers and provides methods like .click(), .hover(), and .on() for easy event management.

Effects & Animation

Built-in methods for show/hide, fading, sliding, and custom animations with .animate().

jQuery Object

When you select elements with jQuery, you're not getting DOM elements directly. Instead, you get a jQuery object - a special array-like object that contains:

  • All matched DOM elements
  • jQuery methods for manipulation
  • Properties like length and selector
  • Prototype methods for chaining

This encapsulation is what enables jQuery's powerful method chaining:

$(".menu-item")
  .addClass("active")
  .css("color", "blue")
  .fadeIn(500);
Back to jQuery Home Next Lesson: jQuery Basics