Attribute Value in jQuery
Inspired by CSS selectors, jQuery’s [attr=’value’] selector finds and manipulates HTML items by attribute value. This selector selects just objects with a given attribute and a value that matches yours.
Syntax:
The [attr=’value’] selector’s general syntax is as follows:
$('elementName[attributeName="attributeValue"]')To choose any element with the given attribute and value, you can also omit the elementName: $(‘[attributeName=”attributeValue”]’.
In this syntax:
- Target an HTML attribute like src, alt, class, id, or name using attributeName.
- AttributeValue: The exact value an element’s attributeName must contain to be picked. It requires single or double quote marks.
How it Works
To offer versatile and effective methods of accessing web page elements, jQuery’s selectors are expanded upon CSS selectors and supplemented with extra custom selectors. Sizzle, the selector engine that powers jQuery, parses the expression [attr=’value’] when you use it.
Here’s a breakdown of the process:
Parsing: Sizzle recognises [attr=’value’] as an attribute selector that requires a precise value match.
DOM Traversal: JQuery then navigates the web page’s DOM. The DOM, a tree-like structure, represents a network of HTML elements as nodes.
Matching: When traversing over an element, jQuery determines whether it has the given attributeName. It then determines whether the value that is assigned to that attribute in the HTML matches the attributeValue precisely.
Collection: A jQuery “collection” is a set or group of DOM items it has picked or is working with. How jQuery facilitates web development depends on this idea. The $() function returns a new jQuery object instance when used with a CSS selector, such as $(‘p’) to select all paragraph elements or $(‘#some-id’) to pick an element by ID.
Method Application: The application of any jQuery methods that are chained to this selection (such as.css(),.hide(), and.addClass()) to all of the elements in this selected set occurs after the jQuery object has been populated. This often replaces explicit iteration in for loops, which are used in simple JavaScript DOM manipulation.
Remember that this selection wants perfection. In jQuery, utilise [attr^=”value”], [attr$=”value”], and [attr*=”value”] to pick components with substrings in their attribute values.
Code Example:
To change elements with a specified alt attribute value, let’s show you how to utilise the [alt=”specific_value”] selector.
<!DOCTYPE html>
<html>
<head>
<title>jQuery [attr='value'] Selector - Small Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
img {
width: 150px;
height: 100px;
border: 2px solid gray;
margin: 10px;
}
.highlight-border {
border: 2px solid red;
}
</style>
<script>
$(document).ready(function(){
// Add red border to image with exact alt text
$('img[alt="Tree"]').addClass('highlight-border');
// Change background color if class is exactly "note"
$('p[class="note"]').css('background-color', 'yellow');
});
</script>
</head>
<body>
<h2>Image Gallery</h2>
<img src="https://via.placeholder.com/150x100?text=Tree" alt="Tree" />
<img src="https://via.placeholder.com/150x100?text=Lake" alt="Lake" />
<p class="note">This paragraph has class "note" and will be yellow.</p>
<p class="note extra">This paragraph has two classes and won't be affected.</p>
</body>
</html>Output:
Image Gallery
Tree Lake
This paragraph has class "note" and will be yellow.
This paragraph has two classes and won't be affected.Explanation of the Example:
When the DOM is prepared and the webpage loads in this example:
- “img[alt=”Nature Landscape”]”(‘highlight-border’); addClass
- The [alt=”value”] selector is used in this line to locate all img> elements with the alt property “Nature Landscape” exactly.
- After that, it gives these chosen photos the CSS class highlight-border. Their border will seem red as a result of this.
- // ‘img[alt=”Abstract Art”]’.’src’, ‘https://via.placeholder.com/150×100?text=NEW+IMAGE’ in attr;
- This chooses the “Abstract Art” alt attribute-set
element.
- The image is then dynamically replaced by changing its src property using the attr() method.
- This is $(‘.special-item[class=”special-item”]’).HTML(‘background-color’, ‘yellow’);
- This shows how to combine a class selector with the [class=”value”] selector. It targets elements whose class attribute contains special-item explicitly and exclusively, and that already have the class special-item.
- After then, their backdrop colour is changed to yellow. Because its class attribute value is not precisely “special-item,” the paragraph with class=”another-item special-item” is not picked. This demonstrates the [attr=’value’] selector’s accuracy.
With its ability to pick components based on specific attribute matches, the [attr=’value’] selector is essential for giving web page elements fine-grained control without requiring the use of more intricate JavaScript loops or conditional logic.