Skip to content

Introduction to jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

Why jQuery?

In the early days of the web, browsers had significant inconsistencies in how they implemented JavaScript APIs. jQuery was created to smooth over these differences, providing a single, consistent interface.

While modern vanilla JavaScript (ES6+) has adopted many features that made jQuery popular (like document.querySelector), jQuery is still widely used in legacy systems and remains a valuable tool to understand.

Core Features

  1. DOM Selection and Manipulation: Easily select elements and change their content, styles, or attributes.
  2. Event Handling: Attach event listeners with a cleaner syntax.
  3. Animations: Create smooth animations and effects with built-in methods like fadeIn(), slideUp(), etc.
  4. AJAX: Simplify asynchronous HTTP requests to load data without refreshing the page.

Example Syntax

// Vanilla JS
document.getElementById('myButton').addEventListener('click', function() {
 document.getElementById('myDiv').style.display = 'none';
});

// jQuery
$('#myButton').click(function() {
 $('#myDiv').hide();
});

As seen above, jQuery's syntax is often much more concise, utilizing the $ function as a powerful selector and utility tool.