jQuery.prop()、 jQuery.attr()、jQuery.data()方法的用法和区别


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <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就能够获取属性的值。

1
2
3
4
5
6
7
8
9
10
<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返回属性的值

1
2
3
4
5
6
7
8
9
10
11
<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加载的库是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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()方法

1
2
3
4
5
6
7
8
9
10
<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上面的数据都在一起，方便保存和使用。

1
2
3
4
5
6
 $(function(){
        $("div").data("aaa","bbb");
        $("div").attr("aaa","ccc");
        console.log($("div").data('aaa'));//bbb
        console.log($("div").attr('aaa'));//ccc
    });

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