jq的attr、prop和data区别

prop()获取在匹配的元素集中的第一个元素的属性值。

大家都知道有的浏览器只要写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();
项目中jquery升级的时候大家要注意这点！

PS一下，如果你有JS性能洁癖的话，显然prop的性能更高，因为attr需要访问DOM属性节点，访问DOM是最耗时的。这种情况适用于多选项全选和反选的情况。

以下是官方建议attr(),prop()的使用：

jQuery.prop()和 jQuery.attr()方法同样都能够添加属性，但是也是有区别的，一般attr()用的比较频繁，但是有些情况用prop()更为方便。
基本的使用：

    <style>.bg{width:200px; height:200px; background-color:red; } .bd{ border:1px solid #000; } </style> <body> <div></div> </body> <script> $(function(){ $("div").attr("class","bg");//样式加载成功 console.log($("div").attr('class'));//bg // $("div").prop("class",'bd');//这样会替代掉.bg console.log($("div").prop("class")); }); </script>

那么，什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();

如下实例，当checked没有在标签中定义的时候，prop就能够获取属性的值。

<body>
<input type="checkbox"> <lable>复选框</lable> </body> <script> $(function(){ console.log($("input").attr("checked"));//undefined attr是去标签中寻找该属性 console.log($("input").prop("checked"));//false prop直接获取属性内容 }); </script>

checked是true和false时，attr返回属性名，prop返回属性的值

<body>
<input type="checkbox" checked="true" aaa="bbb"> <lable>复选框</lable> </body> <script> $(function(){ console.log($("input").attr("checked"));//checked 是true和false时，attr返回属性名 console.log($("input").attr("aaa"));//bbb 不是true和false时，返回该属性的值 console.log($("input").prop("checked"));//false prop直接获取属性内容 }); </script>

以上例子看起来还是prop比较直接一点，可以考虑多用用。

补充：JavaScript的getAttribute和 jQuery.attr()的问题

首先看看JavaScript的getAttribute和 jQuery.attr()的差别，我写了两个例子，可以很明确的看出差别：
jQ加载的库是<script src="./js/jquery-1.7.2.js"></script>

<body>
<input type="text" value="1"> </body> <script> $(function(){ console.log($("input").val());//1 console.log($("input").attr("value"));//1 var timer = null; timer = setInterval(function(){ console.log($("input").val());//重新输入的值 console.log($("input").attr("value"));重新输入的值 },2000); }); </script>

<body>
<input id="amount" type="text" value="1"> </body> <script> document.addEventListener("DOMContentLoaded",function(){ var oV = document.getElementById("amount"); console.log(oV.value);//1 console.log(oV.getAttribute("value"));//1 setInterval(function(){ console.log(oV.value);//重新输入的值 console.log(oV.getAttribute("value"));//1 },2000); },false); </script>

以上两个例子中getAttribute不能够直接获取改变后的value值，只能获取初始值，而 jQuery.attr()可以；

下面看看jQuery.data()方法

<body>
<div></div> </body> <script> $(function(){ $("div").data("aaa","bbb"); console.log($("div").data('aaa'));//bbb console.log($("div").attr('aaa'));//undefined }); </script>

加在data上面的数据只有data能够取到，相当于所有的data上面的数据都在一起，方便保存和使用。

 $(function(){$("div").data("aaa","bbb"); $("div").attr("aaa","ccc"); console.log($("div").data('aaa'));//bbb console.log($("div").attr('aaa'));//ccc });

尽管变量名相同的情况下，也不会受到影响。

转载于:https://www.cnblogs.com/jcxfighting/p/8480470.html

jq的attr、prop和data区别相关推荐

【转】data和attr的用法与区别
attr()的用法 attr()获得属性值通过attr()获得属性时,可以这样$(selector).attr(attrName).注意,其返回值始终是string型! eg : 通过attr() ...
attribute attr prop 区别
attr 与 prop的区别是什么? 这篇微博解释的很清楚那么,什么时候使用attr(),什么时候使用prop()? *添加属性名称该属性就会生效应该使用prop(); *是有true,false两 ...
jQuery中attr和prop方法的区别
2019独角兽企业重金招聘Python工程师标准>>> 相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和proper ...
jQuery 中 attr() 和 prop() 方法的区别
为什么80%的码农都做不了架构师?>>> 具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他 ...
jquery attr()和prop()方法的区别
$('').attr()返回的是html对象 $('').prop()返回的是DOM对象 attr(): attr() 方法设置或返回被选元素的属性和值. 当该方法用于返回属性值,则返回第一个匹配元素 ...
DOM Node Element Attr 的联系与区别汇总
node有几个子类型:Element, Text, Attribute, RootElement, Comment, Namespace等 Element是可以有属性和子节点的node. ------ ...
c++ string c_str() 和data()区别
看下面的英文解释: const char* c_str ( ) const; Get C string equivalent Generates a null-terminated sequence ...
jQuery 属性操作attr().prop().text().html().val()
这些方法用于获取和设置 DOM 元素的属性. 一.attr():  <!--属性:在元素里面写的,用attr方法操作.--& ...
jQuery07源码 (3803 , 4299) attr() prop() val() addClass()等 : 对元素属性的操作
var nodeHook, boolHook,rclass = /[\t\r\n\f]/g,rreturn = /\r/g,rfocusable = /^(?:input|select|textare ...
attribute property --- jquery attr() prop()
看了http://www.cnblogs.com/aaronjs/p/3387906.html ,总结下: attribute: 特性直接写在标签上的属性,可以通过setAttribute.getA ...

jq的attr、prop和data区别

补充：JavaScript的getAttribute和 jQuery.attr()的问题

jq的attr、prop和data区别相关推荐

最新文章

热门文章