jquery的attr() 与prop()

最新推荐文章于 2025-04-18 09:36:44 发布

regid571500581

最新推荐文章于 2025-04-18 09:36:44 发布

阅读量182

点赞数

CC 4.0 BY-SA版权

分类专栏： web开发

本文链接：https://blog.youkuaiyun.com/regid571500581/article/details/78800614

web开发专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何利用jQuery中的prop()和attr()方法来操作HTML元素的属性，特别是对于radio、checkbox等表单元素的checked状态及自定义属性如subid的操作方式。

redio.checkbox 标签设置checked的时候，用prop（）
如果是自定义的属性：例如<input type="text" name="status" subid="2" />

获取属性值：
$(''input[name=""status]).attr('subid');

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

regid571500581

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

attr 与prop 的区别

linjun的博客

05-04

458

特别是当涉及到布尔属性（如 checked、disabled）时，因为它更准确、更可靠。是两个常用的方法，用于操作 HTML 元素的属性和属性值。则更适合于处理自定义属性或 HTML5 中的新属性。它们之间的区别主要在于针对不同类型的属性操作。在大多数情况下，应该优先使用。

Jquery中attr与prop的区别详解

10-19

在高版本的jQuery中，引入`prop`方法是为了更精确地处理元素的特性，特别是那些与JavaScript行为密切相关的属性。首先，`attr`主要用于处理HTML元素的特性（attributes），这些特性通常在HTML标签中定义，如`id`、...

参与评论您还未登录，请先登录后发表或查看评论

jQuery中attr与prop

m0_52228992的博客

05-14

954

attr与prop非常相似，均可访问元素的属性值和设置属性值，但prop多用于设置（访问）DOM属性，attr没有限制,HTML、DOM均可语法：获取属性值：元素.attr("属性") 或者元素.prop("属性") 设置属性值：元素.attr("属性","属性值") 或者元素.prop("属性","属性值") 设置获取属性时，需要注意的是，这里的属性必须能够直接在html标签内写出，类似（<img src"XXX" width="100px">），这里的width可以访问并设.

Jquery attr与prop区别

不是秃头的程序员小李

04-26

417

prop定义和用法 prop() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值时，则返回第一个匹配元素的值。当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaul

jquery attr与prop区别。

weixin_30492047的博客

06-29

177

attr返回值是字符串，而prop返回的是jQuery对象。区别一：attr可以查询自定义属性的值，prop则返回undefined 区别二对于input类型为单选框，复选框的checked属性返回值不同，attr为checked或者undefined prop为true或false。选择框select/option的属性selected：attr为selected或者undef...

jquery中attr和prop的区别

m0_47720236的博客

03-12

3431

一，获取属性的区别 ● attr() 操作标签上的属性 ● prop() 操作Boolean类型的属性和有特性(class id name)的属性 attr可以操作HTML标签中的属性，不管是固有属性，还是添加的自定义属性。都可以通过attr来设置。 prop同样可以操作HTML中的固有属性，但对于自定义属性便无能为力了下图可见对于标签的固有属性，建议用prop方法。如 id,class,width; 获取标签属性。对于标签的自定义属性，建议使用attr方法。二，获取属性值为boolean类型

Jquery中attr和prop的区别

极客神殿

07-17

1892

在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。上面的描述也许有点模糊，举几个例子就知道了。 ...

jQuery attr与prop属性的区别

tanqingfu1的博客

06-10

143

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 attr是对于自定义的属性操作取值与赋值；比如 date status等自定义的属性赋值 prop是对于HTML自带的属性进行操作取值赋值；比如 a标签自带的 href type登录属性赋值附上一张图片属性 ...

jQuery 对比 .attr() 和 .prop()

monian187的博客

04-18

808

jquery 获取和修改标签属性的 api .attr() 和 .prop() 对比。

jQuery的attr()与prop()的区别

zhuaaaa3944210的博客

04-27

181

jQuery的attr()与prop()的区别

前端提高篇(八十五)：jQuery的属性与特性，prop与attr

2401_84434442的博客

05-01

1091

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】总结来说，面试成功=基础知识+项目经验+表达技巧+运气。

jquery中attr、prop、data区别与用法分析

10-16

jQuery作为前端开发中非常重要的JavaScript库，其提供的attr、prop和data方法分别用于操作HTML元素的属性，理解它们的区别与用法对于前端开发人员来说非常重要。本文将结合实例详细分析这三个方法的差异、功能、使用...

jQuery的attr与prop使用介绍

10-26

jQuery1.6中新添加了一个prop方法，看起来和用起来都和attr方法一样，这两个方法有什么区别呢？这要从HTMl 的attribute与property区别说起，attr与prop正是这两个东西的缩写

jquery中attr和prop的区别分析

10-24

在jQuery中，`attr` 和 `prop` 是两个用于获取和设置HTML元素属性的方法，但它们之间存在着重要的差异。理解这两个方法的区别对于高效且准确地操作DOM至关重要。首先，`attr` 方法主要用于处理HTML元素的自定义...

基于shell的文件复制系统，北京理工大学计算机学院大三操作系统课程实验。.zip

最新发布

09-07

基于shell的文件复制系统，北京理工大学计算机学院大三操作系统课程实验。.zip

【微信小程序源码】天天快拍.zip

09-06

资源说明： 1：本资料仅用作交流学习参考，请切勿用于商业用途。 2：一套精品实用微信小程序源码资源，无论是入门练手还是项目复用都超实用，省去重复开发时间，让开发少走弯路！更多精品资源请访问 https://blog.youkuaiyun.com/ashyyyy/article/details/146464041

nuke id通道提取测试文件

09-06

nuke id通道提取测试文件

【微信小程序源码】云笔记.zip

09-06

基于Word2vec语义理解与个性化搜索增强的智能搜索引擎系统_使用Scrapy230框架高效爬取知乎问答数据并通过ElasticSearch791分布式存储与索引构建_结.zip

09-06

基于Word2vec语义理解与个性化搜索增强的智能搜索引擎系统_使用Scrapy230框架高效爬取知乎问答数据并通过ElasticSearch791分布式存储与索引构建_结.zip

jquery attr 和 prop方法的区别

07-16

<think>我们正在讨论jQuery中attr()和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()`可以用于HTML和DOM属性，而`prop()`主要用于DOM属性。 - 引用[4]指出：在jQuery中，attribute和property是两个不同的概念。因此，总结如下： - 当操作的是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()` 的功能？

jquery的attr() 与prop()

redio.checkbox 标签设置checked的时候，用prop（） 如果是自定义的属性：例如<input type="text" name="status" subid="2" />

获取属性值： $(''input[name=""status]).attr('subid');

redio.checkbox 标签设置checked的时候，用prop（）
如果是自定义的属性：例如<input type="text" name="status" subid="2" />

获取属性值：
$(''input[name=""status]).attr('subid');