jQuery utilities and helpers


In jQuery, utilities and helpers refer to a set of built-in methods and functions designed to simplify common tasks and enhance the functionality of your JavaScript code. These utilities and helpers make it easier to work with data, manipulate DOM elements, handle events, and perform other routine operations.

Common jQuery Utilities and Helpers

1. .each()

The .each() method is used to iterate over a jQuery collection or an array, executing a function for each element.

Syntax:

$.each(arrayOrObject, function(index, value) { // Code to execute for each element });

Example:

var fruits = ["Apple", "Banana", "Cherry"]; $.each(fruits, function(index, value) { console.log(index + ": " + value); });
  • Explanation:
    • Iterates over the fruits array and logs each fruit and its index.

2. .map()

The .map() method creates a new jQuery object with the results of calling a provided function on every element in the original jQuery collection.

Syntax:

var newArray = $(selector).map(function(index, element) { // Return a new value for each element }).get();

Example:

var numbers = $("li").map(function() { return $(this).text(); }).get(); console.log(numbers);
  • Explanation:
    • Extracts the text content from each <li> element and stores it in an array.

3. .filter()

The .filter() method reduces the set of matched elements to those that match the selector or pass the function test.

Syntax:

var filteredElements = $(selector).filter(function(index) { // Return true to keep the element, false to remove it });

Example:

var evenNumbers = $("li").filter(function(index) { return (index + 1) % 2 === 0; }); evenNumbers.css("color", "red");
  • Explanation:
    • Selects every second <li> element and changes its color to red.

4. .find()

The .find() method searches through the descendants of each element in the set of matched elements and returns a new jQuery object containing the matched elements.

Syntax:

var descendants = $(selector).find("descendantSelector");

Example:

var items = $("#container").find("li");
  • Explanation:
    • Finds all <li> elements within the #container element.

5. .clone()

The .clone() method creates a deep copy of the set of matched elements.

Syntax:

var clonedElement = $(selector).clone([withDataAndEvents]);

Example:

var clonedDiv = $("#myDiv").clone(); $("body").append(clonedDiv);
  • Explanation:
    • Clones the #myDiv element and appends the clone to the <body>.

6. .data()

The .data() method is used to store and retrieve data associated with DOM elements.

Syntax:

$(element).data(key, value); // Set data var dataValue = $(element).data(key); // Get data

Example:

$("#myElement").data("role", "admin"); var role = $("#myElement").data("role"); console.log(role);
  • Explanation:
    • Stores the role data attribute and retrieves it later.

7. .attr()

The .attr() method is used to get or set the value of an attribute on the matched elements.

Syntax:

$(element).attr(attributeName, [value]); // Set attribute var value = $(element).attr(attributeName); // Get attribute

Example:

$("a").attr("href", "https://www.example.com"); var link = $("a").attr("href"); console.log(link);
  • Explanation:
    • Sets the href attribute of <a> elements and retrieves its value.

8. .toggleClass()

The .toggleClass() method adds or removes one or more classes from each element in the set of matched elements.

Syntax:

$(selector).toggleClass(className);

Example:

$("#myElement").toggleClass("highlight");
  • Explanation:
    • Toggles the highlight class on #myElement. If the class is present, it will be removed; if not, it will be added.

9. .delay()

The .delay() method is used to delay the execution of the next function in the queue.

Syntax:

$(selector).delay(duration);

Example:

$("#myElement").fadeIn().delay(1000).fadeOut();
  • Explanation:
    • Fades in #myElement, then waits for 1 second before fading out.