Introduction to jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. This powerful tool helps developers to create dynamic web applications efficiently.

Why Use jQuery?

• Simplified syntax for common JavaScript tasks.
• Cross-browser compatibility.
• Extensible with plugins.
• Open-source and well-documented.

Commonly Used jQuery APIs

1. $(document).ready()

The $(document).ready() function ensures that the DOM is fully loaded before any jQuery code executes.

 $(document).ready(function(){
    // Your code here
}); 

2. .hide() and .show()

The .hide() and .show() methods are used to hide and display HTML elements respectively.

 $("#myElement").hide(); $("#myElement").show(); 

3. .toggle()

The .toggle() method toggles the visibility of elements.

 $("#myElement").toggle(); 

4. .css()

The .css() method allows you to get or set the CSS properties of elements.

 $("#myElement").css("color", "red"); 

5. .attr()

The .attr() method is used to get or set the attributes of elements.

 var src = $("#myImage").attr("src"); $("#myImage").attr("alt", "An example image"); 

6. .append() and .prepend()

The .append() and .prepend() methods are used to insert content at the end or beginning of selected elements respectively.

 $("#myDiv").append("
Appended text
"); $("#myDiv").prepend("
Prepended text
"); 

7. .text() and .html()

The .text() and .html() methods are used to get or set the text and HTML content of elements respectively.

 $("#myElement").text("New text content"); $("#myElement").html("New HTML content"); 

8. .val()

The .val() method is used to get or set the value of form fields.

 var value = $("#myInput").val(); $("#myInput").val("New value"); 

9. .on()

The .on() method is used to attach event handlers to elements.

 $("#myButton").on("click", function(){
    alert("Button clicked!");
}); 

10. .ajax()

The .ajax() method is used for making asynchronous HTTP requests.

 $.ajax({
    url: "https://api.example.com/data",
    method: "GET",
    success: function(response) {
        console.log(response);
    }
}); 

Application Example with jQuery APIs

Below is an example that combines several jQuery APIs to create a dynamic web application that fetches and displays data from an API:

 $(document).ready(function(){
    $("#fetchDataButton").on("click", function(){
        $.ajax({
            url: "https://api.example.com/data",
            method: "GET",
            success: function(response) {
                $("#dataContainer").html("");
                $.each(response, function(index, item){
                    $("#dataContainer").append("<p>" + item.name + "</p>");
                });
            }
        });
    });
}); 

This jQuery application fetches data from a provided API when the button is clicked and dynamically updates the webpage with the retrieved information.

Hash: 127c8cf59f228bb01a218a6670ea5d02fc344087f2768806b20706c8bec8d77c