JavaScript jQuery

JavaScript - Exploring jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It simplifies things like HTML document traversal and manipulation, event handling, and animation for web development. While modern JavaScript (ES6+) offers many native capabilities that overlap with jQuery, understanding jQuery can be useful for working with legacy projects or specific plugins.

Including jQuery

You can include jQuery in your web page by downloading it and hosting it yourself, or by using a Content Delivery Network (CDN). Using a CDN is often easier for quick tests.

Here’s how to include a recent version of jQuery from a CDN:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <!-- Your HTML content here -->
    <h1 id="greeting">Hello World!</h1>

    <script>
        // Your jQuery code will go here
    </script>
</body>
</html>

jQuery Syntax Basics

The core of jQuery is the $ function, which is an alias for jQuery. It’s used to “select” HTML elements and then perform actions on them.

Selectors: jQuery uses CSS-style selectors to find HTML elements. For example, $("#myId") selects an element with id="myId", and $(".myClass") selects all elements with class="myClass".

Document Ready: To ensure your jQuery code runs only after the HTML document is fully loaded and parsed, you wrap it in a document ready handler:

$(document).ready(function() {
    // jQuery code that interacts with the DOM goes here
});

// Shorthand version (very common):
$(function() {
    // jQuery code here
});

Example: Changing HTML content and style

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function() {
            // Select the h1 element with id "greeting"
            // Change its HTML content
            $("#greeting").html("Hello jQuery!");

            // Change its CSS color
            $("#greeting").css("color", "blue");
        });
    </script>
</head>
<body>
    <h1 id="greeting">Hello World!</h1>
</body>
</html>

Chaining: jQuery allows “chaining,” where multiple actions can be performed on the same selection in a single statement:

$(function() {
    $("#greeting")
        .html("Hello Chained jQuery!")
        .css("color", "green")
        .fadeOut(1000)
        .fadeIn(1000);
});

jQuery vs. Modern Vanilla JavaScript

Modern JavaScript (ES6 and later) has adopted many features that make direct DOM manipulation easier, reducing the dependency on jQuery for new projects. Here’s a comparison of common tasks:

Why use Vanilla JS?

• No external dependency: Reduces page load time and potential points of failure.
• Better performance: Direct DOM manipulation is often faster.
• Standardized: Skills are transferable and align with modern web standards.

When might jQuery still be considered?

• Legacy projects: Many existing websites and applications use jQuery.
• Specific jQuery plugins: Some useful plugins might not have direct vanilla JS equivalents.
• Simplified AJAX: jQuery’s $.ajax, $.get, $.post methods were historically simpler than native XMLHttpRequest, though the modern fetch API largely addresses this.

For new projects, it’s generally recommended to start with vanilla JavaScript and modern frameworks/libraries unless there’s a compelling reason to include jQuery.

Further Learning

jQuery has a vast API covering event handling, effects and animations, AJAX interactions, and more. If you need to work with jQuery, the official documentation at api.jquery.com is an excellent resource.