详解 JQuery 中的 attr() 和 prop()

亦凉 2022-05-14 02:20 192阅读 0赞

之前在对dom的属性进行操作都是使用 `attr()` 这个方法，在最近的项目中才了解 jq 在 **1.6** 版本新出的 `prop()` 方法。  
  只看手册对两者的定义，是令人有些懵逼的，因为两者的定义是真的很像：

*  `prop()`
    
     *  Get the value of a **`property`** for the first element in the set of matched elements or set one or more properties for every matched element.
 *  `attr()`
    
     *  Get the value of an **`attribute`** for the first element in the set of matched elements or set one or more attributes for every matched element.

好嘛，合着就差一个单词：`property | attribute`，在我看的那版中文手册，这两个单词都被翻为 **属性**。

这是让我体验了一把英文的博大精深吗？

### Attributes vs. Properties ###

> 这部分更多是对英文手册的一个翻译(哈哈可以这么说嘛？为我的渣英文水平捏把汗，还是来个[传送门][Link 1]吧)。

**在 jQuery 1.6 之前**，`attr()` 在搜索属性（`attributes`）的时候，有时候会把属性（`properties`）当做查找的结果，这会导致不同的结果。**从 jQuery 1.6开始**，`prop()` 提供一种可以显示返回 `property` 属性的方式，而 `attr()` 返回 `property` 属性。

> 来个例子把文档中的问题展示一下：

**版本：jQuery 1.2.1**

<body>
      <input id="checkbox" type="checkbox"/>
      <script src="http://code.jquery.com/jquery-1.2.1.min.js"></script>
      <script> $('#checkbox').attr({checked: 'skr', blue: 'skr'}); console.log($('#checkbox').attr('checked')); //true console.log($('#checkbox').attr('blue')); //skr </script>
    </body>

我们可以看到同样将 `checked`、`blue` 设为 skr，只有 `blue` 能正确读出来，而 `attr('checked')`，返回的是 true

这里的原因就是手册中说的 `attr()` 将 `property` 属性返回出来了

然后来说一说 `property` 和 `attribute` 中的区别

可以简单地说，**`property` 指的是 HTML 元素带有的固有属性(上例的 checked 属性)，`attribute` 指的是 HTML 元素中我们自定义的属性(上例的 blue 属性)**

### 运用 ###

其实运用也没什么好说的，列两个比较有意思的例子好了：

> 下面效果的版本是 **jQuery 2.1.1**

##### 例子1 #####

<body>
      <input class="box"/>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script> $('.box').prop({ disabled: 'www', checked: 'www', href: 'www' }); console.log($('.box').prop('disabled')) //true console.log($('.box').prop('checked')) //true console.log($('.box').prop('href')) //www console.log($('.box').attr('disabled')) //disabled console.log($('.box').attr('checked')) //undefined console.log($('.box').attr('href')) //undefined </script>
    </body>

下图是 chrome 浏览器下对上面例子的渲染（好像不同的浏览器会有差，有兴趣地可以再去试试看)

![这里写图片描述][70]

给 .box 的 disabled、checked、href 通过 `prop()` 设置为了 www，我们可以看到几个很有趣的点。

*  `prop()` 在对 **固有属性property** 设值时，会先进行一次类型的转换；
 *  `disabled`、`checked` 都转换为 `true` 后，只有 `disabled` 渲染出来；
 *  `attr()` 读到了这个渲染出来的值；

##### 例子2 #####

<body>
      <input class="box" type="radio"/>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script> $('.box').attr({ disabled: 'www', checked: 'www', href: 'www' }); console.log($('.box').prop('disabled')) //true console.log($('.box').prop('checked')) //true console.log($('.box').prop('href')) //undefined console.log($('.box').attr('disabled')) //disabled console.log($('.box').attr('checked')) //checked console.log($('.box').attr('href')) //www </script>
    </body>

是的，就是把例子1的 `prop()` 改为了 `attr()`

这是 chrome 中的渲染结果

![这里写图片描述][70 1]

同样几个有趣的点：

*  `prop()` 依旧读到了 `disabled`、`checked`，并且有类型转换，没有读到自定义属性 `href`；
 *  `attr()` 设置值时会直接将值渲染到 dom 节点的行内样式中；

##### 总结 #####

结合两个例子的有趣点，我们可以有些猜想：

*  attr() 好像和浏览器最后渲染出的 DOM 页面有关，不管属性是 `property` 还是 `attribute`，只要 DOM 页面有这个属性 attr() 就能读出来，
 *  prop() 能够稳定读到 property，不管是 prop() 还是 attr() 设置的属性

### 源码解读 ###

下面是一篇关于这两个函数源码的解读，有兴趣地也可以看看：

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

这里列出些上面那篇文章重点吧：

*  attr() 是使用 DOM 的 API `setAttribute()` 和 `getAttribute()` 方法操作的属性元素节点，从上面的例子可以得到印证；
 *  prop() 设置值的时候，可以理解为 `document.getElementById(el)[name] = value`，将值设置为 js 对象的一个属性；
 *  prop() 性能更高，因为 attr() 需要访问 DOM 属性节点，访问 DOM 是很耗时的；
 *  有的浏览器只要写 `disabled，checked` 就可以了，而有的需要写成 `disabled="disabled"，checked="checked"`，比如用 attr(“checked”) 获取 checkbox 的 checked 属性时选中的时候可以取到值,值为 “checked” 但没选中获取值就是undefined，现在统一用 prop() 统一返回 true 或 false。

下面是官方建议的 prop()、attr() 使用

<table> 
 <thead> 
  <tr> 
   <th>Attribute/Property</th> 
   <th>.attr()</th> 
   <th>.prop()</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>accesskey</td> 
   <td>√</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td>√</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>async</td> 
   <td>√</td> 
   <td>√</td> 
  </tr> 
  <tr> 
   <td>autofocus</td> 
   <td>√</td> 
   <td>√</td> 
  </tr> 
  <tr> 
   <td>checked</td> 
   <td>√</td> 
   <td>√</td> 
  </tr> 
  <tr> 
   <td>class</td> 
   <td>√</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>contenteditable</td> 
   <td>√</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>draggable</td> 
   <td>√</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>√</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>id</td> 
   <td>√</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td>√</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>location</td> 
   <td>√</td> 
   <td>√</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>√</td> 
   <td>√</td> 
  </tr> 
  <tr> 
   <td>readOnly</td> 
   <td>√</td> 
   <td>√</td> 
  </tr> 
  <tr> 
   <td>rel</td> 
   <td>√</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>selected</td> 
   <td>√</td> 
   <td>√</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td>√</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>tabindex</td> 
   <td>√</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>√</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>√</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>√</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: https://api.jquery.com/prop/
[70]: /images/20220514/a478b06f2b1b4d88a04fe6a430799841.png
[70 1]: /images/20220514/d9dd90416b6540349bb1ed798c3d1d7d.png
[JS_attr_prop]: https://www.jb51.net/article/51688.htm