jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It simplifies HTML document traversal, event handling, animation, and AJAX interactions for rapid web development. It works seamlessly across various browsers, ensuring consistency and efficiency.

Simplified Syntax: Allows for easier interaction with the DOM.
Cross-Browser Compatibility: Handles browser inconsistencies.
Rich Features: Provides powerful effects and animations.
AJAX Support: Simplifies asynchronous HTTP requests.
Community Support: Extensive documentation and plugins are available.

Adding jQuery via CDN

To include jQuery via CDN (Content Delivery Network), you can add the following <script> tag inside the <head> or just before the closing </body> tag of your HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>Using jQuery from CDN</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
    <script>
        $(document).ready(function(){
            $("h1").css("color", "blue");
        });
    </script>
</body>
</html>

Adding jQuery Locally

To add jQuery locally, follow these steps:

Download jQuery: Visit the jQuery download page and download the compressed, production jQuery library.
Include jQuery in Your Project: Place the downloaded jQuery file in your project's directory (e.g., js/jquery.min.js).
Link the jQuery File in Your HTML: Add a <script> tag that points to the local jQuery file, similar to the example below:

<!DOCTYPE html>
<html>
<head>
    <title>Using jQuery Locally</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
    <script>
        $(document).ready(function(){
            $("h1").css("color", "blue");
        });
    </script>
</body>
</html>

Note: Using a CDN is generally recommended because it can result in faster loading times and better caching.

Sure! Here is the jQuery code only, with explanations in the notes:

1. Introduction to jQuery

Basic jQuery Syntax

<script>
    $(document).ready(function(){
        $("p").click(function(){
            $(this).hide();
        });
    });
</script>

Note: When the document is ready, clicking on a paragraph will hide it.

2. Selectors

Basic Selectors

<script>
    $(document).ready(function(){
        $("p").css("color", "blue");
    });
</script>

Note: Changes the color of all paragraphs to blue.

Attribute Selectors

<script>
    $(document).ready(function(){
        $("a[target='_blank']").css("color", "red");
    });
</script>

Note: Changes the color of links that open in a new tab to red.

Advanced Selectors

<script>
    $(document).ready(function(){
        $("p:first").css("color", "green");
    });
</script>

Note: Changes the color of the first paragraph to green.

3. Manipulating the DOM

Changing HTML Content

<script>
    $(document).ready(function(){
        $("p").html("New content!");
    });
</script>

Note: Changes the HTML content of all paragraphs to "New content!".

Changing CSS Properties

<script>
    $(document).ready(function(){
        $("p").css("color", "blue");
    });
</script>

Note: Changes the color of all paragraphs to blue.

Adding and Removing Elements

<script>
    $(document).ready(function(){
        $("body").append("<p>Appended paragraph.</p>");
    });
</script>

Note: Appends a new paragraph to the body of the document.

Traversing the DOM

<script>
    $(document).ready(function(){
        $("p").parent().css("background-color", "yellow");
    });
</script>

Note: Changes the background color of the parent element of all paragraphs to yellow.

4. Handling Events

Basic Event Handling

<script>
    $(document).ready(function(){
        $("p").click(function(){
            $(this).hide();
        });
    });
</script>

Note: Hides the paragraph that is clicked on.

Event Delegation

<script>
    $(document).ready(function(){
        $("body").on("click", "p", function(){
            $(this).hide();
        });
    });
</script>

Note: Hides any paragraph that is clicked on, even if it is added dynamically.

Custom Events

<script>
    $(document).ready(function(){
        $("#trigger").click(function(){
            $("p").trigger("custom");
        });
        $("p").on("custom", function(){
            $(this).css("color", "blue");
        });
    });
</script>

Note: Changes the color of paragraphs to blue when the custom event "custom" is triggered.

5. Animations and Effects

Show, Hide, Fade, Slide

Show and Hide:

<script>
    $(document).ready(function(){
        $("#show").click(function(){
            $("p").show();
        });
        $("#hide").click(function(){
            $("p").hide();
        });
    });
</script>

Note: Shows or hides paragraphs when respective buttons are clicked.

Fade In and Fade Out:

<script>
    $(document).ready(function(){
        $("#fadeIn").click(function(){
            $("p").fadeIn();
        });
        $("#fadeOut").click(function(){
            $("p").fadeOut();
        });
    });
</script>

Note: Fades in or out paragraphs when respective buttons are clicked.

Slide Up and Slide Down:

<script>
    $(document).ready(function(){
        $("#slideUp").click(function(){
            $("p").slideUp();
        });
        $("#slideDown").click(function(){
            $("p").slideDown();
        });
    });
</script>

Note: Slides up or down paragraphs when respective buttons are clicked.

Animate

<script>
    $(document).ready(function(){
        $("#animate").click(function(){
            $("div").animate({
                left: '250px',
                opacity: '0.5',
                height: 'toggle'
            });
        });
    });
</script>

Note: Animates the div by moving it to the left, changing its opacity, and toggling its height.

Stop

<script>
    $(document).ready(function(){
        $("#start").click(function(){
            $("div").animate({left: '250px'}, 5000);
        });
        $("#stop").click(function(){
            $("div").stop();
        });
    });
</script>

Note: Stops the current animation of the div.

6. Working with AJAX

Using jQuery's AJAX Methods

Using $.get():

<script>
    $(document).ready(function(){
        $("#btn").click(function(){
            $.get("demo_test.txt", function(data){
                $("#result").html(data);
            });
        });
    });
</script>

Note: Loads data from a server and places the returned data in the element with the id "result".

Handling JSON Data

<script>
    $(document).ready(function(){
        $("#btn").click(function(){
            $.getJSON("data.json", function(data){
                $("#result").html(data.name);
            });
        });
    });
</script>

Note: Loads JSON data from a server and places a property value in the element with the id "result".

7. Advanced Topics

Chaining

<script>
    $(document).ready(function(){
        $("p").css("color", "red").slideUp(2000).slideDown(2000);
    });
</script>

Note: Changes the color of paragraphs to red, then slides them up and down.

Callbacks

<script>
    $(document).ready(function(){
        function message(){
            alert("Animation complete!");
        }
        $("p").hide(1000, message);
    });
</script>

Note: Hides paragraphs and alerts a message when the animation is complete.

jQuery.noConflict()

<script>
    var $j = jQuery.noConflict();
    $j(document).ready(function(){
        $j("p").text("jQuery is working!");
    });
</script>

Note: Releases the $ shorthand for jQuery and uses $j instead.

Filters and Custom Selectors

<script>
    $(document).ready(function(){
        $("p:odd").css("background-color", "yellow");
    });
</script>

Note: Changes the background color of odd paragraphs to yellow.

Summary

jQuery is a versatile and user-friendly library that significantly simplifies JavaScript programming for web developers. Its cross-browser compatibility, powerful selectors, event handling, effects, and AJAX integration make it an essential tool for creating dynamic and interactive web pages. By understanding and practicing its features, developers can create efficient and visually appealing applications.

PreviousJavaScript NextAJAX Example with JSONPlaceholder

Last updated 1 year ago

hashtagAdding jQuery via CDN

hashtagAdding jQuery Locally

hashtag1. Introduction to jQuery

hashtag2. Selectors

hashtag3. Manipulating the DOM

hashtag4. Handling Events

hashtag5. Animations and Effects

hashtag6. Working with AJAX

hashtag7. Advanced Topics

hashtagSummary