jQuery Methods

jQuery Methods

Introduction: jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversal, event handling, and animation for building interactive web applications. It provides a wide range of methods that can be used to manipulate the DOM, handle events, make AJAX requests, and perform various other operations on web pages.

1. DOM Manipulation Methods

   • $(selector).html(content)

     • Description: Sets or retrieves the HTML content of an element.
     • Example:

       javascript
       $("p").html("Hello, World!");
       

   • $(selector).text(content)

     • Description: Sets or retrieves the text content of an element.
     • Example:

       javascript
       $("p").text("Hello, World!");
       

   • $(selector).addClass(className)

     • Description: Adds one or more CSS classes to the selected elements.
     • Example:

       javascript
       $("p").addClass("highlight");
       

   • $(selector).removeClass(className)

     • Description: Removes one or more CSS classes from the selected elements.
     • Example:

       javascript
       $("p").removeClass("highlight");
       

2. Event Handling Methods

   • $(selector).on(event, handler)

     • Description: Attaches an event handler function to the selected elements.
     • Example:

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

   • $(selector).off(event, handler)

     • Description: Removes an event handler function from the selected elements.
     • Example:

       javascript
       $("button").off("click", myFunction);
       

3. AJAX Methods

   • $.ajax(settings)
     • Description: Performs an asynchronous HTTP request.
     • Example:

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

4. Animation Methods

   • $(selector).hide(duration)

     • Description: Hides the selected elements with an optional animation.
     • Example:

       javascript
       $("p").hide(500);
       

   • $(selector).show(duration)

     • Description: Shows the selected elements with an optional animation.
     • Example:

       javascript
       $("p").show(500);
       

   • $(selector).fadeIn(duration)

     • Description: Fades in the selected elements.
     • Example:

       javascript
       $("p").fadeIn(500);
       

   • $(selector).fadeOut(duration)

     • Description: Fades out the selected elements.
     • Example:

       javascript
       $("p").fadeOut(500);
       

Conclusion: jQuery provides a comprehensive set of methods for DOM manipulation, event handling, AJAX requests, and animation. The examples provided above demonstrate how to use some of the key jQuery methods, but there are many more available. Refer to the official jQuery documentation for detailed information on each method and its parameters.