Detailed discussion on jQuery's manipulation of DOM element attributes attr() and removeAtrr() methods_jquery

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:

Copy code The code is as follows:

paragraph 1

paragraph 2

get title

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:

Copy code The code is as follows:

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:

Copy code The code is as follows:

This is a paragraph.

This is a div.

This is another paragraph.

This is another div.

After clicking the button, all p's are added with the attribute title="Hello World".

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:

Copy code The code is as follows:

This is a paragraph.

This is a div.

This is another paragraph.

This is another div.

After clicking the two buttons, the element changes to:

Among them, hello in

is a new custom attribute whose value is World.

.attr(attributeName, function(index, oldValue)):
Use a function to set the attribute value. The first parameter of the function is index, and the second parameter is the previous value of the attribute.
​Look at the example:

Copy code The code is as follows:

Zero-th

First

Second

　　上面的例子,对应的页面结果如下:

 
　　当使用一个方法来设定属性值的时候,如果这个set的function没有返回值,或者返回了undefined,当前的值是不会被改变的.
　　即操作会被忽略.
　　还是上面的例子,attr()其中的function返回undefined:
　　如下:

复制代码 代码如下:

 
　　返回的页面效果如下:

　　即没有进行任何修改操作,还是保持原来的属性值.
 
　　注意:jQuery不能修改和的type属性,如果修改会在浏览器报错.
　　这是因为IE浏览器中不能修改type属性.

removeAttr()方法

　　移除匹配元素集合中每一个元素的指定属性.
　　removeAttr()方法调用的是JavaScript的removeAttribute()方法,但是它能用jQuery对象直接调用,并且它考虑到并处理了各个浏览器上的属性名称可能不统一的问题.
　　例子:

复制代码 代码如下:

   
   

Zero

After clicking the button, the title attribute of

will be deleted.

Note: Using removeAttr() to remove onclick will not work on IE6-8. To avoid this problem, the .prop() method should be used.
For example:

Copy code The code is as follows:

$element.prop( "onclick", null );
console.log( "onclick property: ", $element[ 0 ].onclick );

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript Study Notes: Function Object_Basic KnowledgeNext article：JavaScript Study Notes: Function Object_Basic Knowledge

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills