attr 和 prop 的本质

最新推荐文章于 2024-07-31 11:41:46 发布

我带你们飞

最新推荐文章于 2024-07-31 11:41:46 发布

阅读量206

点赞数

分类专栏：教案文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_47619284/article/details/126612303

版权

教案专栏收录该内容

11 篇文章 1 订阅

订阅专栏

attr 和 prop 的本质
attr 是 attribute 的缩写,prop 是 property 的缩写，都有属性的意思，只不过 attr 是操作 html 文档节点属性，prop 是操作 js 对象属性. attr 在 js 中使用的是 setAttribute 和 getAttribute 而 prop 直接使用原生 js 的 element[value] 和 element[value]=key。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全选-全不选</title>
  <script src="./jQuery.min.js"></script>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  table,
  th,
  td {
    border: 1px solid black;
  }

  table {
    margin: 100px auto;
    border-left: none;
  }

  th,
  td {
    padding: 10px 30px;
    border-bottom: none;
    border-right: none;
    text-align: center;
    background-color: #f0f0f0;
  }

  th {
    border-top: none;
    background-color: rgb(6, 141, 208);
    color: #fff;
  }
</style>

<body>
  <table cellspacing="0" cellpadding="10px">
    <tr>
      <th>
        <input type="checkbox" id="checkAll">
      </th>
      <th>菜名</th>
      <th>厨师</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="notCheckAll">
      </td>
      <td>红烧肉</td>
      <td>田大厨</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="notCheckAll">
      </td>
      <td>西红柿炒鸡蛋</td>
      <td>田大厨</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="notCheckAll">
      </td>
      <td>油炸榴莲</td>
      <td>田大厨</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="notCheckAll">
      </td>
      <td>清蒸助教</td>
      <td>田大厨</td>
    </tr>
  </table>
</body>
<!-- jQuery版本 -->
<script>
  // $('#checkAll').click(function () {
  //   if ($('#checkAll').prop('checked') == true) {
  //     $('input').each(function () {
  //       $(this).prop('checked', true)
  //     })
  //   } else {
  //     $('input').each(function () {
  //       $(this).prop('checked', false)
  //     })
  //   }
  // })
  // var flag = 0;
  // $(".notCheckAll").click(function () {
  //   $(".notCheckAll").each(function () {
  //     if ($(this).prop('checked') == true) {
  //       flag++
  //     }
  //   })
  //   if (flag == $(".notCheckAll").length) {
  //     $('#checkAll').prop('checked', true)
  //   } else {
  //     $('#checkAll').prop('checked', false)
  //   }
  //   flag = 0
  // })
</script>
<!-- JS版本 -->
<script>
  var checkAll = document.getElementById('checkAll')
  var notCheckAll = document.getElementsByClassName('notCheckAll')
  checkAll.onclick = function () {
    // var notCheckAll = document.getElementsByClassName('notCheckAll')
    // console.log(this.getAttribute('checked'));
    // 如果没这个属性
    if (this.getAttribute('checked') == null) {
      this.setAttribute('checked', 'true')
      // 遍历，设置每一个复选框为true
      for (var i = 0; i < notCheckAll.length; i++) {
        notCheckAll[i].setAttribute('checked', 'true')
      }
    } else {
      // 否则就移除这个属性
      this.removeAttribute('checked')
      // 移除所有复选框的checked属性
      for (var i = 0; i < notCheckAll.length; i++) {
        console.log(notCheckAll[i]);
        notCheckAll[i].removeAttribute('checked')
      }
    }
  }
  // 计数
  var flag = 0;
  // 绑定点击事件
  for (var i = 0; i < notCheckAll.length; i++) {
    notCheckAll[i].onclick = function () {
      if (this.getAttribute('checked') == null) {
        this.setAttribute('checked', 'true')
      } else {
        this.removeAttribute('checked')
      }
      // 遍历，看看有几个选中了的
      for (let j = 0; j < notCheckAll.length; j++) {
        if (notCheckAll[j].getAttribute('checked') != null) {
          flag++
        }
      }
      // 只要有一个没选中就不全选
      if (flag == notCheckAll.length) {
        checkAll.setAttribute('checked', 'true')
      } else {
        checkAll.removeAttribute('checked')
      }
      flag = 0
    }
  }
</script>

</html>

比如 checkbox 这样的，有 true 和 false 这样的布尔值的元素属性，attributes 在页面加载的时候就被设置，并且一直保持初始值，而 properties 则存储着元素属性的当前值。
所以当我没有点击单选按钮的时候，它就是没被用户点击过的浏览器刚加载出来的初始状态，此时可以通过 attr 去设置并操控，当有用户点击的时候，当前按钮就不是初始状态，attr自然也就无法操控。