attr()和prop()

最新推荐文章于 2025-04-09 09:41:33 发布

原创最新推荐文章于 2025-04-09 09:41:33 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

前端问题专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了jQuery中attr和prop方法的区别与应用。介绍了如何使用attr方法获取和设置HTML元素的属性值，以及使用prop方法处理DOM元素的布尔属性，如checkbox和radio的状态。通过示例代码展示了如何在实际项目中运用这两个方法，包括全选、反选和取消选项卡的功能实现。

相同点

都可以获取属性值

attr()            设置或返回所选元素的属性/值
attr(attrName)  返回第一个匹配元素的属性值
attr(attrName, attrValue)  为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})  为所有匹配元素设置多个属性值
removeAttr() 从每一个匹配的元素中删除一个属性

prop()  获取属性
removeProp()  移除属性

$('img').attr('src','图片地址')
$('img').attr({'src':'图片地址','title':'hh'})
$('img').removeAttr('title')

不同点

对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop

<input type="checkbox" id="i1" value="1">

$("#i1").attr("checked");  // undefined
$("#i1").prop("checked");  //未被选中 false


$(":checkedbox[value='1']").prop("checked",true);  //设置选中 
$("input[name='l1']").prop("checked",false);

选项卡（全选，反选，取消）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年纪</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <label>
                <input type="checkbox">
            </label>
        </td>
        <td>李四</td>
        <td>23</td>
    </tr>
    <tr>
        <td>
            <label>
                <input type="checkbox">
            </label>
        </td>
        <td>李五</td>
        <td>23</td>
    </tr>
    <tr>
        <td>
            <label>
                <input type="checkbox">
            </label>
        </td>
        <td>李四</td>
        <td>23</td>
    </tr>
    <tr>
        <td>
            <label>
                <input type="checkbox">
            </label>
        </td>
        <td>李五</td>
        <td>23</td>
    </tr>
    </tbody>
</table>
<input type="button" value="全选" id="b1">
<input type="button" value="反选" id="b2">
<input type="button" value="取消" id="b3">

<script src="jquery-3.4.1.min.js"></script>

<script>
    //全选
    $('#b1').click(function () {
        $box = $("input[type = 'checkbox']");
        console.log($box);
        $box.prop('checked', true);
    });

    //反选
    $('#b2').click(function () {
        //找到所有的checkbox，保存在$boxEle
        var $boxEle = $(':checkbox');
        //遍历checkbox，根据每一个元素的状态做操作
        for (var i; i < $boxEle.length; i++) {
            $tmp = $boxEle[i];
            //如果选中，设置为FALSE
            if ($tmp.prop('checked')) {
                $tmp.prop('checked', false);
            } else {
                $tmp.prop('checked', true);
            }
        }
    });

    //取消
    $('#b3').click(function () {
        $(':checkbox').prop('checked', false)
    });
</script>
</body>
</html>