Jquery重新學習之二[屬性attr(),removeAttr(),prop(),removeProp()]

1:屬性.attr(name|pro|key,val|key,fn)與removeAttr(name)

1.1 .attr(name) 參數name為屬性名稱

<a id="my_href" href="#">連接</a>
<input id="My_Cbox" type="checkbox" value="check1" checked="checked"/>

$("#my_href").attr("href");  -->#
$("#My_Cbox").attr("checked");  //返回checked  (或undefined)

 

1.2 .attr(pro) 參數pro為作為屬性的“名/值對”對象

<img id="my_img"/>

$("#my_img").attr({ src: "test.jpg", alt: "圖片" }); --><img id="my_img" src="test.jpg" alt="圖片"/>

 

1.3 .attr(key,value) 參數key value為屬性跟其值

$("#my_img").attr("src","test.jpg");

 

1.4 .attr(key,fn) 參數key fn為屬性跟回調函數

$("#my_img").attr("title", function() { return this.src });

 

1.5 .removeAttr(name) 參數name要刪除的屬性名

<img id="my_img" src="test.jpg"/>

$("#my_img").removeAttr("src");  --> <img /> 

 

*1.6以下版本在IE6使用JQuery的removeAttr方法刪除disabled是無效的。解決的方法就是使用$("XX").prop("disabled",false);1.7版本在IE6下已支持刪除disabled。

 

2:屬性.prop(name|pro|key,val|key,fn)與.removeProp(name)

2.1 .prop(name) 參數name為屬性名稱

<input id="My_Cbox" type="checkbox" value="check1" checked="checked"/>

$("#My_Cbox").prop("checked");   //返回true  (或false)
alert($("#My_Cbox").prop("disabled"));   //返回false  (或true)

 

2.2 .prop(pro) 參數pro作為屬性的“名/值對”對象

$("#My_Cbox").prop({ disabled: true });
$("#My_Cbox").prop({ checked: true });

 

2.3 .prop(key,val) 參數屬性名稱，屬性值

$("#My_Cbox").prop("disabled", false);
$("#My_Cbox").prop("checked", true);

 

2.4 .prop(key,fn) 參數key fn(index,attr)屬性名稱,返回屬性值的函數,第一個參數為當前元素的索引值，第二個參數為原先的屬性值

$("#My_Cbox").prop("checked", function( i, val ) {
  return !val;
});

 

2.5 .removeProp(name) 參數要刪除的屬性名

<input id="My_Cbox" type="checkbox" value="check1" checked="checked"/>

$("#My_Cbox").removeProp("checked");  --><input id="My_Cbox" type="checkbox" value="check1"/>

 

3: .attr()與.prop()的區別

jquer .y 1.6+增加了.prop()方法，因為在有些瀏覽器中比如說只要寫disabled，checked就可以了，而有的要寫成disabled = "disabled"，checked="checked"。所以，從1.6開 始，jq提供新的方法“prop”來獲取這些屬性。

以前我們使用attr獲取checked屬性時返回"checked"和"",現在使用prop方法獲取屬性則統一返回true和false。
那么，什么時候使用attr，什么時候使用prop？？
1.添加屬性名稱該屬性就會生效應該使用prop.2.是有true,false兩個屬性使用prop.3.其他則使用attr

    <div>
        <input id="My_Cbox" type="checkbox" value="check1" checked="checked"/>
        check1
    </div>

    <script type="text/javascript">
        $(function () {
            alert($("#My_Cbox").attr("checked"));  //返回checked  (或undefined)
            alert($("#My_Cbox").prop("checked"));   //返回true  (或false)

        })
    </script>

 下面這張圖很好記錄什么時候運用它們：

 

最近有個妹子弄的一個關於擴大眼界跟內含的訂閱號，每天都會更新一些深度內容，在這里如果你感興趣也可以關注一下(嘿對美女跟知識感興趣)，當然可以關注后輸入：github 會有我的微信號，如果有問題你也可以在那找到我；當然不感興趣無視此信息；