Explain jQuery methods with Example

jQuery methods provide a wide range of functionalities to manipulate the DOM, handle events, animate elements, and perform Ajax requests. Here are some commonly used jQuery methods with examples:

DOM Manipulation Methods

text(): Get or set the text content of selected elements.

// Get the text content
var content = $("#myElement").text();

// Set the text content
$("#myElement").text("New text content");

html(): Get or set the HTML content of selected elements.

// Get the HTML content
var content = $("#myElement").html();

// Set the HTML content
$("#myElement").html("<strong>New HTML content</strong>");

val(): Get or set the value of form elements.

// Get the value
var value = $("#myInput").val();

// Set the value
$("#myInput").val("New value");

attr(): Get or set the value of an attribute for the selected elements.

// Get the attribute value
var src = $("#myImage").attr("src");

// Set the attribute value
$("#myImage").attr("src", "new-image.jpg");

CSS Manipulation Methods

css(): Get or set the style properties of selected elements.

// Get the CSS property value
var color = $("#myElement").css("color");

// Set the CSS property value
$("#myElement").css("color", "blue");

addClass() and removeClass(): Add or remove one or more classes from the selected elements.

// Add a class
$("#myElement").addClass("newClass");

// Remove a class
$("#myElement").removeClass("oldClass");

Event Handling Methods

click(): Bind a function to the click event of selected elements.

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

on(): Attach an event handler function for one or more events to the selected elements.

$("#myElement").on("mouseenter", function() {
  $(this).css("background-color", "yellow");
});

$("#myElement").on("mouseleave", function() {
  $(this).css("background-color", "");
});

Animation Methods

hide() and show(): Hide or show the selected elements.

// Hide the element
$("#myElement").hide();

// Show the element
$("#myElement").show();

fadeIn() and fadeOut(): Fade in or fade out the selected elements.

// Fade in the element
$("#myElement").fadeIn();

// Fade out the element
$("#myElement").fadeOut();

slideDown() and slideUp(): Slide down or slide up the selected elements.

// Slide down the element
$("#myElement").slideDown();

// Slide up the element
$("#myElement").slideUp();

Ajax Methods

load(): Load data from the server and place the returned HTML into the selected element.
```
$("#myElement").load("content.html");
```

$.ajax(): Perform an asynchronous HTTP (Ajax) request.

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

Example Code

Here’s an example that demonstrates some of these methods:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Methods Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // Change text content
      $("#changeTextButton").click(function() {
        $("#textElement").text("New text content");
      });

      // Toggle visibility
      $("#toggleButton").click(function() {
        $("#toggleElement").toggle();
      });

      // Change CSS property
      $("#changeColorButton").click(function() {
        $("#colorElement").css("color", "blue");
      });

      // Handle mouseenter and mouseleave events
      $("#hoverElement").on("mouseenter", function() {
        $(this).css("background-color", "yellow");
      }).on("mouseleave", function() {
        $(this).css("background-color", "");
      });

      // Load external content
      $("#loadButton").click(function() {
        $("#contentElement").load("external-content.html");
      });
    });
  </script>
</head>
<body>
  <h1>jQuery Methods Example</h1>
  
  <div>
    <p id="textElement">Original text content</p>
    <button id="changeTextButton">Change Text</button>
  </div>

  <div>
    <p id="toggleElement">Toggle me</p>
    <button id="toggleButton">Toggle Visibility</button>
  </div>

  <div>
    <p id="colorElement">Change my color</p>
    <button id="changeColorButton">Change Color</button>
  </div>

  <div>
    <p id="hoverElement">Hover over me</p>
  </div>

  <div>
    <button id="loadButton">Load Content</button>
    <div id="contentElement"></div>
  </div>
</body>
</html>

This example includes various jQuery methods to manipulate text content, toggle visibility, change CSS properties, handle events, and load external content. The script runs when the document is ready and sets up event handlers for button clicks and mouse events.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us