js中attr和prop的区别
来源:互联网 发布:淘宝上精仿手表的店铺 编辑:程序博客网 时间:2024/05/22 10:38
prop是1.6.1新加的方法,attr和prop都是获取/设置属性的方法(attributes和properties),window或document中使用。attr()方法在jQuery1.6之前不能正常运行,因为window和document中不能有attributes。
源代码:
attr方法
最关键的两行代码:elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name ),很明显的看出来,使用的DOM的API setAttribute和getAttribute方法操作的属性元素节点。
prop方法代码(jQuery版本1.8.3)
最关键的两行代码:return ( elem[ name ] = value )和return elem[ name ],可理解成这样document.getElementById(el)[name] = value,这是转化成JS对象的一个属性。
例子:
<input type="checkbox" id="test" abc="111" />
$(function(){
el = $("#test");
console.log(el.attr("style")); //undefined
console.log(el.prop("style")); //CSSStyleDeclaration对象
console.log(document.getElementById("test").style); //CSSStyleDeclaration对象
});
el.attr(“style”)输出undefined,因为attr是获取的这个对象属性节点的值,很显然此时没有这个属性节点,自然输出undefined。
el.prop(“style”)输出CSSStyleDeclaration对象,对于一个DOM对象,是具有原生的style对象属性的,所以输出了style对象至于document.getElementById(“test”).style和上面那条一样。
接着看:
el.attr("abc","111")
console.log(el.attr("abc")); //111
console.log(el.prop("abc")); //undefined
首先用attr方法给这个对象添加abc节点属性,值为111,可以看到html的结构也变了。
el.attr(“abc”)输出结果为111,再正常不过了。
el.prop(“abc”)输出undefined,因为abc是在这个的属性节点中,所以通过prop是取不到的。
el.prop("abc", "222");
console.log(el.attr("abc")); //111
console.log(el.prop("abc")); //222
我们再用prop方法给这个对象设置了abc属性,值为222,可以看到html的结构是没有变化的。输出的结果就不解释了。
在遇到要获取或设置checked、selected、readonly和disabled等属性时,用prop方法显然更好,比如像下面这样:
<input type="checkbox" id="test" checked="checked" />
console.log(el.attr("checked")); //checked
console.log(el.prop("checked")); //true
console.log(el.attr("disabled")); //undefined
console.log(el.prop("disabled")); //false
显然,布尔值比字符串值让接下来的处理更合理。
PS一下,如果你有JS性能洁癖的话,显然prop的性能更高,因为attr需要访问DOM属性节点,访问DOM是最耗时的。这种情况适用于多选项全选和反选的情况。
有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked",但没选中获取值就是undefined。
jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
什么时候使用attr(),什么时候使用prop()?
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr()。
以上内容出自 http://jingyan.baidu.com/article/e75057f2a24a8eebc81a8959.html- js中attr和prop的区别
- js中prop和attr区别
- [JS]jQuery中attr和prop方法的区别
- js中attr和prop属性的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jQuery中prop和attr的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- 设备检测
- Android:Attempt to invoke virtual method 'int android.view.View
- XSLT 判断节点是否有子/父节点(转)
- qt5 支持高清屏幕
- DateTimePicker中自定义时间或日期显示格式
- js中attr和prop的区别
- TextInputLayout&TextInputEditText的使用
- Hadoop集群redhad离线安装Hive
- 快速学习AngularJs HTTP响应拦截器
- 三、装饰模式(Decorator Pattern)
- String和包装类传参的问题
- Android点击图标重新启动问题
- 【MySQL】利用binlog完成实时计算
- freemarker 输出表格0.0