Prev Next

jQuery Get Started

Getting started with jQuery is easy. You simply need to include the jQuery library in your HTML file, either by linking to a CDN (Content Delivery Network) or by downloading the library and hosting it locally. Once included, you can write jQuery code to manipulate the DOM, handle events, and perform other operations effortlessly.

Steps to Get Started

  • Step 1: Include the jQuery library in your project using a CDN or a local file.
  • Step 2: Use the $(document).ready() function to ensure your jQuery code runs after the DOM is fully loaded.
  • Step 3: Write your jQuery code to interact with HTML elements, handle events, or perform animations.

What is a CDN?

A CDN (Content Delivery Network) is a globally distributed network of servers that delivers content to users based on their geographic location. When you include jQuery via a CDN, your browser fetches the library from a server that is geographically closest to the user, improving load times and reducing latency.

Advantages of Using a CDN

  • Faster Load Times: CDNs reduce the time it takes to load jQuery by fetching the library from a nearby server.
  • Browser Caching: If a user has already visited a website using the same jQuery version from the CDN, it may already be cached in their browser.
  • Reduced Server Load: Hosting jQuery on a CDN reduces the demand on your web server.
  • Version Control: Easily switch between different versions of jQuery by modifying the CDN link.

Example: Using a CDN


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

Version Variations

jQuery offers different versions to suit your needs. These include:

  • Compressed (Minified): The default version for production, optimized for fast loading. Example: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  • Uncompressed: A larger version with readable code, useful for debugging. Example: <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  • Slim Build: A smaller version that excludes rarely used features like Ajax and effects. Example: <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>

Example: Include jQuery and Change Text


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Started with jQuery</title>
    <!-- Include jQuery from CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1 id="header">Hello, jQuery!</h1>
    <button id="changeText">Change Header</button>
    <script>
        $(document).ready(function() {
            $("#changeText").click(function() {
                $("#header").text("jQuery is Ready!");
            });
        });
    </script>
</body>
</html>

Explanation: In this example, the jQuery library is included from a CDN. The $(document).ready() function ensures the DOM is fully loaded before the script executes. Clicking the button updates the text of the h1 element using the .text() method.

Key Takeaways

  • CDN Benefits: Faster loading, browser caching, and reduced server load make CDNs ideal for production use.
  • Multiple Versions: Use the minified version for production, uncompressed for debugging, or the slim build for lightweight projects.
  • Dynamic Interactions: jQuery makes it easy to manipulate HTML elements and handle events like button clicks.
Prev Next