attr()和prop的区别

最新推荐文章于 2022-06-13 09:48:50 发布

原创最新推荐文章于 2022-06-13 09:48:50 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js jquery html

html 同时被 3 个专栏收录

1 篇文章

订阅专栏

1 篇文章

订阅专栏

jquery

1 篇文章

订阅专栏

本文主要介绍了jQuery中attr()和prop()的区别。attr()用于获取或设置HTML文档节点的属性，prop()用于获取或设置JS对象的属性。对于checked、selected、disabled等具有true和false属性的属性，建议使用prop()，其他使用attr()。在jQuery 1.6及以后版本，获取和设置这些属性应使用prop()。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

版权声明：本文为博主（shixinbing）原创文章，转载请注明出处 https://blog.youkuaiyun.com/shixinbing/article/details/82143709

attr()和prop的区别

一、两者定义

1、attr() ：

获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。

*.attr( attributeName, value ) 给元素的某个属性设置值

*.attr(attributeName) 获取元素某个属性

2、prop() ：

获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。

*.prop( propertyName, value ) 给元素DOM对象的某个属性设置值

*.prop( properties ) 获取元素DOM对象的某个属性

两者都是获取元素的属性的值和设置元素的值，但两者获取的东西却有不同。

在jQuery中，attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性，property表示JS对象的属性

根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。

二、区别

先看一下如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>attr和prop区别</title>
    <script src="jquery.js"></script>
    <style type="text/css">
        .checkBox{

        }
    </style>

</head>
<body>
    <input id="check" type="checkbox" class="checkBox">
    <span>篮球</span>
</body>
</html>
<script>
    var check = $("#check");

    check.on('change', function () {
        var check_attr = check.attr("checked");
        var check_prop = check.prop("checked");
        
        console.log('check_attr=' + check_attr); // undefined
        console.log('check_prop=' + check_prop); // false
    });
</script>

执行结果：