jQuery .attr() .prop() .data()区别及全选等问题
来源:互联网 发布:windows sleep 精度 编辑:程序博客网 时间:2024/05/24 05:05
<span node-type="title" id="selectedCardType" data-curCardTypeVal="$!cardType" style="*z-index:2">提示语</span>
昨天利用$("selectedCardType").data("curCardTypeVal")获取属性的时候,发现一直获取不到,后来调试的时候发现curCardTypeVal变成了curcardtypeval。
jQuery文档中,attr和prop的参数都是一样的,而这两个东西都被认为是属性,那么他们之间到底有什么区别呢?下面我们一起验证下。
attr与prop的真身
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。
到这里可能还有些模糊,下面我们来直接举个例子。
html代码
<input id="box" type="checkbox"/>js代码
$("#box").attr("checked") // undefined$("#box").prop("checked") // false
可以看到attr获取一个标签内没有的东西会得到undefined,而prop获取的是这个DOM对象的属性,因此checked为false。
我们继续看,加上checked属性后。
<input id="box" type="checkbox" checked/>$("#box").attr("checked") // checked$("#box").prop("checked") // true
这已经可以证明attr的局限性,它的作用范围只限于HTML标签内的属性。id,type等属性也属于对象属性,prop也可以操作,那么问题来了,自定义属性prop能否成功支持呢,我们也试试。
<input id="box" type="checkbox" checked data-New="自定义属性"/>$("#box").attr("<span style="font-family: Arial, Helvetica, sans-serif;">data-New</span><span style="font-family: Arial, Helvetica, sans-serif;">") // 自定义属性</span>$("#box").prop("data-New") // undefined
<pre code_snippet_id="1694340" snippet_file_name="blog_20160524_5_2835683" name="code" class="javascript">$("#box").data("new") // 自定义属性,注意此时属性必须全是小写。
可以看出来,prop不支持自定义属性,经过自己的亲手试验,应该已经明白了他们之间的区别了吧。
总结-使用经验
1.对标签内的属性使用attr来读取和设置。
2.对DOM对象固有的一些属性,使用prop获取和设置。
3.如果获取自定义属性, 也可以使用.data()
推荐看下 https://www.douban.com/note/350977456/
0 0
- jQuery .attr() .prop() .data()区别及全选等问题
- jQuery中attr()、prop()、data()用法及区别
- jQuery中attr()、prop()、data()用法及区别
- jQuery中attr()、prop()、data()用法及区别
- jQuery中attr()、prop()、data()用法及区别
- jQuery中attr()、prop()、data()用法及区别
- 就全选,不全选问题,attr与prop的区别
- jquery prop attr 区别
- JQUERY prop与attr区别
- Jquery attr与prop区别
- jquery attr和prop区别
- jquery attr() prop() 的区别
- jquery中attr和prop的区别+jquery实现全选全不选
- jQuery .attr() .prop() .data()用法详解
- .attr(),.prop()和.data()的区别
- jquery attr和prop的区别
- jquery中attr和prop的区别
- jQuery函数attr()和prop()的区别
- Tabbar的自定义
- 面试题 <丑数>(10)
- 【leetcode】String——Longest Valid Parentheses(32)
- oracle job 定时执行 存储过程
- java中String的基本操作
- jQuery .attr() .prop() .data()区别及全选等问题
- Xcode快捷键
- MFC Drag & Drop
- MyEclipse10使用JavaFX
- 如何利用VC编程环境添加打印机
- spring的两大核心技术之一:控制反转
- 在Activity中响应ListView内部按钮的点击事件的两种方法
- Toolbar
- HTTP与TCP/IP的区别