关于jQuery中的attr和data问题

今天在使用data获取属性并且赋值时遇到一个小问题,写下来防止以后再跳坑。

在使用jQuery获取自定义属性值时,我们习惯用

$(selector).attr(‘data-value‘);

jQuery赋值:

$(selector).attr(‘data-value‘,‘123456‘);

而data的取值:

$(selector).data(‘value‘);

data赋值:

$(selector).data(‘value‘,‘123456‘);

值得注意的是data,如果决定使用data就不要再使用attr,交叉混用是拿不出值的。因为data是单项绑定,返回的数据不会实时更新到dom。

如果真的需要更新dom上的自定义属性值,那只能把data取出的值放入attr中,感觉很麻烦不是吗?

另一个小坑,如果dom中赋值是一个字符串true,使用data取出的却是boolean true。

时间: 2024-08-26 01:01:24

关于jQuery中的attr和data问题的相关文章

Jquery 中 $('obj').attr('checked',true)失效的几种解决方案

1.$('obj').prop('checked',true) 2. $(':checkbox').each(function(){ this.checked=true; }) 为什么:attr为失效?因为checked属于为原型对象的属性.而attr在remove原型对象时会出错.原型对象指的是自身自带的,无法移除.prop会忽略这个错误.而attr操作的是普通非原型对象(可移除).js 的dom对象属性是可以随意增加的. Jquery 中 $('obj').attr('checked',tr

关于面试jquery中的 .attr() 和 .prop()的区别联系

目测很多人都不太清楚这个,我之前也是,知道这两个东西有点区别,但是却说不清楚,那么这里,我来详细的讲一下 大家都知道,html标签可以在 <> 尖括号里面直接写属性, 例如 <img src="fhc.jpg" alt="hello">, 那么在jquery中,要获取这个图片的地址该怎么做的呢 $('img').attr('src') 或者 $('img').prop('src') 都可以,好像没什么区别 但是有一点大家要注意, 在 html

jquery中的attr方法

1.根据参数个数不同,作用不同 attr 作用:获取或者设置属性结点的值 可以传递一个参数也可以传递两个参数 如果传递一个参数代表获取属性结点的值 如果传递两个参数代表设置属性结点的值 注意:如果是获取,无论找到多少个元素都只会返回第一个元素指定的属性结点的值 如果是设置,找到多少个元素就会设置多少个元素的值 如果是设置,设置的属性结点不存在,系统会自动新增 removeAttr 作用:删除属性结点 注意:会删除所有找到元素指定的属性结点 那么是否有跟attr()相似的属性呢?jquery中va

jquery中的attr()和prop()

jQuery1.6中新添加了一个prop方法,看起来和用起来都和attr方法一样,这两个方法有什么区别呢?这要从HTMl 的attribute与property区别说起,attr与prop正是这两个东西的缩写. attribute与property attribute和property都可以翻译为属性,为了以示区别,通常把这两个单词翻译为属性与特性. <div id="test">Click Here</div> 上面这段HTML语句中有三个节点,分别是Elem

从一个bug说jquery中的attr和prop

为了方便描述,将问题简化如下: 先上代码 <form> <input type="checkbox">iqiyi</input> <input type="checkbox" checked="checked">letv</input> </form> <button type>showStatus</button> <script> $(

jQuery中 prop() attr()使用详解

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法.  对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法.  对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也

JQuery中关于attr()、prop()两者之间的区别

attr:设置或返回被元素则值 prop:获取在匹配的元素集中的第一个元素的属性值. 区别: 1. prop 如果获取多个被选元素那么只返回第一个被选元素的值: 2.根据JQ源码(可自行查看),attr 是通过原生JS中setAttribute()方法设置或修改:prop则是通过document.getElementById(ele)[name]的方法设置或修改 所以,获取标签的属性,如若标签自带的属性则使用prop方法会来的快些,attr则比较适用于我们自己的设置的属性 原文地址:https:

jQuery中attr()、prop()、data()用法及区别

.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1.6引入,读/写DOM的property..data(),此方法在jq1.2.3引入,作用是把任意的值读取/存储到DOM元素对应的jq对象上. 从性能上对比,.prop() > .data() > .attr(),不同浏览器不同版本.data()和.attr()的性能关系有差异,不过.prop()

jQuery attr() prop() data()用法及区别

.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1.6引入,读/写DOM的property..data(),此方法在jq1.2.3引入,作用是把任意的值读取/存储到DOM元素对应的jq对象上.从性能上对比,.prop() > .data() > .attr(),不同浏览器不同版本.data()和.attr()的性能关系有差异,不过.prop()总