Example of jQuery .attr() and .removeAttr() methods for operating element attributes_jquery

Today I will mainly share with you how to use jQuery's .attr() and .removeAttr() methods to read, add, modify, and delete the attributes of elements. In daily web page production, everyone has encountered how to dynamically obtain the attributes and attribute values ​​​​of an element, or dynamically modify the attribute value of a certain (certain) attribute of an element. Then jQuery allows us to easily read, add, change or delete any attribute in one (or more) elements. In jQuery we can use the following method to achieve this:

1 .attr( ): The .attr() method in jQuery allows you to easily read, add or modify the attributes of an element (refer to .attr() for details);
2 .removeAttr(): .removeAttr() in jQuery The method is mainly used to delete one (or more) attributes of an element (refer to .removeAttr() for details).

Let’s take a brief look at the syntax format of the two methods .attr() and .removeAttr():
.attr() method
.attr() method has two functions, the first One is to read the attribute value of the element, and the second is to modify the attribute value of the element

Syntax for reading attributes
.attr(attributeName);//attributeName is the attribute name of the element that needs to be obtained
The above returns the string "string". It is worth noting that the .attr() method only obtains the attribute value of the first matching element. If you need the attribute value of each individual element, you need to rely on jQuery. each() or .map() method to implement.

The syntax for setting attribute values ​​for elements
.attr(attributeName, value);//where attributeName is the attribute name that needs to be set for the element, and value is the corresponding element value
What is returned above is An object mainly used to set one or more properties for a specified element.

.removeAttr() method
.removeAttr(attributeName);//where attributeName is the attribute name to be removed

.removeAttr() method uses removeAttribute() in native javaScript ) function, but its advantage is that it can be directly accessed and called by jQuery objects.
Above we briefly learned about the syntax of the .attr() and .removeAttr() methods. Let’s take a look at their specific applications. First, let’s look at a simple html Demo:

This method is very convenient for making image flips, such as:
html:

Copy code The code is as follows:

js:

Copy code The code is as follows:

$("document"). ready(function(){
$(".img").hover(function(){
$(this).attr({
"src":"images/b.jpg",
"alt":"change the page"
})
},function(){
$(this).attr({
"src":"images/a.jpg" ,
"alt":"header"
});
});
});