jQuery属性选择器.attr()和.prop()两种方法
在判断表单单选框是否被选中时,通常会想到使用$('#checkbox').attr('checked')来判断,但在一些情况下,你会发现这种方法并不管用,得到的是undefined
。
原来jQuery在1.6版本以后对属性选择器做了一些调整,分为.attr()
和.prop()
两种方法。为的是区分元素attributes和properties之间模棱两可的东西。
那么它们之间有什么区别呢?
官方的解释是:
Attributes vs. Properties
The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.
其实也就是对DOM元素中的特性(attribute)和属性(property)做了明确的区分。
所以判断checkbox是否被选中,正确的方法应该是:
$('#checkbox').prop('checked'); // jQuery 1.6+ $('#checkbox').attr('checked'); // 在 1.6.1 和 <=1.5 中使用,但不包括 1.6 的版本 $('#checkbox').is(':checked'); // 所有版本 $("#ck:checked").length==1; // 所有版本
网友的百度问答:
prop()获取匹配的元素的属性值。
这个方法是jquery1.6以后出来的,用来区别之前的.attr()方法.
区别最大的一点就是:布尔型的属性,1.6以后都是用.prop()方法就好了。
这个布尔型的属性,再解释一下,是属性值只有true|false的属性。
还有种情况就是只添加属性名,不需要写属性值的就可以生效的也同样使用.prop()方法。比如:checked、disable这样的,其实它们说到底还是属于布尔型的属性。
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();