How to manipulate element attributes in jQuery:
attr(): Read or write the attribute value of the matching element.
removeAttr(): Remove the specified attribute from the matched element.
attr() method read operation
attr() read operation. What is read is the specified attribute value of the first element in the matching element.
Format: .attr(attributeName), return value type: String. Reading a non-existent attribute will return undefined.
Note that the selection result of the selector may be a set, and here only the attribute value of the first element in the set is obtained.
Look at the example:
paragraph 1
paragraph 2
Running results: Pop-up box displays: title1.
If you want to obtain the attributes of each element separately, you need to use jQuery's loop structure, such as the .each() or .map() method.
The above example can be changed to:
You can get the attributes of each element separately.
attr() method write operation
attr() writing operation. Assign a value to one or more attributes of the matching element.
General format: .attr(attributeName, value), which is to set the value for the attribute.
Return value type: jQuery. It also supports chain method calls.
When performing a write operation, if the specified attribute name does not exist, an attribute with that name will be added, that is, a custom attribute will be added. Its name is attribute name and its value is value.
Writing attributes is performed to match each element in the collection, see example:
This is a paragraph.
This is another paragraph.
There are two other formats for write operations:
.attr(attributes) and .attr(attributeName, function).
The following are introduced separately.
.attr(attributes):
The attributes type here is PlainObject, which can be used to set multiple attributes at once.
What is PlainObject? A simple understanding is a sequence of key-value pairs surrounded by braces. You can refer to the link at the end of the question for instructions.
Keys and values are separated by colons (:), and each key-value pair is separated by commas (,).
Note: When setting multiple attribute values, the quotation marks of the attribute name are optional (may or may not be present). However, the class attribute is an exception and must be enclosed in quotation marks.
Example:
This is a paragraph.
This is another paragraph.
After clicking the two buttons, the element changes to:
Among them, hello in
上面的例子,对应的页面结果如下:
当使用一个方法来设定属性值的时候,如果这个set的function没有返回值,或者返回了undefined,当前的值是不会被改变的.
即操作会被忽略.
还是上面的例子,attr()其中的function返回undefined:
如下:
即没有进行任何修改操作,还是保持原来的属性值.
注意:jQuery不能修改和
removeAttr()方法
移除匹配元素集合中每一个元素的指定属性.
removeAttr()方法调用的是JavaScript的removeAttribute()方法,但是它能用jQuery对象直接调用,并且它考虑到并处理了各个浏览器上的属性名称可能不统一的问题.
例子: