jQuery attr()和prop()方法获取设置元素属性

最新推荐文章于 2023-07-07 16:55:54 发布

fengyehongWorld

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量243

点赞数

分类专栏： # JS 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/feyehong/article/details/125509207

版权

JS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

本文详细介绍了jQuery中prop()和attr()函数的用途和区别。prop()用于处理HTML元素的固有属性，如checked、selected和disabled，而attr()则用于处理自定义DOM属性。通过示例代码展示了如何获取和设置这些属性，并在实际场景中应用，如禁用文本输入框、获取checkbox状态等。

摘要由CSDN通过智能技术生成

prop()函数

获取和设置HTML元素本身就带有的固有属性时使用.
具有true和false两个属性的属性,如checked,selected或者disabled时使用.

attr()函数

获取设置我们自己自定义的DOM属性.
可以同时设置多个属性
可以有回调函数

具体使用案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr>
        <button id="btn1">获取checkbox的选中状态</button><br>
        <button id="btn2">解除checkbox的禁用状态</button><br>
        <button id="btn3">禁用文本输入框</button><br>
        <button id="btn4">添加自定义属性</button>
    <hr>
    <input type="text" name="user" id="ipt1" data-size="10">
    <hr>
    <input type="checkbox" name="state" id="ipt2" disabled>
</body>
</html>

$(function() {

    console.log($('#ipt1').prop('data-size'));  // undefined
    console.log($('#ipt1').attr('data-size'));  // 10
    console.log('--------------------------');

    console.log($('#ipt1').prop('id'));  // ipt1
    console.log($('#ipt1').attr('id'));  // ipt1
    console.log('--------------------------');

    console.log($('#ipt2').prop('disabled')); // true
});

$('#btn1').click(() => {
    console.log($('#ipt2').attr('checked'));  // undefined
    console.log($('#ipt2').prop('checked'));  // false
});

$('#btn2').click(() => {
    $('#ipt2').removeAttr('disabled');
});

$('#btn3').click(() => {
    /*
        这种方式也可以禁用
        $('#ipt1').attr('disabled', true);
    */ 
    $('#ipt1').prop('disabled', true);
});

$('#btn4').click(() => {

    // ⏹attr()可以添加自定义属性
    $('#ipt1').attr('jmw-address', '地球');

    // ⏹attr()可以添加多个自定义属性
    $('#ipt1').attr({
        'test1': '测试内容1',
        'test2': '测试内容2'
    });

    // ⏹attr()可以有回调函数对原数据进行处理
    $('#ipt1').attr("data-size", function(i, origValue) {
        return origValue + '回调函数中的内容';
    });

    // prop()无法添加自定义属性
    $('#ipt1').prop('jmw-age', 100);
});