How To Use jQuery

jQuery, once the cornerstone of web development, continues to serve as a versatile tool in many scenarios despite the dominance of modern JavaScript frameworks like React and Vue. Its simplicity, intuitive syntax, and extensive plugin ecosystem make it a reliable choice for developers handling smaller projects, legacy codebases, or rapid prototypes.

This guide explores how jQuery fits into modern web development, highlighting its benefits, and practical applications.

In this section, we’ll cover the following topics:

What is jQuery?

jQuery is a lightweight and fast JavaScript library that simplifies many repetitive and complex web development tasks. Introduced in 2006, it revolutionized how developers interact with the Document Object Model (DOM), manage events, and make asynchronous requests. With its concise syntax, jQuery allows developers to write less code while accomplishing more, making it an invaluable tool for creating dynamic and interactive web pages.

Although its popularity has declined with the rise of modern frameworks like React and Vue, jQuery remains relevant in specific contexts. It is particularly effective for maintaining legacy systems, leveraging its extensive plugin ecosystem, and ensuring cross-browser compatibility. Unlike modern frameworks, which often require extensive setups, jQuery excels in simpler, task-focused projects and continues to evolve to support the latest browser standards while maintaining compatibility with older environments.

For developers new to web development, learning jQuery is still valuable as it frequently appears in existing codebases and serves as a stepping stone to understanding advanced JavaScript concepts.

Benefits of Using jQuery

jQuery continues to be a valuable tool for specific scenarios, offering a mix of simplicity, efficiency, and compatibility. Below, we delve into its key advantages:

Quick Prototyping and Simpler Projects

jQuery’s lightweight and intuitive API makes it an ideal choice for building prototypes or small-scale web applications. Its simple setup allows developers to add interactive features like modals, tooltips, and dropdown menus without the overhead of frameworks like React or Vue.

For instance, imagine you need to quickly create a tooltip for an element. With jQuery, you can achieve this in just a few lines of code, allowing you to focus on refining functionality rather than spending time configuring a complex environment. This is particularly useful for projects with tight deadlines or those requiring minimal infrastructure.

Advantage: Faster development with minimal setup, enabling developers to iterate quickly and deliver results efficiently.

Simplified Code (DOM Manipulation, AJAX Requests, JSON Handling)

One of jQuery’s greatest strengths lies in its ability to simplify tasks like DOM manipulation, event handling, and AJAX requests. Its methods, such as .addClass(), .hide(), and .append(), allow developers to perform actions that would otherwise require verbose and intricate JavaScript code.

Take AJAX requests as an example. Instead of writing lengthy code to fetch and update data asynchronously, jQuery offers a more concise approach:

$.getJSON("https://api.example.com/weather", function (data) {
  $("#temperature").text(data.temperature);
});

This reduces the complexity of fetching data from a server and updating the page dynamically.

Advantage: Cleaner and more readable syntax, making it easier to write and maintain code, especially when handling complex UI updates or interacting with APIs.

Wide Range of Plugins

The jQuery ecosystem includes a vast collection of plugins that streamline the implementation of common UI components. Whether you need a slider, carousel, or form validation, there’s likely a prebuilt plugin available to meet your requirements.

For example, the Slick Slider plugin allows developers to create beautiful and responsive carousels with minimal effort. By integrating such plugins, you can save significant time that would otherwise be spent writing custom code for standard functionalities.

Advantage: Prebuilt solutions that are easy to integrate, reducing the development effort required for common features.

Legacy Browser Support

jQuery has long been praised for its ability to normalize browser inconsistencies, ensuring consistent behavior across a wide range of environments, including older browsers like Internet Explorer 9 and below. This is particularly important for projects that target users on outdated systems, where modern frameworks may struggle to function properly.

For example, jQuery’s event handling methods automatically account for differences in how browsers interpret events, sparing developers the headache of writing polyfills or additional logic.

Advantage: Reliable cross-browser compatibility without requiring extra libraries or manual adjustments, making it a trusted choice for maintaining legacy projects.

How To Use jQuery

Installing jQuery in Your Project

Getting started with jQuery is straightforward, with several methods to include it in your project:

CDN Integration
Add the following script tag to your HTML file:

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

npm Installation
For modern workflows, install jQuery via npm:

npm install jquery

Local File
Download jQuery from its official website and link it in your project:

<script src="path-to-your-jquery-file/jquery.min.js"></script>

Writing jQuery Code

Using jQuery begins with selecting elements and chaining methods. The $() function is at the core of all jQuery operations. Here’s an example:

$(document).ready(function () {
  $("#my-button").click(function () {
    alert("Button clicked!");
  });
});

This example demonstrates how to add a click event listener to a button and display an alert when clicked. jQuery simplifies this process, reducing the need for verbose event-binding syntax in vanilla JavaScript.

Implementing jQuery with AI Assistance

Integrating AI features into web projects is becoming increasingly important for creating smarter and more dynamic user interfaces. Combining jQuery with AI tools can simplify the process by providing a streamlined approach to handling interactivity and data manipulation. In this section, we’ll explore practical examples to illustrate how you can enhance your applications using jQuery and AI techniques.

Preparing for Practice Files

This guide includes case studies requiring the following structure:

/your-project-folder/  
    └── 09-03-how-to-use-jquery/ (<- sub-folder)    
        ├── example-1.css  
        ├── example-1.html  
        ├── example-1.js  
        ├── example-2.css  
        ├── example-2.html  
        ├── example-2.js  
        ├── example-3.css  
        ├── example-3.html  
        └── example-3.js  

For your convenience, these files are also available on our GitHub repository.

AI Case 1: Creating Modals with jQuery

Modals are a common feature in web applications, used to display information or interact with users. In this example, we’ll create a responsive modal with fade-in animations and dynamic content using jQuery.

Sample AI prompt:

Sample code output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dynamic Modal Example</title>
    <link rel="stylesheet" href="example-1.css" />
  </head>
  <body>
    <div class="container">
      <h1>Modal Demonstration</h1>
      <p>Click the button below to see the modal in action:</p>
      <button id="open-modal" class="button">Open Modal</button>
      <div id="modal" class="modal">
        <div class="modal-content">
          <span class="close">&times;</span>
          <p>This is a dynamic modal created using jQuery!</p>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="example-1.js"></script>
  </body>
</html>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  text-align: center;
}

.button {
  background-color: #4caf50;
  color: white;
  padding: 15px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.modal {
  display: none; /* Ensure modal is hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center; /* Center modal vertically and horizontally */
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  width: 80%;
  max-width: 400px;
  text-align: center;
  position: relative;
}

.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

$(document).ready(function () {
  // Ensure modal is hidden when the page loads
  $("#modal").hide();

  // Show modal when the button is clicked
  $("#open-modal").click(function () {
    $("#modal").fadeIn();
  });

  // Hide modal when the close button is clicked
  $(".close").click(function () {
    $("#modal").fadeOut();
  });

  // Hide modal when clicking outside of the modal-content
  $(window).click(function (event) {
    if ($(event.target).is("#modal")) {
      $("#modal").fadeOut();
    }
  });
});

Instructions to see the results:
Save the code above in each file. Open the HTML file in your browser to view the validation behavior.

To see how the code works, you can also check out the link below.

Demo Web Page 41

AI Case 2: Dynamic Drop-Down Menu with API Integration

Drop-down menus are another common UI component. This example demonstrates how to create an AI-enhanced drop-down menu that dynamically fetches and displays options based on user input.

Sample AI prompt:

Sample code output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dynamic Drop-Down Menu</title>
    <link rel="stylesheet" href="example-2.css" />
  </head>
  <body>
    <div class="dropdown-container">
      <h1>Dynamic Drop-Down Menu</h1>
      <p>
        Please select an option from the menu below. Options are loaded
        dynamically:
      </p>
      <div id="loading" class="loading">Loading options...</div>
      <select id="dropdown" class="dropdown" style="display: none"></select>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="example-2.js"></script>
  </body>
</html>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.dropdown-container {
  text-align: center;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  width: 100%;
}

.loading {
  font-size: 16px;
  color: #666;
}

.dropdown {
  padding: 10px;
  font-size: 16px;
  margin-top: 10px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
}

$(document).ready(function () {
  const mockApi = "https://jsonplaceholder.typicode.com/users";

  // Fetch data from API
  $.getJSON(mockApi, function (data) {
    const dropdown = $("#dropdown");
    const loading = $("#loading");

    // Populate dropdown
    data.forEach(function (item) {
      dropdown.append(`<option value="${item.id}">${item.name}</option>`);
    });

    // Hide loading indicator and show dropdown
    loading.hide();
    dropdown.show();
  });
});

Instructions to see the results:
Save the code above in each file. Open the HTML file in your browser to view the validation behavior.

To see how the code works, you can also check out the link below.

Demo Web Page 42

AI Case 3: Dynamic Image Slider

Image sliders are visually engaging components that allow users to view multiple items in a compact area. In this example, we use JSONPlaceholder, a free online mock API, to fetch image data. JSONPlaceholder provides prebuilt endpoints for testing and prototyping, allowing us to retrieve placeholder images with minimal setup.

Sample AI prompt:

Sample code output:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Image Slider</title>
  <link rel="stylesheet" href="example-3.css">
</head>
<body>
  <div class="slider-container">
    <h1>Dynamic Image Slider</h1>
    <div id="loading" class="loading">Loading images...</div>
    <div id="slider" class="slider" style="display: none;">
      <button class="prev">❮</button>
      <div class="slides"></div>
      <button class="next">❯</button>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="example-3.js"></script>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.slider-container {
  text-align: center;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  width: 100%;
  position: relative;
}

.loading {
  font-size: 16px;
  color: #666;
}

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slides img {
  max-width: 100%;
  border-radius: 10px;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

$(document).ready(function () {
  const mockApi = "https://jsonplaceholder.typicode.com/photos?_limit=5";

  // Fetch images from JSONPlaceholder API
  $.getJSON(mockApi, function (data) {
    const slides = $(".slides");
    const slider = $("#slider");
    const loading = $("#loading");

    // Check if data is returned
    if (data && data.length) {
      // Populate slider with images
      data.forEach(function (item) {
        slides.append(`<img src="${item.url}" alt="${item.title}" />`);
      });

      // Hide loading indicator and show slider
      loading.hide();
      slider.show();

      // Slider functionality
      let currentIndex = 0;

      function showSlide(index) {
        slides.css("transform", `translateX(-${index * 100}%)`);
      }

      $(".prev").click(function () {
        currentIndex = (currentIndex > 0) ? currentIndex - 1 : data.length - 1;
        showSlide(currentIndex);
      });

      $(".next").click(function () {
        currentIndex = (currentIndex < data.length - 1) ? currentIndex + 1 : 0;
        showSlide(currentIndex);
      });
    } else {
      // Handle case where no data is returned
      loading.text("No images available.");
    }
  }).fail(function () {
    // Handle API errors
    $("#loading").text("Failed to load images.");
  });
});

Instructions to see the results:
Save the code above in each file. Open the HTML file in your browser to view the validation behavior.

To see how the code works, you can also check out the link below.

Demo Web Page 43

Reference links:

JSONPlaceholder Documentation

jQuery CDN