jQuery is a popular JavaScript for creating dynamic web pages.
In this article, we’ll look at how to using jQuery in our web apps.
.attr()
The .attr() method lets us get or set an attribute for every matched element.
For example, if we have:
<p>Once there was a <em title="huge, gigantic">large</em> cat</p>
<div></div>
Then we can get the title attribute from the em element and put that in the div by writing:
const title = $("em").attr("title");
$("div").text(title);
We can also use it to set the title attribute:
const title = $("em").attr("title", "big");
Attribute Contains Prefix Selector [name|=”value”]
We can get elements by the attribute and name and value. | will get the value equal to the given string or the string followed by a hyphen.
For example, if we have:
<a href="example.html" hreflang="en">Some text</a>
Then we can get this element by writing:
$("a[hreflang|='en']").css("border", "3px dotted green");
hreflang is the attribute name and 'en' is the value.
Attribute Contains Selector [name*=”value”]
This selector selects elements that have specified attribute with a value having a given substring.
For example, if we have the following HTML:
<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">
Then we get all the inputs with the name attribute having the man substring as the value by writing:
$("input[name*='man']").val("has man");
Now the value of the first 3 input boxes are 'has man' .
Attribute Contains Word Selector [name~=”value”]
We can get the elements that have a specified attribute with a value containing the given word, delimited by spaces.
For example, if we have:
<input name="man-news">
<input name="milk man">
<input name="letterman2">
<input name="newmilk">
Then we can write:
$("input[name~='man']").val("has man");
to get the inputs with the name attribute with the word man in it separated by a space.
Only the 2nd input meets that condition, so has man will be in that input.
Attribute Ends With Selector [name$=”value”]
We can get elements that have the specified attribute with a value ending with the given string.
For example, if we have the following HTML:
<input name="newsletter">
<input name="milkman">
<input name="jobletter">
Then we use this selector by writing:
$("input[name$='letter']").val("a letter");
We get all the inputs with the name attribute with values ending with letter .
Then the first 2 inputs are filled with a letter by calling val .
Attribute Equals Selector [name=”value”]
We can get the elements with the attribute equal to a value with this selector.
For example, if we have the following HTML:
<div>
<label>
<input type="radio" name="newsletter" value="Hot Fuzz">
<span>name?</span>
</label>
</div>
<div>
<label>
<input type="radio" name="newsletter" value="Cold Fusion">
<span>value?</span>
</label>
</div>
<div>
<label>
<input type="radio" name="newsletter" value="Evil Plans">
<span>value?</span>
</label>
</div>
We get the span with the value set to Hot Fuzz and populate the name by text content by writing:
$("input[value='Hot Fuzz']").next().text("Hot Fuzz");
Now the first radio button should have the text Hot Fuzz beside it.
Attribute Not Equal Selector [name!=”value”]
We can use this selector to select an attribute that doesn’t equal to the given value.
For example, if we have the following HTML:
<div>
<label>
<input type="radio" name="newsletter" value="Hot Fuzz">
<span>name?</span>
</label>
</div>
<div>
<input type="radio" value="Cold Fusion">
<span>no name</span>
</div>
<div>
<label>
<input type="radio" name="newsletter" value="Evil Plans">
<span>value?</span>
</label>
</div>
Then we can get the radio button that doesn’t have name attribute set to newsletter and add text to the span beside it by writing:
$("input[name!='newsletter']").next().append("<b>; not newsletter</b>");
Now the second radio button has:
no name**; not newsletter**
beside the radio button.
Conclusion
We can get and set attributes with the attr method.
Also we can select elements given their attributes with various selectors.
