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

最新推荐文章于 2024-06-19 19:53:31 发布

行之所致

最新推荐文章于 2024-06-19 19:53:31 发布

阅读量241

点赞数

文章标签： html jquery

本文链接：https://blog.csdn.net/weixin_44811301/article/details/109396964

版权

attr()&prop()

prop() 和 attr() 之间的不同

prop() 和 attr() 可能返回不同的值。本实例演示了当用于返回复选框的 “checked” 状态时的不同。
prop() --> true
attr —> checked

在jQuery中，attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。

但不得不说的是，这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。

1、操作对象不同
很明显，attr和prop分别是单词attribute和property的缩写，并且它们均表示"属性"的意思。

不过，在jQuery中，attribute和property却是两个不同的概念。
attribute表示HTML文档节点的属性，HTML属性
property表示JS对象的属性。 DOM属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="custom-control custom-checkbox">
      <label for="custom-checkbox" class="custom-control-label">Checkbox</label>
      <input
        id="custom-checkbox"
        class="custom-control-input"
        type="checkbox"
      />
    </div>
    <script>
      /* checkbox本身也具有一种状态，不确定状态。就是indeterminate, 浏览器的默认样式为一条灰色的横杠 */
      /* 但是没有可用的HTML属性来指定它,所以我们通过js的方式动态给对象添加一个属性，就是DOM属性。让该横杠出现  */
      const customCheckbox = document.querySelector('.custom-control-input')
      customCheckbox.indeterminate = true
    </script>
  </body>
</html>

参考文档: https://v4.bootcss.com/docs/components/forms/?gridRadios=option1
自定义复选框还可以在通过JavaScript手动设置时使用:indeterminate pseudo类(没有可用的HTML属性来指定它)。
If you’re using jQuery, something like this should suffice:
$(’.your-checkbox’).prop(‘indeterminate’, true) prop方法就是添加dom属性的; attr方法添加html属性的