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 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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

1 months ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

1 months ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

3 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7762

15

Java Tutorial

1644

14

CakePHP Tutorial

1399

52

Laravel Tutorial

1293

25

PHP Tutorial

1234

29

Show More