JS中属性和支柱属性的区别以及优先选择示例介绍

相比道具是1.6.1才新出来的，两者从中文意思理解，都是获取/设置属性的方法（属性和属性).只是，窗口或文件中使用attr()方法在jQuery1.6之前不能正常运行，因为窗户和文件中不能有属性。支柱应运而生了。

既然我们想知道他们两的区别，最好就看看他们的源代码，不要被代码长度所吓到，我们只看关键的几句：

attr:函数(elem，name，value，pass ) { var ret，hooks，notxml，TYPE=elem.nodeType//如果(!elem | | NYPE===3 | | NYPE===8 | | NYPE====2){ return；}如果(传递jQuery。IsFunction(jQuery。fn[name]){ return jQuery(elem)[name](值);} //当不支持属性时回退到道具if(elem。GetAttribute===' undefined '){返回jquery。道具(elem、名称、值)；} notxml=nType！==1 || !jquery。isxmldoc(elem)；//所有属性都是小写//如果定义了一个必要的挂钩if(notxml){ name=name。tolowercase()；hooks=jquery。attrhooks[name]| |(rbobbolino。测试(名称)？boolHook :节点钩子)；}如果(值！==未定义){ if(value===null){ jquery。removeattr(elem，name)；返回；} else if(挂钩不是XML中的钩子“设置”(ret=钩子。set(elem，value，name))！==未定义){ ret ret} else { elem.setAttribute(名称，值' ');返回值；} } else if(挂钩不是XML中的hooks‘get’(ret=hooks。get(elem，name))！==null){ ret ret；} else { ret=elem。GetAttribute(名称)；//不存在的属性返回null，我们归一化为未定义的返回ret===null？未定义的： ret} }道具方法代码(jQuery版本1.8.3)

prop:函数(elem，name，value ) { var ret，hooks，notxml，TYPE=elem.nodeType//不要获取/设置文本、注释和属性节点的属性，如果(!elem | | NYPE===3 | | NYPE===8 | | NYPE====2){ return；} notxml=nType！==1 || !jquery。isxmldoc(elem)；if (notxml ) { //修复名称和attach hooks name=jquery。profix[name]| | name；hooks=jquery。prop hooks[name]；}如果(值！==未定义){ if(钩子'设置'在钩子中(ret=钩子。set(elem，value，name))！==未定义){ ret ret} else { return(elem[name]=value)；} } else { if(hooks ' get ' in hooks(ret=hooks。get(elem，name))！==null){ ret ret；} else { return elem[name]；} } }attr方法里面，最关键的两行代码，elem.setAttribute(名称，值"" )和ret=elem.getAttribute(名称),很明显的看出来，使用的数字正射影像图的应用程序接口集合属性和getAttribute方法操作的属性元素节点。而支柱方法里面，最关键的两行代码，返回(elem[ name ]=值)和返回elem[姓名]，你可以理解成这样文件。getelementbyid(El)[name]=值，这是转化成射流研究…对象的一个属性。

既然明白了原理是这样，我们来看看一个例子：

输入类型='checkbox' id='test' abc='111' /

$(function(){ El=$(' # test '))；控制台。日志(El。attr(' style ')；//未定义的控制台。日志(El。道具(' style ')；//CSSStyleDeclaration对象控制台。日志(文档。getelementbyid(' test ').风格);//CSSStyleDeclaration对象});el.attr("风格")输出未定义，因为属性是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefinedel.prop("style ")输出CSSStyleDeclaration对象，对于一个数字正射影像图对象，是具有原生的风格对象属性的，所以输出了风格对象至于document.getElementById("测试")。风格和上面那条一样

接着看：

el.attr('abc '，' 111 ')控制台。日志(El。attr(' ABC ')；//111控制台。日志(El。道具(' ABC ')；//未定义首先用属性方法给这个对象添加字母表节点属性，值为111,可以看到超文本标记语言的结构也变了

El的输出结果。attr(“ABC”)是111，这是正常的。埃尔的输出。道具(“ABC”)未定义。因为ABC在这个的属性节点，所以不能通过prop获取。

el.prop('abc '，' 222 ')；console . log(El . attr(' ABC '))；//111 console . log(El . prop(' ABC '))；//222我们用prop方法为这个对象设置abc属性，值为222。我们可以看到html的结构并没有改变。输出的结果没有说明。

原理上面已经讲清楚了，什么时候用，用什么东西，你自己都可以掌握。

顺便说一句，在获取或设置选中、选中、只读和禁用属性时，使用prop方法显然更好，例如：

input type=' checkbox ' id=' test ' checked=' checked '/console . log(El . attr(' checked '))；//已检查console . log(El . prop(' checked '))；//true console . log(El . attr(' disabled '))；//未定义的console . log(El . prop(' disabled '))；//false

显然，布尔值使下一个处理比字符串值更合理。

PS，如果你有JS性能洁癖，很明显prop的性能更高，因为attr需要访问DOM属性节点，而访问DOM是最耗时的。这种情况适用于多选全选和反选。

大家都知道有些浏览器只需要写disabled和checked，而有些浏览器需要写disabled='disabled '和checked='checked '。例如，当attr('checked ')用于获取复选框的选中属性时，选中时可以获取值，值为' checked '，但未选中时获取的值未定义。

Jq提供了一种获取这些属性的新方法“prop”，就是为了解决这个问题。过去，当我们使用attr获取已检查的属性时，我们会返回“checked”和“”。现在，当我们使用prop获取属性时，我们返回true和false。

那么，什么时候使用attr()和prop()？1.添加属性名，属性就会生效。应该使用prop()。2.有两个属性，true和false，使用prop()；3.其他人使用attr()；大家在升级jquery的时候要注意这一点！

以下是使用attr()和prop()的官方建议：

以下是使用attr()和prop()的官方建议：