jQuery中attr()和prop()区别

Posted 2021-04-08 it奋斗网

两个方法都是操作属性的。

属性的分类:

• html属性: 放在页面标签中的属性

  
  <div id="aaa" class="bbb" index="a" aaa="well">
    
  </div>
  
  // 以上 id, class, index, aaa 都是html属性，不管是不是自定义的 (可以通过 attr操作)

• DOM属性: 可以通过javascript获取的

  
  <div id="aaa" class="bbb" index="a" aaa="well">
    
  </div>
  
  //以上属性 id, class(className) 可以通过js获取，是 DOM属性
  //index, aaa  js直接获取不了(说的是 '.' 的方式)  eg:  div.index 这时候获取的是undefined

• 以上两个分类，如果看不懂，可以先忽略

---

在说区别之前，先说下总结(反复读几遍，思考理解了):

1. 在设置和获取表单控件值的时候，使用 prop() , 不要使用 attr()

2. 在 jquery中,  props() 是操作 DOM属性的，attr() 是操作 HTML属性

3. 如果以上两条都很难记， 那么记住第三条， 优先使用 prop ，如果prop失效，使用 attr

• prop失效有一种情况，就是操作的是一个自定义属性

---

上面的文字太抽象了，直接看例子吧:

1. 第一个例子:

   
   <div id="box" a="1"></div>
   <script> 
     console.log($('#box').prop('a')); //undefined  操作不了自定义属性，所以是undefined
     console.log($('#box').attr('a')); //1   可以获取到
   </script>

2. 第二个例子:

   
   <div id="box" class="a b c"></div>
   <script> 
     console.log($('#box').prop('class')); //a b c , 可以获取
     console.log($('#box').attr('class')); //a b c , 可以获取
   
     //因为说过 prop 操作是 DOM属性，请看
     console.log($('#box').prop('className')); //a b c , 可以获取，因为在js中class就是写成className
     console.log($('#box').attr('className')); // undefined
   </script>

3. 第三个例子:

   
   <div id="box"></div>
   <script> 
     console.log($('#box').prop('style')); //可以获取，因为标签本来就存在style属性
     console.log($('#box').attr('style')); //undefined  因为在div标签上没有写明
   </script>

4. 第四个例子: (这点最重要，因为大家用jq都会时不时犯这个错误)

   
   <input type="checkbox" name="" id="check">
   <script> 
     console.log($('#check').prop('checked'));  //false
     console.log($('#check').attr('checked'));  //undefined
   </script>

   
   <input type="checkbox" name="" id="check" checked>
   <script> 
     console.log($('#check').prop('checked'));  //true
     console.log($('#check').attr('checked'));  //checked  这TM是什么鬼
   </script>

5. 大家典型的操作:

   
   <input type="checkbox">
   <input type="checkbox">
   <input type="checkbox">
   <input type="checkbox">
   <input type="checkbox">
   <input type="checkbox">
   <script>
     var bSign = true;
     document.onclick = function () {
       if (bSign) {
         $('input').attr('checked', true);
       } else {
         $('input').attr('checked', false);
       }
       bSign = !bSign;
     };
   
     // 程序无法按照你的预期执行切换操作，只生效一次，奇怪的很?，程序写错了么? 不是，是因为 attr有毛病
   </script>

   换成 prop:

   
   <input type="checkbox">
   <input type="checkbox">
   <input type="checkbox">
   <input type="checkbox">
   <input type="checkbox">
   <input type="checkbox">
   <script>
     var bSign = true;
     document.onclick = function () {
       if (bSign) {
         $('input').prop('checked',true);
       } else {
         $('input').prop('checked',false);
       }
       bSign = !bSign;
     };
   </script>

最后，最后在啰嗦下:

• 或许你可以这么记忆, 对html元素本身就存在的属性，使用prop操作

• 对于html元素本身不存在的，也就是自定义的， 使用 attr操作。

• 其实还是那句话，优先使用 prop，prop不行，就换成 attr。

---

最后问大家个问题(相信大家都能回答出来)？

这两个操作不同，那么底层封装是怎么回事? 也就是 attr用的js中的什么？prop用的js中的什么?
可以把这篇文章，分享给你们同事，搞java的，搞php的，纯原生js，可能一辈子不会遇见这个问题。除非用jquery。