Home > Web Front-end > JS Tutorial > Detailed discussion on jQuery's manipulation of DOM element attributes attr() and removeAtrr() methods_jquery

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

WBOY
Release: 2016-05-16 16:18:25
Original
1184 people have browsed it

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







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不能修改

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template