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
});
尽管变量名相同的情况下，也不会受到影响。
jq的attr、prop和data区别的更多相关文章
- jq中attr（）和prop() 属性的区别
query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要 ...
- jquery中attr、prop、data
在高版本的jquery中获取标签的属性,可以使用attr().prop().data(),那么这些方法有什么区别呢? 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元 ...
- attr(),prop()二者区别和最佳实践
attr(),prop()二者区别和最佳实践 最近使用到attr()来获取自定义属性值,我印象中是有一个方法可以获取到自定义属性值,进而我又想到了另一个方法prop(). 查看了手册发现并没有对二者 ...
- jQuery中attr和prop方法的区别说明
jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check node=123 id=ck & ...
- jQuery中attr和prop方法的区别
jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...
- jquery之 css()方法。用法类似的有attr(),prop(),val()
[注]attr(),prop(),val()的用法结构和css()一致,可参考 css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值. 该函数属于jQuery对象(实例).如 ...
- 关于jQuery中attr(),prop()的使用
注意:什么时候使用attr(),什么时候使用prop()?1.添加属性名称该属性就会生效应该使用prop();2.是有true,false两个属性使用prop();3.其他则使用attr(); 以下是 ...
- jQuery中attr()、prop()、data()用法及区别
.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...
- jQuery attr() prop() data()用法及区别
.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...
随机推荐
- RocEDU.阅读.写作《乌合之众》（一）
序言 作者在序言里主要论述了时代演变的内在原因,表明对群体进行研究的重要性,阐述了研究群体行为特征时的研究方法,并概述了群体的发展过程. 造成文明变革的唯一重要变化,是影响到思想.观念和信仰的变化.目 ...
- java语言基本环境搭建
从放假开始,就开始路陆陆续续了解关于java语言的学习.首先从语言编辑环境就和以前学习的c语言会有些不同,对java语言的学习也有了很大很多新的认识. 首先从官网上下载jdk,按照娄老师给我们的操作提 ...
- Java Mail 邮件发送Demo
上周公司的项目要求开发邮件发送功能.自己在网上跟着教程边学边做了一下午,现在基本开发完成了.由于一个同事也想看下该怎么写,顺便学习下.所以我就写成了一遍教程,顺便巩固下邮件发送里面的内容. Demo ...
- 配置ssh秘钥登陆
环境2台linux服务器:node1 192.168.X.234 node2 192.168.X.242 演示用node1无密码登陆node ...
- 爬虫之动态HTML处理（Selenium与PhantomJS ）
Selenium Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,类型像我们玩游戏用的按键精灵,可以按指定的命令自动操作,不同是Selenium 可以直接运行在浏览器上, ...
- android的wifi程序随笔作业
不用说,做前最好新建一个wifiadmin类,用来装载你所有的wifi打开关闭,wifi配置,连接情况等等wifi操作,然后main类里做一些button连接listview显示wifi网络连接等东西 ...
- ubuntu16.04后续工作
一.ruijie https://blog.csdn.net/u012217085/article/details/24369335 https://blog.csdn.net/Lv_Victor/a ...
- tcp westwood源代码分析
/* * TCP Westwood+: end-to-end bandwidth estimation for TCP * * Angelo Dell'Aera: author of the firs ...
- PMP第一章：引论
项目是为创造独特的产品,服务或成果而进行的临时性的工作. 项目的临时性是指项目有明确的起点和终点. 项目旨在推动组织从一个状态(当前状态)转到另一个状态(将来状态),从而达成特定目标. 项目管理就是将 ...
- Elasticsearch Head 集群健康值：未连接
安装elasticsearch 6.0 x-pack后,登录9200端口需要用户和密码, 这样,在使用elasticsearch head时,就不能直接访问9100了. 按照官方文档的要求,http ...