jquery中attr方法和prop方法的區別

關於checked的屬性，最重要的概念就是你要記住，它跟checked的狀態值是毫無關系的，設置checked = "checked"或者checked = "true"等屬性設置，和它的狀態值true/false是無關的。，而這里的屬性值，事實上只是和defaultChecked的狀態值有關，並且只能用來設置checkbox的初始的值。checked的屬性值並不會隨着checkbox的的狀態變化而變化，可是checkbox的狀態值卻會。因此，為了能更好的跨瀏覽器的兼容，決定了checkbox的checked的狀態要使用狀態值進行處理。

這些理論，對於那些動態的屬性來說，效果是相同的，例如：selected和value屬性。

當該方法用於設置屬性值時，則為匹配元素集合設置一個或多個屬性/值對。

注意：prop() 方法應該用於檢索屬性值，例如 DOM 屬性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

jQuery中，用於獲取屬性的方法，主要是基於prop方法的，我們經常使用的是attr方法，不過在attr方法中，有時候會出現一些問題的，這里就看下jquery的API中attr的介紹，主要內容翻譯自jQuery的API介紹：attr()

1.基本使用方法

attr()的作用:獲取匹配到的第一個元素的一個屬性值，或者是為所有匹配的元素進行屬性賦值。

支持的方法：

.attr(attributeName)

獲取匹配到的第一個元素的一個屬性值。
輸入值attributeName
Type:String，需要獲取的屬性名稱

.attr()方法，只能獲取匹配到的第一個元素的值，如果你想要獲取匹配到的所有的元素的屬性值，那么就需要借助jquery中的循環的方法，比如：.each()和.map();

使用jQuery的.attr()方法，獲取元素的屬性值有兩個最重要的優勢：

1：使用簡單，它可以直接對一個jQuery對象使用，並且使用過之后可以繼續使用其他的jQuery方法。

2：跨瀏覽器兼容性，有些屬性的獲取方法在瀏覽器上不兼容的，甚至於有的在同一瀏覽器的不同版本之間，都會出現不兼容的問題，.attr()方法降低了這種不兼容性。

注：屬性值是一個通常會返回一個字符串，偶爾也會返回類似價值或者數字順序的值。

注：在IE6，IE7，IE8中，如果你試圖去改變一個input元素的type屬性，當這個input已經添加到頁面時，會拋出一個錯誤。

在jQuery 1.6中，.attr()方法查詢那些沒有設置的屬性，則會返回一個undefined。如果你要去恢復或者改變DOM狀態值，類似checked，selected，disabled等表單元素的狀態，最好使用.prop()方法。

屬性值 VS 狀態值

在一些特殊的情況下，屬性值和狀態值的不同是有很大影響的。在jQuery 1.6之前的版本，.attr()方法在恢復一些屬性時，有時會把狀態值也考慮進去，這樣的話，就會導致瀏覽器的兼容問題。在jQuery 1.6中，.prop()提供的方法可以避免恢復狀態值，而.attr()方法會恢復狀態值。

例如：selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked,和defaultSelected這些屬性，就應該使用.prop()方法進行恢復屬性值。在jQuery 1.6之前的版本，這些狀態值都是可以通過.attr()獲取的，雖然獲取這些狀態值並不是attr的工作范圍。這些個狀態值和屬性是沒有任何聯系的，它們僅僅是一個狀態。

就布爾邏輯型的屬性而言，如果我們定義一個這樣的HTML的DOM對象。<input type = "checkbox" checked = "checked" />，並且假設這個HTML對象在Javascript中被命名為elem.

看一下它們的使用不同方法對checked屬性取值的結果顯示：

根據W3C的規范，“checked”屬性，是一個布爾邏輯型的屬性，這就意味着，如果該屬性存在的話，那么它對應的狀態值的取值結果是正確的，例如，即使該屬性沒有值，或者被設置成一個空字符串，或者設置為“false”,對於布爾邏輯型屬性來說都是正確的。

然而，關於checked的屬性，最重要的概念就是你要記住，它跟checked的狀態值是毫無關系的，設置checked = "checked"或者checked = "true"等屬性設置，和它的狀態值true/false是無關的。，而這里的屬性值，事實上只是和defaultChecked的狀態值有關，並且只能用來設置checkbox的初始的值。checked的屬性值並不會隨着checkbox的的狀態變化而變化，可是checkbox的狀態值卻會。因此，為了能更好的跨瀏覽器的兼容，決定了checkbox的checked的狀態要使用狀態值進行處理。

例如：

if(elem.checked)
if($(elem).prop("checked"))
if($(elem).is(":checked"))

這些理論，對於那些動態的屬性來說，效果是相同的，例如：selected和value屬性。

補充注釋：

在IE9之前的瀏覽器版本中，使用.prop()方法，設置一個DOM元素的狀態值，相較於那些原始的值（數字，字符串，或者布爾邏輯值）是不同的，如果這個DOM元素在被移除文檔之前，沒有使用.removeProp()移除這個狀態值，那么它將會導致內存泄露，如果想要比較安全的在DOM對象上面設置屬性值，而又不會導致內存泄露，那么使用.data這句話，沒有理解到

舉例：核心代碼如下

 1 <body>
 2 <input id="check1" type="checkbox" checked="checked">
 3 <label for="check1">Check me</label>
 4 <p></p>
 5 <script>
 6 $( "input" )
 7   .change(function() {
 8     var $input = $( this );
 9     $( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) 
　　　　+ "</b><br>" +".prop( 'checked' ): <b>" + $input.prop( "checked" ) 
　　　　+ "</b><br>" +".is( ':checked' ): <b>" + $input.is( ":checked" ) 
　　　　+ "</b>" );}).change();
10 </script>

查看原頁面代碼，可以點擊：attr-prop；

這里就不再舉例說明attr的正常使用方法了，如果你有興趣，可以點擊查看：實例demo

2：使用attr進行賦值操作。

.attr(attributeName,name)

attributeName:String,需要設置的屬性名稱
String or Number, 需要設置的屬性的屬性值。

.attr(attributes)

attributes:Object, 需要設置的屬性組成的一個對象。

.attr(attributeName,function(index,attr))

attributeName:String, 設置的屬性名稱。
function(index,attr):Function,

函數的返回值設置為屬性的值，this表示當前選中的元素，接收的第一個參數是表示，當前選中的元素中的位置的序列（從0開始），第二個參數為該元素，對於該屬性的原來的屬性值。

使用.attr()方法去設置屬性值是非常方便的，尤其是需要設置多個屬性，或者需要設置的屬性值是一個function的返回值時，看下面的image標簽：


<img id="greatphoto" src="brush-seller.jpg" alt="brush seller"\>

設置一個簡單的屬性，使用.attr()可以簡單的根據屬性名和屬性值的改變alt屬性的值。


$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );

也可以使用同樣的方法，添加一個新的屬性：


$( "#greatphoto" ).attr( "title", "Photo by Kelly Clark" );

也可以一次設置多個屬性：改變屬性alt的值，同時添加新的屬性title。

$( “#greatphoto” ).attr({
    alt: “Beijing Brush Seller”,
    title: “photo by Kelly Clark”
});

當設置多個屬性時，屬性名的引號是可以省略的。

警告：當設置class屬性時，引號是不可以被省略的。

注：jQuery禁止改變 <input>和 <button>元素的 type屬性，如果強制去改變，在任何瀏覽器下，這都會拋出一個異常，這是因為，在IE瀏覽器下， type屬性是不可被修改的。所以就在所有的瀏覽器下，都不能進行設置，保存兼容性的統一。

計算后的屬性值：

通過使用function設置屬性，可以通過其他的屬性值進行計算之后，再進行屬性賦值操作，例如：基於一個已有的屬性連接處一個新的屬性值。

$( “#greatphoto” ).attr( “title”, function( i, val ) {
    return val + ” – photo by Kelly Clark”;
});

這種通過function計算屬性值的方法在一次性對多個元素設置不同的屬性值時，尤其的有效。

例子:為頁面中的所有img設置一些屬性，核心代碼如下：

<body> <img> <img> <img> <div><b>Attribute of Ajax</b></div> <script> $( "img" ).attr({ src: "/resources/hat.gif", title: "jQuery", alt: "jQuery Logo" }); $( "div" ).text( $( "img" ).attr( "alt" ) ); </script> </body>

<br />

根據div在頁面中的position，設置它的id屬性。

<body> <div>Zero-th <span></div> <div>First <span></span></div> <div>Second <span></span></div> <script> $( "div" ) .attr( "id", function( arr ) { return "div-id" + arr; }) .each(function() { $( "span", this ).html( "(id = '<b>" + this.id + "</b>')" ); }); </script> </body>

<br />

OK，這里就暫時敘述到這里了，如果你不明白為什么.attr()的取值和.prop()的取值有這個差別，那么就先看看前一篇文章，js原生操作HTML對象的屬性區別，然后再去看看jquery源碼中的，.attr()方法和.prop()方法的實現吧。

http://www.zhangyunling.com/?p=38