jQuery Introduction

jQuery is one of the most widely used JavaScript libraries in web development. It was created to make common JavaScript tasks faster, simpler, and compatible across different browsers. Instead of writing lengthy JavaScript code, jQuery allows the same result to be achieved with just a few lines.

This topic introduces what jQuery is, why it was created, and what problems it solves for web developers.

What is jQuery?

jQuery is a fast, lightweight JavaScript library. A library is a collection of pre-written code that can be reused to perform common tasks. jQuery was released in 2006 by John Resig and quickly became the standard tool for front-end web development.

The core idea behind jQuery is captured in its motto:

"Write less, do more."

This means that tasks requiring 10–20 lines of plain JavaScript can often be done in just 1–3 lines using jQuery.

Why Use jQuery?

Before jQuery, web developers had to write different JavaScript code for different browsers (Chrome, Firefox, Internet Explorer). jQuery solved this by providing a single, consistent API that works the same way in all major browsers.

Key Reasons to Use jQuery

• Simplicity: Common tasks like selecting elements, changing styles, or handling clicks are made much simpler.
• Cross-browser Compatibility: jQuery handles browser differences automatically.
• Large Ecosystem: Thousands of plugins are available to extend jQuery's capabilities.
• AJAX Support: Sending and receiving data from a server without reloading the page is very easy with jQuery.
• Community: A large number of tutorials, forums, and resources are available.

What Can jQuery Do?

jQuery can handle almost everything that plain JavaScript can do on the front end of a website, but in a much cleaner way. Here are the main capabilities:

• Select and manipulate HTML elements (change text, attributes, structure)
• Handle events like clicks, hover, and keyboard input
• Create animations and visual effects (fade, slide, animate)
• Make AJAX calls to load data from a server without page refresh
• Traverse the DOM (navigate between parent, child, and sibling elements)
• Modify CSS styles and classes dynamically

jQuery vs Plain JavaScript

To understand the advantage of jQuery, compare how both accomplish the same task — changing the text of a paragraph when a button is clicked.

Plain JavaScript

document.getElementById("myBtn").addEventListener("click", function() {
  document.getElementById("myPara").innerHTML = "Hello, World!";
});

jQuery

$("#myBtn").click(function() {
  $("#myPara").text("Hello, World!");
});

Both examples do exactly the same thing. jQuery is shorter and more readable, especially when working with multiple elements or complex interactions.

How jQuery Works (High-Level Overview)

jQuery uses the $ symbol as a shortcut to access its functions. When something like $("p") is written, jQuery looks through the entire webpage and selects all <p> (paragraph) elements. After selecting them, any jQuery method can be applied to modify, animate, or interact with those elements.

Basic Syntax

$(selector).action();

• $ — Refers to jQuery
• selector — Identifies which HTML element(s) to work with
• action() — The jQuery method to perform on the selected element(s)

Simple Example

$("h1").hide();

This single line finds every <h1> heading on the page and hides it. Doing the same in plain JavaScript would require several more lines of code.

Key Points

• jQuery is a JavaScript library — not a programming language on its own.
• It simplifies common web development tasks.
• The $ symbol is jQuery's main access point.
• jQuery syntax follows the pattern: $(selector).action();
• It works consistently across all major browsers.
• jQuery is best used in combination with HTML and CSS.