Introduction to the use of jQuery's attr and prop_jquery

attribute and property

Both attribute and property can be translated as attributes. In order to show the difference, these two words are usually translated as attributes and characteristics.

Click Here

There are three nodes in the above HTML statement, namely Element "div", attribute "id", and Text "click here". Our most common attribute officially refers to the attribute type node. There is a special method for processing attributes in JavaScript. Function.getAttribute(name) / setAttribute(name,value). Of course, attributes are not just the ones we can see on HTML documents. We can customize attributes and add them to DOM nodes

Copy code The code is as follows:

123< /div> );
t.setAttribute('customizedAttr','customized');




This way the div can be modified to

Copy code

The code is as follows:

123

The attributes set through the setAttribute method will eventually be reflected in the attribute type node of the element

Property is a field of a DOM object. Like some objects we usually use, it contains many fields. These fields are properties. The value can be obtained or set in the same way as ordinary fields through "object.field".

It seems that attribute and property have nothing to do with each other, how come? . . Attribute and property are easily confused because many attribute nodes also have a corresponding property attribute. For example, the "id" attribute of the div above can also be obtained using t.id (in fact, most people obtain it this way). After changing the id through property, the id obtained with getAttibute is the updated id.

Copy code

The code is as follows:t.id='test1';console .log(t.getAttribute('id'));//test1

Similarly we can also customize the property

Copy code

The code is as follows:t.customizedProp='customized prop';

Difference

1. Regarding the build-in attribute, attribute and property share data. If the attribute is changed, it will affect the property, and vice versa. However, the custom attributes of the two are independent data. Even if the names are the same, they will not affect each other. , it looks like the picture below, but there is no distinction between IE6 and 7, and they still share custom attribute data

2. Not all attributes are consistent with the corresponding property names. For example, the class attribute of the attribute just used should be like this when using the property operation className

Copy code

The code is as follows:t.className='active2';

3. For a property whose value is true/false, similar to the checked attribute of input, etc., the value obtained by attribute is the literal value of the HTML document, and the property obtains the calculation result. The change of property does not affect the literal value of attribute, but the change of attribute Will always calculate property

Copy code

The code is as follows:

Copy code

The code is as follows:

var t=document.getElementById('test3');
        console.log(t.getAttribute('checked'));//null
        console.log(t.checked);//false;

        t.setAttribute('checked','checked');
        console.log(t.getAttribute('checked'));//checked
        console.log(t.checked);//true

        t.checked=false;
        console.log(t.getAttribute('checked'));//checked
        console.log(t.checked);//false

4. 对于一些和路径相关的属性，两者取得值也不尽相同，但是同样attribute取得是字面量，property取得是计算后的完整路径

复制代码 代码如下:

Click

复制代码 代码如下:

var t=document.getElementById('test4');
        console.log(t.getAttribute('href'));//#
        console.log(t.href);//file:///C:/Users/bsun/Desktop/ss/anonymous.html#

关于浏览器（IE）造成的兼容性问题可以看看IE 混淆了 DOM 对象属性（property）及 HTML 标签属性（attribute），造成了对 setAttribute、getAttribute 的不正确实现

attr和prop

相信看完上面内容，大家就明白为什么jQuery要添加prop方法了，在jQuery API中也有专门解释

Attributes VS. Properties

在一些特殊的情况下，attributes和properties的区别非常大。在jQuery1.6之前，.attr()方法在获取一些attributes的时候使用了property值，这样会导致一些不一致的行为。在jQuery1.6中，.prop()方法提供了一中明确的获取property值得方式，这样.attr()方法仅返回attributes。

比如，selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和defaultSelected应该使用.prop()方法获取/设置值。 在jQuery1.6之前这些不属于attribute的property需要用.attr()方法获取。这几个并没有相应的attibute，只有property。

关于布尔类型 attributes，比如一个这样的HTML标签，它在JavaScript中变量名为elem

复制代码 代码如下:

elem.checked	true (Boolean) Will change with checkbox state
$( elem ).prop( "checked" )	true (Boolean) Will change with checkbox state
elem.getAttribute( "checked" )	"checked" (String) Initial state of the checkbox; does not change
$( elem ).attr( "checked" ) (1.6)	"checked" (String) Initial state of the checkbox; does not change
$( elem ).attr( "checked" ) (1.6.1+)	"checked" (String) Will change with checkbox state
$( elem ).attr( "checked" ) (pre-1.6)	true (Boolean) Changed with checkbox state

According to W3C forms specification, the checked attribute is a Boolean value, which means that as long as the checked attribute is displayed in HTML, the corresponding property should be true, even if checked has no value, this The same applies to other Boolean properties.

However, the most important thing to remember about the checked property is that it is not the same as checked property. In fact, this attribute is consistent with the defaultChecked property, and should only be used to set the initial value of the checkbox. The checked attribute does not change with the status of the checkedbox, but the checked property does. Therefore, browser compatibility should be used to determine whether the checkebox is selected. Property

Copy code The code is as follows:

if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )

This also applies to other dynamic attributes like selected and value.

In versions before IE9, if the property is not deleted before the DOM element is removed, using the .prop() method to set the value of the DOM element property (except simple types: number, string, boolean) will cause memory Give way. In order to safely set the value of the DOM object and avoid memory leaks, you can use the .data() method.

Usage Scenarios

In fact, I understand what is said above. When should I use .attr() and when should I use .prop()? Popular pictures

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