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
fruitsarray and logs each fruit and its index.
- Iterates over the
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.
- Extracts the text content from each
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.
- Selects every second
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#containerelement.
- Finds all
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
#myDivelement and appends the clone to the<body>.
- Clones the
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
hrefattribute of<a>elements and retrieves its value.
- Sets the
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
highlightclass on#myElement. If the class is present, it will be removed; if not, it will be added.
- Toggles the
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.
- Fades in