What is the difference between prop and attr in jQuery

This article mainly introduces what is the difference between prop and attr in jQuery. It has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

In JQuery, the operation of CheckBox is divided into two phases, one is the previous version of JQuery1.6 and the other is the post-1.6version.

Before 1.6, we did this:

Var isChecked = $('# checkbox'). Attr ('checked'); $(' # checkbox'). Attr ('checked',true)

But careful students will find that if you do the same after jQuery1.6, there will be a problem: $('# checkbox'). Attr ('checked'); the values obtained are not true and false, but checked or undefined

So how do you do it after 1.6?

JQuery makes a more detailed distinction between attributes and features in later releases. What are features? Features like checked,selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected.

So what's the difference between prop () and attr ()?

In the build-in property, attribute and property share data, attribute changes will have an impact on property, and vice versa, but the two custom properties are independent data, even if name is the same, does not affect each other, looks like the following figure, but IE6, 7 do not make a distinction, still share custom attribute data

Not all attribute matches the corresponding property name, for example, the class property of attribute just used. When using property operation, it should be like this: className t.classNameplate operations active2'

For property whose value is true/false, similar to checked attribute of input, etc., the value obtained by attribute is the literal value of HTML document, and property is the result of calculation. The change of property does not affect the literal quantity of attribute, but the change of attribute will always be calculated by property.

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.checkedfalse; console.log (t.getAttribute ('checked')); / / checked console.log (t.checked); / / false

For some path-related attributes, the values obtained by the two are also different, but the same attribute acquisition is literal, and property acquisition is the calculated full path Click js var.

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

Thank you for reading this article carefully. I hope the article "what is the difference between prop and attr in jQuery" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!