attr()和prop的区别

本文主要介绍了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>

执行结果:

得到的结果

                     1)attr是undefined,无法获得checked的属性值

                     2 )prop是true,可以获得checked的属性

区别:js把html封装成dom元素,attr获得的是html的元素属性,而prop获得的是dom属性。

在jQuery中,

prop() 函数的设计目标是,用于设置或获取指定DOM元素(指的是JS对象,Element类型)上的属性(property);

attr() 函数的设计目标是,用于设置或获取指定DOM元素所对应的文档节点上(指HTML的元素,元素节点)的属性(attribute)

我们可以看到,不管我们怎么点击单选(checkbox),在html元素标签中并不会出现checked这个属性,但是我们可以在dom对象这个属性却会在改变。

 

通过在浏览器中调试可以看到:

通过在浏览器中选中要看的标签,在控制台中可以输入$0,打印出所选中的标签。console.dir($0)打印出所选元素的dom对象

从上图中我们可以看到在元素标签中没有checked=“checked”这个属性,但我们可以看到在dom对象中checked:true这个属性的。

而这个属性我们只能通过prop来获得。

 

jquery中attr和prop的区别介绍:

 •对于HTML元素本身就带有的固有属性,且可能在标签中并不会改变或显示的属性,在处理时,使用prop方法。

 •对于HTML元素我们自己自定义的DOM属性,在标签中会改变或显示的属性,在处理时,使用attr方法。

在jQuery 1.6及以后版本中,获取和设置disabled、selected、checked这些属性时,应该使用prop()方法,不要使用attr()方法!!能够用prop()操作的尽量用prop()操作,不要用attr()操作。

 

 

 

 

 

 

 

 

 

<think>我们正在讨论jQueryattr()prop()方法的区别。根据提供的引用材料,我们可以总结如下: 1. **历史背景**: - `attr()` 方法从jQuery 1.0开始就存在。 - `prop()` 方法是在jQuery 1.6版本中新增的。 2. **基本概念**: - `attr()` 主要用于操作HTML元素的**属性(attributes)**,这些属性是在HTML标签中定义的,例如:`<input type="checkbox" id="test" checked="checked">`中的`type`、`id`、`checked`都是属性。 - `prop()` 主要用于操作DOM元素的**属性(properties)**,这些属性是DOM对象在JavaScript中拥有的属性。 3. **区别**: - 在jQuery 1.6之前,`attr()`方法既用来获取属性(attributes)也用来获取属性(properties)。但在1.6版本之后,为了更清晰地区分,引入了`prop()`方法专门处理DOM属性(properties)。 - 对于某些属性(如`checked`, `selected`, `disabled`等),在jQuery 1.6之后,建议使用`prop()`方法,因为这些属性在DOM元素中表现为布尔值属性(boolean properties),而使用`attr()`可能会得到字符串(例如`"checked"`)或`undefined`,而`prop()`会返回布尔值(`true`或`false`)。 4. **使用建议**: - 对于HTML标签中存在的属性(如`id`, `class`, `style`, `src`等),使用`attr()`。 - 对于DOM元素的布尔值属性(如`checked`, `selected`, `disabled`等),使用`prop()`。 - 对于自定义的HTML属性(非标准属性),使用`attr()`,因为`prop()`可能无法访问。 5. **示例**: - 获取复选框的选中状态: ```javascript // 使用attr()在1.6之前可以,1.6之后不推荐 var isChecked1 = $(':checkbox').attr('checked'); // 返回"checked"或undefined // 使用prop()推荐 var isChecked2 = $(':checkbox').prop('checked'); // 返回true或false ``` - 设置复选框的选中状态: ```javascript // 使用attr() $(':checkbox').attr('checked', true); // 设置checked属性为字符串"checked" // 使用prop() $(':checkbox').prop('checked', true); // 设置DOM的checked属性为布尔值true ``` 6. **引用材料中的关键点**: - 引用[1]指出:在1.6及以后版本,可以根据需要选择使用`attr()`或`prop()`。 - 引用[2]指出:对于`window``document`对象,以及像`checked`这样的属性,应该使用`prop()`代替`attr()`。 - 引用[3]指出:`attr()`可以用于HTMLDOM属性,而`prop()`主要用于DOM属性。 - 引用[4]指出:在jQuery中,attributeproperty是两个不同的概念。 因此,总结如下: - 当操作的是HTML标签上定义的属性(attributes)时,使用`attr()`。 - 当操作的是DOM元素的属性(properties,尤其是布尔值属性)时,使用`prop()`。 这样可以避免在jQuery 1.6及以后版本中出现不一致的行为。 §§相关问题§§ 1. 在jQuery中,如何获取一个复选框的选中状态? 2. 为什么在jQuery 1.6之后,对于`checked`属性推荐使用`prop()`方法? 3. 如何用jQuery设置一个单选按钮(radio)为选中状态? 4. `attr()``prop()`在性能上有什么区别吗? 5. 自定义属性(如`data-*`)应该用`attr()`还是`prop()`访问?</think>### jQuery 中 `attr()` 与 `prop()` 方法的区别详解 在 jQuery 中,`attr()` `prop()` 都用于操作元素属性,但存在关键差异: #### 1. **核心概念区分** - **`attr()`** 操作 **HTML 属性**(定义在 HTML 标签中的属性) 例如:`<input type="checkbox" checked="checked">` 中的 `checked` 属性 返回值为 **字符串**(如 `"checked"` 或 `undefined`) - **`prop()`** 操作 **DOM 属性**(JavaScript 对象的内存属性) 例如:DOM 元素的 `checked` 属性(布尔值) 返回值为 **布尔值**(`true`/`false`)或 **原生数据类型** #### 2. **关键差异对比** | 特性 | `attr()` | `prop()` | |------|----------|----------| | **操作对象** | HTML 标签属性 | DOM 对象属性 | | **返回值类型** | 字符串 | 布尔值/原生类型 | | **适用版本** | jQuery 1.0+ | jQuery 1.6+ | | **动态更新** | ❌ 不随状态变化 | ✅ 实时反映状态 | | **布尔属性** | 返回字符串(如 `"checked"`) | 返回布尔值(`true`/`false`) | #### 3. **典型场景示例** ```javascript // 复选框示例 const $checkbox = $(":checkbox"); // 获取选中状态 $checkbox.attr("checked"); // 返回 "checked" (字符串) $checkbox.prop("checked"); // 返回 true (布尔值) // 设置选中状态 $checkbox.attr("checked", "checked"); // 添加 HTML 属性 $checkbox.prop("checked", true); // 修改 DOM 属性 // 禁用按钮 $("button").attr("disabled", "disabled"); // HTML 方式 $("button").prop("disabled", true); // DOM 方式 ``` #### 4. **使用原则** 1. **布尔属性优先用 `prop()`** `checked`, `selected`, `disabled`, `readonly` 等属性: ```javascript // ✅ 正确做法 if ($(":radio").prop("checked")) { ... } // ❌ 避免 if ($(":radio").attr("checked") === "checked") { ... } ``` 2. **标准 HTML 属性用 `attr()`** `id`, `class`, `src`, `href`, `title` 等: ```javascript // 获取图片路径 const src = $("img").attr("src"); // 添加 CSS 类 $("div").attr("class", "active"); ``` 3. **自定义属性用 `attr()`** `data-*` 等自定义属性: ```javascript // 设置 data-id $("li").attr("data-id", 1001); ``` #### 5. **性能与兼容性** - **性能**:`prop()` 直接操作 DOM 属性,通常比 `attr()` 更快 - **兼容性**: - jQuery 1.5 及之前:只支持 `attr()` - jQuery 1.6+:推荐布尔属性用 `prop()` - **特殊对象**:`window` `document` 的属性操作必须用 `prop()`: ```javascript // 获取视口宽度 $(window).prop("innerWidth"); // 获取文档标题 $(document).prop("title"); ``` #### 6. **为什么需要区分?** HTML 属性与 DOM 属性可能不同步: ```html <input type="checkbox" checked> <!-- 初始状态 --> ``` ```javascript $("input")[0].checked = false; // 通过 JS 修改状态 // 此时: attr("checked") // 仍返回 "checked" (HTML未变) prop("checked") // 返回 false (DOM状态更新) ``` > 总结:**操作布尔属性(`checked`/`selected`/`disabled`)或需要实时状态时用 `prop()`;操作标准 HTML 属性或自定义属性时用 `attr()`**。这是 jQuery 官方推荐的最佳实践[^1][^2][^3][^4]。 --- ### 相关问题 1. 如何用 jQuery 正确获取复选框的选中状态? 2. `data()` 方法与 `attr("data-*")` 有什么区别? 3. 为什么修改 `disabled` 属性时推荐用 `prop()`? 4. 在动态生成的元素上,`attr()` `prop()` 哪个更可靠? 5. 如何用原生 JavaScript 实现类似 `prop()` 的功能?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值