attr()和prop()的区别

最新推荐文章于 2022-06-13 09:48:50 发布

xiao姝姝

最新推荐文章于 2022-06-13 09:48:50 发布

阅读量566

点赞数 1

分类专栏： jQuery 文章标签： attr() prop()

本文链接：https://blog.csdn.net/qq_42988963/article/details/82633918

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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

    // 传入的是对象时
    var res=$("div").attr({
        "class":"fifth",
        "name":"odiv"
    })//设置结果<div class="fifth" name="odiv"></div>
    console.log(res);
})
</script>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>

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

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

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

    // 传入的是对象时
    // var res=$("div").prop({
    //  "class":"fifth",
    //  "id":"odiv"
    // })//设置结果<div class="fifth" name="odiv"></div>
    // console.log(res);
})
</script>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>

这里写图片描述
3、attr和prop的差别
attr和prop一个设置节点属性一个用于设置属性，两者都可以获取元素的属性和节点属性，但是在获取某一些属性时两者返回的值是不同的，例如在获取checked、selected和disabled的值时存在差异。例如checked如果默认是没选中那么用attr获取到的是undefined，prop获取该属性的值获取到的就是false，如果是选中的状态那么attr获取到的值就是checked，prop获取到的是true。在用if语句判断属性的状态是prop就更加有用，attr相对麻烦。
实例1：当input标签默认为未选中状态时。

<script type="text/javascript">
$(function(){
    var res=$("input").attr("checked");
    console.log(res);//返回undefined
    var res=$("input").prop("checked");
    console.log(res);//返回false
})
</script>
</head>
<body>
<input type="checkbox" name="">
</body>

实例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>
</head>
<body>
<input type="checkbox" checked="checked" name="">
</body>

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

xiao姝姝

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
attr()和prop()的区别

1、在jQuery中attr()和prop()两种方法都可以获取和操作元素的节点属性和属性。attr操作元素的节点属性，prop操作元素的属性，但是两者在使用时也存在差别。 2、attr()方法操作节点属性，attr()可以传入字符串也可以传入对象。 - 传入一个字符串参数时表示获取元素对应的属性，例如：("div").attr("class");表示获取("div").attr("clas...
复制链接

扫一扫