`

jQuery中prop和attr的区别

jquery attr prop 
阅读更多

一直都以为jQuery中获取html标签属性就是用attr方法，今天碰巧看到一篇文章，才发现还有一个prop方法，就想着查一下两个方法有什么区别。 结果还真挖出来个坑。

先做个实验，把以下代码保存成html文件，跑一遍（写这篇博客时jQuery版本为1.9.1）

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin: 20px 0 0 }
  b { color: blue; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>

<script>
$("input").change(function() {
  var $input = $(this);
  $("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
              + ".prop('checked'): <b>" + $input.prop('checked') + "</b><br>"
              + ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
}).change();
</script>

</body>
</html>

这是jQuery官方文档的对prop方法做的一个例子，展示prop和attr的区别。先说结果：

JavaScript

1
2

attr('checked')    // 不管checkbox选中与否，始终返回'checked'，注意不是true和false
prop('checked')    // 根据checkbox的状态返回true或false

为什么会有这种结果？jQuery为什么要提供attr和prop两个类似的方法？这得从html说起。

html中的attribute和property

虽然在中文里这两个词差不多的意思，但html中对此的定义却有严格区别。先大致解释下：

  • attribute是html文本层面的，我们在写html时看到的 key=”value” 就是attribute。其值始终是html元素定义时的值，除非html文本改变。
  • property是dom层面的，可以理解成用原生JavaScript函数获取的dom对象的属性。并且会随着我们对dom树的操作而改变。 有的property是attribute在dom对象中的一种呈现。所以property和attribute有一定的交集。

看个例子：

HTML

1

<input type="checkbox" id="cb" class="cb" name="key" checked="checked"/>

这是一个checkbox，默认是勾选状态的。它的attribute有id，type，class，name和checked。这些attribute的值都不会改变。 即使取消了勾选状态，其checked属性也是”checked”

再看dom层面，id，type，name和checked都有同名的property。class这个attribute对应property的叫className。另外，作为一个dom元素，它还有nodeName这个property。 上面那个checkbox元素的dom对象可以通过JavaScript获取。你可以把property看成JavaScript里面dom对象的属性。

JavaScript

1
2
3
4
5

var el = document.getElementById('cb');
el.className   // "cb"        property的名称跟attribute的名称并不是完全对应的。
el.class       // undefined
el.nodeName    // "INPUT"     property也不一定就是attribute的照搬，它只跟dom有关
el.checked     // true        注意这里不是"checked"

明白了这些后，就不难理解jQuery的prop和attr方法的区别了。但事情还没完。

jQuery中的attr和prop

为了遵守html规范，jQuery对attribute和property分别提供了封装方法attr和prop。但因为prop是jQuery 1.6版本才引进的，而且jQuery 1.9之前的版本为了考虑老代码的兼容性问题， 对attr和prop的界限划得有点模糊。

还是拿上面那个checkbox举例子，看看jQuery中各版本的区别，先拿checked属性做个实验

JavaScript

1
2
3
4
5

$('.cb').prop("checked")    // true  会随着checkbox状态改变而改变
$('.cb').attr("checked")    // (pre-1.6) true  会随着checkbox状态而改变
                            // (1.6) "checked"  始终获取checkbox的初始状态，不会改变
                            // (1.6.1 - 1.8) "checked"  会随着checkbox状态改变而改变，这是出于对老代码的兼容性考虑
                            // (1.9.1) "checked"  始终获取checkbox的初始状态，跟1.6一样

然后看看其他属性，attr和prop获取的值是否有区别：

JavaScript

1
2
3

$('.cb').prop('name', "aaa")   // 这里不管用prop还是attr对实验结果都没有影响
$('.cb').prop('name')          // "aaa"  返回的是改变后的状态
$('.cb').attr('name')          // "aaa"  同上

可以看到这里并没有什么区别，为什么？因为attribute针对的是html文本改变，以上代码，改变name的时候，相应的html文本也产生了变化（用开发工具可以看到）。 所以这里attr和prop获取的都是改变后的值。

最后个人总结一下什么时候适合用什么方法：

  • 改变property就会改变html的，不管用prop还是attr都可以。大多数的property都属于此列，比如type，name，src。 你可以用JavaScript改变property后再用开发工具看看html是否产生了变化。
  • 改变property不会改变html的，适合用prop，或者jQuery针对该属性专门提供的方法 举个例子，文本框里的value属性，可以通过用户输入，或者用JavaScript改变，prop和val都可以获取正确的值，但优先推荐val。 这种情况attr返回的值就完全不对了。
  • 不属于attribute对应的property，适合用prop，比如nodeName。
  • 表示true/false含义的attribute，适合用prop，比如checked，disabled，方便做判断。

参考文档

http://darkbaby123.github.io/blog/2013/02/19/jquery-prop-and-attr/ 

分享到：
| 推荐几个HTML可视化编辑器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery中prop()方法和attr()方法的区别浅析

    在jQuery中，`attr()`和`prop()`方法都是用来处理元素的属性（attributes）和特性（properties），但它们之间存在一些关键的区别。了解这些差异对于编写高效、无误的JavaScript代码至关重要。 首先，属性...

    jquery中attr和prop的区别分析

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

    jQuery .prop()属性全选反选

    本文将深入探讨`.prop()`方法，特别是它在实现表格行全选与反选中的应用，同时还会涉及到`jquery.tableCheckbox.js`这个插件。 首先，`.prop()`方法是用来处理元素的属性（properties），如`checked`、`selected`或...

    jQuery学习之prop和attr的区别示例介绍

    但是，为了适应jQuery 1.6中对`.attr()`和`.prop()`方法的更新，一些在之前版本中通过`.attr()`方法设置的属性需要改用`.prop()`方法来处理，特别是在处理布尔值属性时。 例如，在jQuery 1.6中，使用`.attr()`方法...

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

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

    jQuery checkbox选中问题之prop与attr注意点分析

    本文将重点分析在火狐（Firefox）浏览器下，使用jQuery的prop和attr方法来设置checkbox选中状态的不同表现和解决方法。 首先，需要了解的是，在jQuery中，attr方法是用来获取或设置HTML属性的值，而prop方法则是...

    详谈jQuery中使用attr(), prop(), val()获取value的异同

    在jQuery中，`attr()`, `prop()`, 和 `val()` 都是用来获取或设置HTML元素属性的方法，但在处理特定属性如"value"时，它们之间存在微妙的差异。这篇文章将详细探讨这三种方法在获取input元素value值时的不同之处。 ...

    Jquery中attr与prop的区别详解

    在jQuery中，`attr`和`prop`是两个用于获取和设置HTML元素属性的方法，但它们之间存在着重要的区别。在高版本的jQuery中，引入`prop`方法是为了更精确地处理元素的特性，特别是那些与JavaScript行为密切相关的属性。...

    jQuery中 prop() attr()使用详解

    在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？关于它们两个的区别，这里谈谈我的心得，我的心得很简单：对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己...

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

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

    JS中attr和prop属性的区别以及优先选择示例介绍

    在JavaScript的jQuery库中，`attr`和`prop`都是用于获取或设置元素属性的方法，但它们之间存在一些重要的区别。这些方法的使用场景不同，理解它们的差异对于编写高效且正确的JavaScript代码至关重要。 首先，`attr`...

    关于jquery中attr()和prop()方法的区别

    在jQuery中，`attr()` 和 `prop()` 都是用来处理元素属性的方法，但它们之间存在重要的差异，这些差异主要体现在处理DOM元素的状态和属性值上。以下是对这两个方法的详细解释和对比： **attr() 方法** `attr()` ...

    关于jQuery中.attr()和.prop()的问题探讨

    这篇文章将探讨jQuery中的.attr()和.prop()方法，并解释它们之间主要的区别，特别是在处理Boolean值属性时的差异。 首先，.attr()方法是jQuery早期版本中用于获取和设置HTML元素属性的主要方法。它接受两个参数，第...

    jquery prop的使用介绍及与attr的区别

    在jQuery中，`prop()`和`attr()`方法都是用于处理元素的属性（attributes），但它们之间存在一些重要的差异。本文将详细介绍`prop()`的使用以及它与`attr()`的区别。 首先，`prop()`方法主要用于处理那些与DOM元素...

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

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

    详解jQuery中的prop()使用方法

    prop()定义和用法 prop() 方法设置或返回被选元素的属性和值。 当该方法用于返回属性值时，则返回第一个匹配元素的值。 当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。 注意：prop() 方法...

    jQuery中attr()和prop()在修改checked属性时的区别

    在jQuery中，`attr()`和`prop()`方法都是用来处理元素属性的，但在特定场景下，它们的行为有所不同，尤其是在处理像`checked`这样的布尔属性时。`checked`属性是HTML元素的一个特性，它用于表示复选框或单选按钮是否...

Magicbox
Global site tag (gtag.js) - Google Analytics