jquery中哪些屬性應該用attr()訪問，哪些應該用prop()訪問？
阿新 • • 發佈：2018-12-09
首先說明下這兩個方法的區別：
1、attr()方法只有一個引數的時候返回的是屬性值，兩個引數是設定第一個引數的屬性值
2、prop()方法返回值是標準屬性(true或者false)，設定屬性時也是隻能設定true或者false
下面是在chrome瀏覽器的測試結果：
返回屬性：
<input type="checkbox" name="item" id="radio-item1" checked/>1 <input type="checkbox" name="item" id="radio-item2" checked="checked"/>2 <input type="checkbox" name="item" id="radio-item3" checked="true"/>3 <script src="jquery.min.js"></script> <script> var value1 = $("#radio-item1").attr("checked"); var value2 = $("#radio-item2").attr("checked"); var value3 = $("#radio-item3").attr("checked"); var value4 = $("#radio-item1").prop("checked"); var value5 = $("#radio-item2").prop("checked"); var value6 = $("#radio-item3").prop("checked"); console.log(value1); //checked console.log(value2); //checked console.log(value3); //checked console.log(value4); //true console.log(value5); //true console.log(value6); //true </script>
設定屬性：
<body> <input type="checkbox" name="item" id="radio-item1" />1 <input type="checkbox" name="item" id="radio-item2" />2 <input type="checkbox" name="item" id="radio-item3" />3 <input type="checkbox" name="item" id="radio-item4" />4 <input type="checkbox" name="item" id="radio-item5" />5 <input type="checkbox" name="item" id="radio-item6" />6 <script src="jquery.min.js"></script> <script> $("#radio-item1").attr("checked","checked"); $("#radio-item2").attr("checked","true"); $("#radio-item3").attr("checked",""); $("#radio-item4").prop("checked","checked"); $("#radio-item5").prop("checked","true"); $("#radio-item6").prop("checked",""); var value1 = $("#radio-item1").attr("checked"); var value2 = $("#radio-item2").attr("checked"); var value3 = $("#radio-item3").attr("checked"); var value4 = $("#radio-item4").prop("checked"); var value5 = $("#radio-item5").prop("checked"); var value6 = $("#radio-item6").prop("checked"); console.log(value1); //checked console.log(value2); //checked console.log(value3); //checked console.log(value4); //true console.log(value5); //true console.log(value6); //false </script> </body>
可以看到，在讀取屬性的時候，只要設定了checked屬性，prop()就能讀到為true。在設定屬性的時候，prop()設定的值非true即false，空字串即false。
prop方法有兩個原則：
第一原則：只新增屬性名稱該屬性就會生效應該使用prop()
比如disabled和checked在一些瀏覽器中只要寫上其屬性名就可以，像這樣 <input type="radio" checked />。注意有 的瀏覽器要寫上checked = "checked"
第二原則：只存在true/false的屬性應該使用prop()
按照官方說法，如果設定checked和disabled這些屬性，就應該使用prop()方法，而不是attr()方法。