您现在的位置是:网站首页>博客详情博客详情

Jquery的attr()和prop()方法

边小丰2019年01月30日 前端知识 141人已围观


摘要: 在jQuery中有许多的功能能够简化开发流程,jQuery是一个JavaScript的库,封装了许多方法,很多时候,你会发现,在实现某个功能的时候,会发现这个功能的实现可以使用多种方法。 本文主要是介绍jQuery设置属性的两个方法:attr(attributes)和prop(properties)。


前言

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

本文主要是介绍jQuery设置属性的两个方法:attr(attributes)和prop(properties)。

官方介绍

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

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

在jQuery的3.3.1中有以下说明,截图如下:

attr


prop


对比

对于以上,官方文档上说到:

对于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>

结果如下:


可以看到使用attr去获取标签的固有属性的时候,返回的是undefined。而prop返回的是true或者false。

那么什么时候使用atrr什么时候使用prop呢:

总结如下:


添加属性名称就能够生效的时候使用prop,比如checked和selected

  • 具有true和false两个返回值的属性使用prop方法

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法

  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法


__EOF__

作  者Dimple
出  处/view/28
版权声明:署名 - 非商业性使用 - 禁止演绎,协议普通文本 | 协议法律文本
声援博主:如果您觉得文章对您有帮助,可以点击下方的鼓掌一下。您的鼓励是博主的最大动力!如有疑问请留言!


文章评论

我的名片

网名:Dimple | 裤兜有怪兽

职业:Java开发工程师

现居:四川省-成都市

Email:bianxiaofeng@sohu.com

每日一句

最近更新

点击排行

猜你喜欢