jQuery中prop()和attr()方法的测试和总结

本文详细介绍了如何在jQuery环境下实现单选按钮和复选框的选择逻辑,包括使用prop()和attr()方法的对比与应用,以及不同jQuery版本对这些方法的影响。

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

对应单选按钮和复选框的选中一般都是通过增加属性checked="checked"来使选中,但是在使用jquery时遇到了一些问题,自己做了一个测试,大家可以借鉴下。

期望的结果是,勾选男,点击勾选女,再点击勾选男,依次类推。

性别:<input name="sex" value="男" type="radio" checked/>男<input name="sex" value="女" type="radio" />女<br />
<input id="radioTestBtn" value="测试" type="button"/>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/lib/jquery/1.11.3/jquery.min.js"></script>

$(function(){
$("#radioTestBtn").click(function(){
// 如果勾选男,点击后勾选女;再点击勾选男
var selectedVal = $("input[name='sex']:checked").val();
if ('男' == selectedVal) {
//$("input[value='女']").prop("checked", true);
$("input[value='男']").removeAttr("checked");
$("input[value='女']").attr("checked", true);
} else {
//$("input[value='男']").prop("checked", true);
$("input[value='女']").removeAttr("checked");
$("input[value='男']").attr("checked", true);
}
});
});

一、jQuery 1.11.3

1、prop方法

js/lib/jquery/1.11.3/jquery.min.js

使用prop()方法ok,需要勾选男时,不用去勾选女。这点考虑到单选按钮组只有一个被选中,勾选一个,其他的都去勾选的原理。

prop()  value设置不同的值譬如

$("input[value='男']").prop("checked", "abcde");

$("input[value='男']").prop("checked", "1234");

$("input[value='男']").prop("checked", "false");效果跟$("input[value='男']").prop("checked", true);是一样的,都会被选中。不过写代码时还是建议$("input[value='男']").prop("checked", true);

2、attr方法

第一次点击发现女单选按钮增加了checked="checked"

<input name="sex" value="女" type="radio" checked="checked"> 女,

再次点击按钮,男单选按钮由checked变成checked="checked"

<input name="sex" value="男" type="radio" checked="checked">男

后面再点击,男单选按钮一直被勾选,两个单选按钮都有checked="checked",也不对。


继续测试:

增加了移除checked属性$("input[value='男']").removeAttr("checked");

第一次点击是女单选按钮被选中,第二次点击两个单选按钮都没有被选中,后面点击效果一样,都是没被勾选。

测试把移除语句放到attr()方法前面,和上面结果是一样的。


二、换成<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.5.1.min.js"></script>

attr()方法就正常了。不管加不加移除$("input[value='男']").removeAttr("checked");都可以,不过我们代码中的checked会被移掉。即使加上放前放后都可以。

不加removeAttr()语句,checked不会被移除,但不影响结果。

prop()  Uncaught TypeError: $(...).prop is not a function 怀疑是1.6新加的。


参考:http://www.jb51.net/article/43303.htm

下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使用 

Attributes模块的变化是移除了attributes和properties之间模棱两可的东西,但是在jQuery社区中引起了一些混乱,因为在1.6之前的所有版本中都使用一个方法(.attr())来处理attributes和properties。但是老的.attr()方法有一些bug,很难维护。jQuery1.6.1对Attributes模块进行了更新,并且修复了几个bug。 

为了让jQuery1.6中的.attr()方法的变化被理解的清楚些,下面是一些使用.attr()的例子,虽然在jQuery之前的版本中能正常工作,但是现在必须使用.prop()方法代替: 
 
首先,window或document中使用.attr()方法在jQuery1.6中不能正常运行,因为window和document中不能有attributes。它们包含properties(比如:location或readyState),必须使用.prop()方法操作或简单地使用javascript原生的方法。在jQuery1.6.1中,window和document中使用.attr()将被自动转成使用.prop,而不是抛出一个错误。 

其次,checked,selected和前面提到的其它boolean attributes,因为这些attributes和其相应的properties之间的特殊关系而被特殊对待。基本上,一个attribute就是以下html中你看到的: 

<input type=”checkbox” checked=”checked”> 

boolean attributes,比如:checked,仅被设置成默认值或初始值。在一个checkbox的元素中,checked attributes在页面加载的时候就被设置,而不管checkbox元素是否被选中。 

properties就是浏览器用来记录当前值的东西。正常情况下,properties反映它们相应的attributes(如果存在的话)。但这并不是boolean attriubutes的情况。当用户点击一个checkbox元素或选中一个select元素的一个option时,boolean properties保持最新。但相应的boolean attributes是不一样的,正如上面所述,它们仅被浏览器用来保存初始值。


个人总结:使用几次的经验觉得使用prop()更靠谱,毕竟使用1.5.1版本的jquery是少数。

只是之前写的代码做了一个表格,标题有一个全选的复选框,每行有一个复选框,使用.attr()正常

换了一个jquery版本,发现不好用了,就自己写代码测试了一下。

<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、付费专栏及课程。

余额充值