jquery中的attributes和properties
2016-06-29 22:46
471 查看
attributes和properties之间的差异在特定情况下是很重要。jQuery 1.6之前 ,
attribute 的值时,会返回 property 的值,这就导致了结果的不一致。从 jQuery 1.6 开始,
方法返回 property 的值,而
例如,
和
例如,考虑一个DOM元素的HTML标记中定义的
根据W3C的表单规范 ,在
这意味着,如果这个属性(attribute)是目前存在, 即使,该属性没有对应的值,或者被设置为空字符串值,或甚至是"false",相应的属性(property)为true。 这才是真正的所有布尔属性(attributes)。
然而,要记住的最重要的概念是
跨浏览器兼容的方法来确定一个复选框是否被选中,是使用该属性(property):
对于其他的动态属性,同样是true,比如
.attr()方法在取某些
attribute 的值时,会返回 property 的值,这就导致了结果的不一致。从 jQuery 1.6 开始,
.prop()方法
方法返回 property 的值,而
.attr()方法返回 attributes 的值。
例如,
selectedIndex,
tagName,
nodeName,
nodeType,
ownerDocument,
defaultChecked,
和
defaultSelected应使用
.prop()方法进行取值或赋值。 在jQuery1.6之前,这些属性使用
.attr()方法取得,但是这并不是元素的
attr属性。他们没有相应的属性(attributes),只有特性(property)。
例如,考虑一个DOM元素的HTML标记中定义的
<input type="checkbox" checked="checked" />,并假设它是一个JavaScript变量命名的
elem:
elem.checked | true(Boolean) 将随着复选框状态的改变而改变 |
---|---|
$(elem).prop("checked") | true(Boolean) 将随着复选框状态的改变而改变 |
elem.getAttribute("checked") | "checked"(String) 复选框的初始状态;不会改变 |
$(elem).attr("checked")(1.6) | "checked"(String) 复选框的初始状态;不会改变 |
$(elem).attr("checked")(1.6.1+) | "checked"(String) 将随着复选框状态的改变而改变 |
$(elem).attr("checked")(pre-1.6) | true(Boolean) 将随着复选框状态的改变而改变 |
checked属性是一个布尔属性,
这意味着,如果这个属性(attribute)是目前存在, 即使,该属性没有对应的值,或者被设置为空字符串值,或甚至是"false",相应的属性(property)为true。 这才是真正的所有布尔属性(attributes)。
然而,要记住的最重要的概念是
checked特性(attribute)不是对应它
checked属性(property)。特性(attribute)实际对应的是
defaultChecked属性(property),而且仅用于设置复选框最初的值。
checked特性(attribute)值不会因为复选框的状态而改变,而
checked属性(property)会因为复选框的状态而改变。因此,
跨浏览器兼容的方法来确定一个复选框是否被选中,是使用该属性(property):
if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )
对于其他的动态属性,同样是true,比如
selected和
value
相关文章推荐
- Jquery 元素遍历,取值
- jquery.validate 设置验证信息的显示
- jquery $(window).height()获取的不是窗口的高度解决
- jquery.validate失去焦点时就验证
- JQuery解析XML数据
- jquery 获取checked选中的值
- 自定义jQuery插件Step by Step
- jQuery插件开发的两种方法及$.fn.extend的详解
- 浏览器pdf文件预览的相关问题
- jquery 的动画与特效
- jquery插入兄弟节点的操作
- Jquery的each遍历数据组成JSON
- jquery uploadify
- jQuery基础学习(5)(AJAX)
- Web jquery表格组件 JQGrid 的使用 - 11.问题研究
- Web jquery表格组件 JQGrid 的使用 - 全部代码
- Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据
- Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
- Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid
- jquery遍历json数组方法