淺談jquery中prop()和attr()
我們都知道,一般在jquery中設定屬性時要用到attr()
方法,現在我們有一個效果,點選按鈕切換複選框的選中狀態,下面貼出html
程式碼:
<input type="checkbox" id="check">
<label>複選框</label>
<input type="button" value="切換" id="btn">
js
程式碼:
<script>
$(function(){
var flag=false;
$("#btn").click(function (){
if(flag==false){
$("#check").attr("checked",true);
flag=true;
}else{
$("#check").removeAttr("checked");
flag=false;
}
});
});
</script>
我們發現當點選按鈕時,第一次點選時複選框會選中,第二次時點選複選框會取消選中,但以後再點選時複選框將不會有任何效果。更奇怪的是,開啟除錯工具,點選按鈕時html
checked="checked"
程式碼段,但頁面卻沒效果。
當我們用prop()
方法替換attr()
方法時,一切將變得正常:
<script>
$(function(){
var flag=false;
$("#btn").click(function(){
if(flag==false){
$("#check").prop("checked",true);
flag=true;
} else{
$("#check").removeAttr("checked");
flag=false;
}
});
});
</script>
這是為什麼呢,jquery1.6
中新加了一個方法prop()
,官方解釋只有一句話:獲取在匹配的元素集中的第一個元素的屬性值。
大家都知道有的瀏覽器只要寫disabled
,checked
就可以了,而有的要寫成disabled = "disabled",checked="checked"
,比如用attr("checked")
獲取checkbox
的checked
屬性時選中的時候可以取到值,值為"checked
"但沒選中獲取值就是undefined
。
jq
提供新的方法“prop
”來獲取這些屬性,就是來解決這個問題的,以前我們使用attr
獲取checked
屬性時返回"checked
“和”",現在使用prop
方法獲取屬性則統一返回true
和false
。
那麼,什麼時候使用attr()
,什麼時候使用prop()
?
1.新增屬性名稱該屬性就會生效應該使用prop()
;
2.是有true,false
兩個屬性使用prop()
;
3.其他則使用attr()
;
以下是官方建議attr(),prop()
的使用:
Jquery中attr
與prop
的區別詳解
前一段時間在做專案的時候,效果是這樣的
當點選左上方那個checkBox
時,要將下面的checkBox
全部選中,我寫的程式碼是這樣的
$("input[name='checkbox']").attr("checked",true);
然而並沒有起作用,後來換成下面那樣就可以了
$(function(){
$("#all").click(function(){
if($("#all").prop("checked")){
$("input[name='checkbox']").prop("checked",true);
}else{
$("input[name='checkbox']").prop("checked",false);
}
});
});
於是上官方的文件查了下attr
和prop
的區別,發現根本看不懂,如下圖
於是,我做了個一個測試
c1:<input id="c1" name="checkbox" type="checkbox" checked="checked" /></br>
c2:<input id="c2" name="checkbox" type="checkbox" checked=true/></br>
c3:<input id="c3" name="checkbox" type="checkbox" checked=""/></br>
c4:<input id="c4" name="checkbox" type="checkbox" checked/></br>
c5:<input id="c5" name="checkbox" type="checkbox" /></br>
c6:<input id="c6" name="checkbox" type="checkbox" checked=false/></br>
var a1=$("#c1").attr("checked");
var a2=$("#c2").attr("checked");
var a3=$("#c3").attr("checked");
var a4=$("#c4").attr("checked");
var a5=$("#c5").attr("checked");
var a6=$("#c6").attr("checked");
var p1=$("#c1").prop("checked");
var p2=$("#c2").prop("checked");
var p3=$("#c3").prop("checked");
var p4=$("#c4").prop("checked");
var p5=$("#c5").prop("checked");
var p6=$("#c6").prop("checked");
console.log("a1:"+a1);
console.log("a2:"+a2);
console.log("a3:"+a3);
console.log("a4:"+a4);
console.log("a5:"+a5);
console.log("a6:"+a6);
console.log("p1:"+p1);
console.log("p2:"+p2);
console.log("p3:"+p3);
console.log("p4:"+p4);
console.log("p5:"+p5);
console.log("p6:"+p6);
結果是這樣的(chrome
瀏覽器下)
發現attr
的返回值要麼是checked
要麼是undefined
,prop
的返回值只有true
和false
。
總結:
prop()
函式的結果:
1.如果有相應的屬性,返回指定屬性值。
2.如果沒有相應的屬性,返回值是空字串。
attr()
函式的結果:
1.如果有相應的屬性,返回指定屬性值。
2.如果沒有相應的屬性,返回值是undefined
。
對於HTML
元素本身就帶有的固有屬性,在處理時,使用prop
方法。
對於HTML
元素我們自己自定義的DOM
屬性,在處理時,使用attr
方法。
具有 true
和 false
兩個屬性的屬性,如 checked, selected
或者 disabled
使用prop()