attr()和prop()的区别

遇到的问题

在给复选框设置被选中时出现的情况,用prop()设置是没毛病,用attr()时只有一次效果,下面是代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./包/jquery-3.3.1.min.js"></script>
</head>

<body>
    <input type="checkbox" name="ipt1" value="prop1" />prop测试
    <input type="checkbox" name="ipt1" value="prop2" />prop测试
    <input type="button" id="btn1" value="prop全选" />
    <br> <br>
    <input type="checkbox" name="ipt2" value="attr1" />attr测试
    <input type="checkbox" name="ipt2" value="attr2" />attr测试
    <input type="button" id="btn2" value="attr全选" />
    <br>
    <script>
        点击prop全选,两个prop测试选框被选中,手动取消它们,再点击按钮,仍然有效
        $(function () {
            $("#btn1").click(function () {
                $("input[name='ipt1']").prop("checked", true);
            })
        });

        点击attr全选,两个attr测试选框被选中,手动取消它们,再点击按钮,无效
        $(function () {
            $("#btn2").click(function () {
                $("input[name='ipt2']").attr("checked", true);
            })
        });
    </script>

</body>

</html>

结果:prop()可以重复使用,attr()只有一次效果,审查元素:

审查.png

attr()对应html元素上多了checked="checked",这里就是不一样的地方。这里有的同学已经明白了,根据固有属性和自定义属性不同来确定用哪个:

对于HTML元素自带固有属性,用prop()
对于HTML元素自定义的DOM属性,用attr()

一个栗子:

 <a href="http://www.baidu.com" target="baidu" class="baidu">百度</a>

<a>元素的DOM属性有href,target,class,是本身就带有的属性,也是W3C标准里就包含有这几个属性,比如有的编辑器敲一个表单会带出一堆的固有属性,所以处理这些属性时,使用prop()

 <a href="#" id="box" action="go">GO</a>

这里后面一个action属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性,用attr()。如果使用prop()取值和设置属性值时,会返回undefined值。

last栗子:

<input id="chk1" type="checkbox" />chk1
<input id="chk2" type="checkbox" checked="checked" />chk2

var chk1 = $("#chk1").prop("checked");
console.log(chk1); --> false

var chk2 = $("#chk2").prop("checked");
console.log(chk2); --> true

checkbox,radio,select这样的元素,选中属性对应checked,selected,属于固有属性,用prop()方法去获得结果。

换成attr():

console.log(chk1); --> undefined
console.log(chk2); --> checked

干一行,爱一行,学到老,活到老~~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容