jQuery的attr()和prop()方法

最新推荐文章于 2022-05-14 13:53:08 发布

DimpleMe

最新推荐文章于 2022-05-14 13:53:08 发布

阅读量1.6k

点赞数

分类专栏：【Java-JavaEE】文章标签： Jquery attr prop

本文链接：https://blog.csdn.net/qq_32454537/article/details/80824900

版权

【Java-JavaEE】专栏收录该内容

37 篇文章 0 订阅

订阅专栏

前言

在jQuery中有许多的功能能够简化开发流程，jQuery是一个JavaScript的库，封装了许多方法，很多时候，你会发现，在实现某个功能的时候，会发现这个功能的实现可以使用多种方法。

本文主要是介绍jQuery设置属性的两个方法：attr（attributes）和prop（properties）。

官方介绍

我们知道有的浏览器在表单项中写disabled或者checked就可以了，但是有的浏览器需要写成disabled=”disabled”或者checked=”checked”才可以，比如用attr(“checked”)获取checkbox的checked属性时选中的时候可以取到值,值为”checked”但没选中获取值就是undefined。

jQuery1.6之后，使用prop来获取这些属性就能解决问题，使用统一的返回true或者false。

在jQuery的3.3.1中有以下说明，截图如下：

attr

QQ截图20180627093125

prop

QQ截图20180627093151

对比

对于以上，官方文档上说到：

对于prop：

获取在匹配的元素集中的第一个元素的属性值。
随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

对于attr：

设置或返回被选元素的属性值。

代码对比

<html>
<head>
    <meta charset="utf-8">
    <title>嘿咻</title>
    <meta charset="utf-8">
    <%--此处的库需要换成你自己的或者是cdn--%>
    <script src="jquery/jquery-3.3.1.js"></script>
</head>
<body>

c1:<input id="c1" name="checkbox" type="checkbox" checked="checked" /></br>
c2:<input id="c2" name="checkbox" type="checkbox" checked=true/></br>
c3:<input id="c3" name="checkbox" type="checkbox" checked=""/></br>
c4:<input id="c4" name="checkbox" type="checkbox" checked/></br>
c5:<input id="c5" name="checkbox" type="checkbox" /></br>
c6:<input id="c6" name="checkbox" type="checkbox" checked=false/></br>


<script>
    var a1=$("#c1").attr("checked");
    var a2=$("#c2").attr("checked");
    var a3=$("#c3").attr("checked");
    var a4=$("#c4").attr("checked");
    var a5=$("#c5").attr("checked");
    var a6=$("#c6").attr("checked");

    var p1=$("#c1").prop("checked");
    var p2=$("#c2").prop("checked");
    var p3=$("#c3").prop("checked");
    var p4=$("#c4").prop("checked");
    var p5=$("#c5").prop("checked");
    var p6=$("#c6").prop("checked");

    console.log("a1:"+a1);
    console.log("a2:"+a2);
    console.log("a3:"+a3);
    console.log("a4:"+a4);
    console.log("a5:"+a5);
    console.log("a6:"+a6);

    console.log("p1:"+p1);
    console.log("p2:"+p2);
    console.log("p3:"+p3);
    console.log("p4:"+p4);
    console.log("p5:"+p5);
    console.log("p6:"+p6);
</script>
</body>
</html>