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区别的更多相关文章

  1. jq中attr（）和prop() 属性的区别

    query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要 ...

  2. jquery中attr、prop、data

    在高版本的jquery中获取标签的属性,可以使用attr().prop().data(),那么这些方法有什么区别呢? 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元 ...

  3. attr(),prop()二者区别和最佳实践

    attr(),prop()二者区别和最佳实践 最近使用到attr()来获取自定义属性值,我印象中是有一个方法可以获取到自定义属性值,进而我又想到了另一个方法prop().  查看了手册发现并没有对二者 ...

  4. jQuery中attr和prop方法的区别说明

    jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check  node=123 id=ck & ...

  5. jQuery中attr和prop方法的区别

    jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...

  6. jquery之 css()方法。用法类似的有attr(),prop(),val()

    [注]attr(),prop(),val()的用法结构和css()一致,可参考 css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值. 该函数属于jQuery对象(实例).如 ...

  7. 关于jQuery中attr(),prop()的使用

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

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

    .attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...

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

    .attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...

随机推荐

  1. Phred-scale quality scores的相关内容

    phred-scale quality score起源于人类基因组计划,最初是用来评估碱基质量分数,后来,被广泛的推广到基因领域的其他内容. phred-scalequality score表示这件事 ...

  2. linux挂载iso，u盘，分区，squashfs压缩文件

    常见分区加载方法: mount挂载iso文件: #mkdir /mnt/iso1 #mount –o loop linuxsetup.iso /mnt/iso1 在linux 不需要虚拟光驱,就可以直 ...

  3. 20145313Java第一次实验

    实验内容 1.JVM.JRE.JDK的安装位置与区别: 2.命令行运行javac:java:javac -cp; java -cp: 3.PATH,CLASSPATH,SOURCEPATH的设定方法与 ...

  4. Linux简单编程学习心得

    在Linux环境下简单编程学习心得 linux编程过程 在上周的<信息安全设计基础>的课程学习中学习到了在虚拟的linux环境下简单的编程.学习过程中接触到了vim.gcc和gcd在实验楼 ...

  5. 20145240《网络对抗》逆向及Bof基础实践

    逆向及Bof基础实践 1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包 ...

  6. 从零开始玩转JMX(二)——Condition

    Notification 一个MBean提供的管理接口允许代理对其管理资源进行控制和配置.然而,对管理复杂的分布式系统来说,这些接口知识提供了一部分功能.通常,管理应用程序需要对状态变化或者当特别情况 ...

  7. pagehelper的使用

    知识点:使用pagehelper实现分页功能 参考资料github上:https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wiki ...

  8. LeetCode——Find Largest Value in Each Tree Row

    Question You need to find the largest value in each row of a binary tree. Example: Input: 1 / \ 3 2 ...

  9. 【cs231n】卷积神经网络

    较好的讲解博客: 卷积神经网络基础 深度卷积模型 目标检测 人脸识别与神经风格迁移 译者注:本文翻译自斯坦福CS231n课程笔记ConvNet notes,由课程教师Andrej Karpathy授权 ...

  10. Python学习札记(十五) 高级特性1 切片

    参考: 高级特性 切片 Note 1.掌握了Python的基础语法之后,就可以写出很多很有用的程序了,比如打印1-90的奇数: #!/usr/bin/env python3 L = [] n = 1 ...