attr()和prop()的区别解析

attr()和prop()的区别

1、在jquery中attr()和prop()两种方法都可以获取和操作元素的节点属性和属性。attr操作元素的节点属性，prop操作元素的属性，但是两者在使用时也存在差别。
2、attr()方法操作节点属性，attr()可以传入字符串也可以传入对象。
- 传入一个字符串参数时表示获取元素对应的属性，例如：("div").attr("class");表示获取" role="presentation">("p").attr("class");表示获取("div").attr("class");表示获取(“p”)元素中的第一个p的class属性的值。
- 传入两个字符串参数时表示设置所有获取到的元素的对应的属性，例如：("div").attr("class"，"div1");表示将" role="presentation">("p").attr("class"，"p1");表示将("div").attr("class"，"div1");表示将(“p”)获取到的所有元素的class属性设置为p1。
- 传入对象时表示设置所获取到的元素的多个属性，例如：$(“p”).attr({“class”:”op”,”name”:”my”});表示将所获取到的所有的p的class设置为op，那么设置为my。
代码展示：

<script type="text/javascript" src="jquery core 1.12.4.js"></script>
<script type="text/javascript">
$(function(){
    // 传入一个参数时
    // var res=$("p").attr("class");
    // console.log(res);//返回的值是first，只获取第一个p的class

    // 传入两个参数时
    // var res=$("p").attr("class","third");
    // console.log(res);//返回被操作的元素和改变之后的属性jquery.fn.init(2) [p.third, p.third,

    // 传入的是对象时
    var res=$("p").attr({
        "class":"fifth",
        "name":"op"
    })//设置结果

    console.log(res);
})
</script>

 

 

2、prop()方法用于获取和设置元素的属性，它也可以传入一个参数、两个参数或者对象，与attr用法相似。
- 传入一个字符串参数时表示获取元素对应的属性，例如：("div").prop("class");表示获取" role="presentation">("p").prop("class");表示获取("div").prop("class");表示获取(“p”)元素中的第一个p的class属性的值。
- 传入两个字符串参数时表示设置所有获取到的元素的对应的属性，例如：("div").prop("class"，"div1");表示将" role="presentation">("p").prop("class"，"p1");表示将("div").prop("class"，"div1");表示将(“p”)获取到的所有元素的class属性设置为p1。
- 传入对象时表示设置所获取到的元素的多个属性，例如：$(“p”).prop({“class”:”op”,”name”:”my”});表示将所获取到的所有的p的class设置为op，那么设置为my。
代码展示：

<script type="text/javascript" src="jquery core 1.12.4.js"></script>
<script type="text/javascript">
$(function(){
    // 传入一个参数时
    var res=$("p").prop("class");
    console.log(res);//返回的值是first，只获取第一个p的class

    // 传入两个参数时
    // var res=$("p").prop("class","third");
    // console.log(res);//返回被操作的元素和改变之后的属性jquery.fn.init(2) [p.third, p.third,

    // 传入的是对象时
    // var res=$("p").prop({
    //  "class":"fifth",
    //  "id":"op"
    // })//设置结果

    // console.log(res);
})
</script>

 

 

3、attr和prop的差别
attr和prop一个设置节点属性一个用于设置属性，两者都可以获取元素的属性和节点属性，但是在获取某一些属性时两者返回的值是不同的，例如在获取checked、selected和disabled的值时存在差异。例如checked如果默认是没选中那么用attr获取到的是undefined，prop获取该属性的值获取到的就是false，如果是选中的状态那么attr获取到的值就是checked，prop获取到的是true。在用if语句判断属性的状态是prz喎?/kf/ware/vc/" target="_blank" class="keylink">vcl7nupy809pq08ojrgf0dhlp4lbuwum3s6gjpgjyic8+dqrktcd9mao6tbfpbnb1dlhqx6nermjpzqrotngh1tdxtmysyrghozwvcd4ncjxwcmugy2xhc3m9"brush:sql;"> <script type="text/javascript"> $(function(){ var res=$("input").attr("checked"); console.log(res);//返回undefined var res=$("input").prop("checked"); console.log(res);//返回false }) </script>

实例2：当input标签默认为选中状态时。

<script type="text/javascript" src="jquery core 1.12.4.js"></script>
<script type="text/javascript">
$(function(){
    var res=$("input").attr("checked");
    console.log(res);//返回checked
    var res=$("input").prop("checked");
    console.log(res);//返回true
})
</script>

在需要使用if判断时属性的值时用prop来取值。
4、补充知识：
1）、属性节点：在html标签中添加的属性就是属性节点，在的attributes属性中保持所有内容都是属性节点。
如何操作属性节点？
设置对象的属性节点：dom元素.setattribute（“属性名称”，“值”）；
获取对象的属性节点：dom元素.getattribute（“属性名称”）。
2）、属性：对象身上保存的变量。
如何操作属性？
设置对象的属性：对象.属性名称=值；对象[“属性名称”]=值；
获取对象的属性：对象[“属性名称”]；对象.属性名称。