Jquery中获取属性值的方法 attr()和prop()的用法和区别

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

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

1 ·

CC 4.0 BY-SA版权

本文详细介绍了jQuery中attr()和prop()方法的使用，包括如何获取和设置元素属性值，以及两者之间的区别。强调了对于不同类型的属性，应选择使用prop()还是attr()方法。

在工作动态获取元素的属性值或者替换该元素的原来的属性值（非常常见）

jQuery attr()方法来获取属性值

如：

 <a href="https://www.baidu.com" id='btn'>百度</a>


获取href的值
   
    $('#btn').on('click',function(){
        $(this).arrt('href')
    })

2.jQuery attr()方法来设置元素的属性值

如：

 <a href="https://www.baidu.com" id='btn'>百度</a>


获取href的值
   
    $('#btn').on('click',function(){
        $(this).arrt('href'，'https://www.google.com');
    })

jQuery 中prop（）方法的使用和attr（）方法一样

attr()的方法和prop()方法的区别

1.对于HTML 元素本身就带有的固有属性，在处理时，使用prop方法

2.对于HTML 元素我们自己定义的属性，使用attr方法

3.具有true和false两个属性，如checked，selected或者disable 使用 prop；

attr()函数的结果

1.如果该元素有对应的属性，返回指定的属性值

2.如果没有对应的属性，返回值是空字符串

prop()函数的结果

1.如果有相应的属性，返回指定的属性值。

2.如果没有相应的属性，返回值是undefined。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

让心在跳动

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

jquery获取自定义属性(attr和prop)实例介绍

10-27

在jQuery中，`attr()`和`prop()`方法都是用来处理HTML元素的属性，但它们有着不同的用法和适用场景。`attr()`主要用于处理标准的HTML属性，如`id`、`class`、`href`等，而`prop()`则更倾向于处理DOM元素的布尔属性或...

jquery 获取自定义属性(attr和prop)的实现代码

12-11

1. attr(属性名) //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ） 2. attr(属性名, 属性值) //设置属性的值 ...

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

关于Jquery获取和设置属性的两个方法prop()/attr()的区别。

weixin_30896825的博客

12-14

257

1、从 jQuery 1.6 开始新增了一个方法 prop()。因为在 jQuery 1.6 之前，使用 attr() 有时候会出现不一致的行为。 2、根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr() prop()函数的结果: 1.如果有相应的属性，返回指定属...

attr和prop的区别

weixin_42575028的博客

04-13

2043

attr 和 prop 的区别介绍：对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。实例 1： <a href="https://www.runoob.com" target="_self" class="btn">菜鸟教程</a> 这个例子里 <a&...

jquery中关于attr和prop的区别！

Java&Develop的博客

06-13

5834

昨天这两个方法搞混了,被公司大佬说了下，虽然没说什么，但还是挺尴尬的。重点是大佬说你可以用attr方法，我特么第一句话就是怎么用呢。原谅我使用vue之后太依赖框架的东西了，以至于以前jquery玩的也挺溜的我，慢慢淡忘了 jquery。罪过罪过呢！jquery还是一款很优秀的函数库，哎不说了继续码代码了。 $().attr() 允许我们往元素上加上自定义属性我们也可以用attr 获取提前定义好的在上面的自定义属性值 当然也可以获取到元素自带的一些属性那么 attr 是获取和设置属性的

js中attr和prop的区别

张不帅

09-09

421

HTML元素本身带有的固有属性，处理时用prop方法，快速，准确自定义的DOM属性，处理时使用attr方法

JQuery 常用方法和属性

昕颖一角

10-27

162

给jq 的$符号引用改为 $j 以便不与其他$符号冲突 var $j = jQuery.noConflict(); 查找 ID 为"myDiv"的元素。$("#myDiv"); 查找一个 DIV 元素。$("div"); 查找含有特殊字符的元素 <span id="foo:bar"></span> ---> ${"#foo\\

jQuery获取attr()与prop()属性值的方法及区别介绍

10-21

在jQuery中，`attr()` 和 `prop()` 都是用来获取或设置HTML元素属性的方法，但它们之间存在着重要的区别。在了解这些区别之前，先要理解HTML的attribute（特性）和property（属性）的概念。 Attribute是HTML标记...

jquery常用的方法属性

pmandy的专栏

07-28

154

jQuery获取Select选择的Text和 Value(转) 2010年07月16日星期五下午 02:08 jQuery获取Select选择的Text和Value:语法解释：1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发2. var checkText=$("#select_i...

jQuery 获取属性

奇妙的博客

08-16

180

获取属性的方法 jQuery attr() 方法用于获取属性值。可以获取id class values等属性 $(selector).attr("value") $(selector).attr("id") $(selector).attr("class") 获取属性实例 <!DOCTYPE html> <html> <he...

jquery当中获取某个属性值的方法

qq_44594371的博客

11-19

1275

例 1.6（attr.html） <html> <head> <title>attr(name)方法</title> <style type="text/css">  </style> <script language="javascript"...

JQuery一些常用选择器的属性和方法

To_Be_A_Better_Me的博客

01-02

362

JQuery一些常用选择器的属性和方法选择器实例选取 .class $(“.intro”) class=”intro” 的所有元素 .class,.class $(“.intro,.demo”) class 为 “intro” 或 “demo” 的所有元素 element $(“p”) 所有 < p > 元素 el1,el2,el3 $(“

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类型

$(this).attr $(this).val方法使用介绍

yue

02-26

5429

$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法 $(this).attr(key, value); 设置节点属性的值，相当于setAttribute(key,value)方法 eg: var diywidgetid = $('#w_1').attr('diywidgetid'); //获取节点属性的值 $(this).v

arrt用法

weixin_43343423的博客

08-17

817

var id = $(this).parents("tr").attr("data-id");

jquery $(this).attr $(this).val方法使用介绍

unity3d，unity3d教程下载

10-08

1133

$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法，本文整理了一些相关的示例，感兴趣的朋友可以参考下　　$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法　　$(this).attr(key, value); 设置节点属性的值，相当于setAttribute(key,value)

$(this).val()、this.id、$(this).attr(idCard)和复选框

最新发布

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()` 的功能？