jQuery attr vs道具？

Question

現在，這不只是一個有什麼區別的問題，我有done some tests(http://jsfiddle.net/ZC3Lf/)修改的<form action="/test/"></form>​的prop和attr與輸出是：

1）道具修改測試
道具：http://fiddle.jshell.net/test/1
屬性：http://fiddle.jshell.net/test/1

2）屬性修改測試
支柱：http://fiddle.jshell.net/test/1
的Attr：/test/1

3）的Attr然後支柱變形測試
支柱：http://fiddle.jshell.net/test/11
的Attr：http://fiddle.jshell.net/test/11

4）丙然後的Attr變形測試
支柱：http://fiddle.jshell.net/test/11
ATTR：http://fiddle.jshell.net/test/11

現在我感到困惑的一對夫婦的事情，據我所知有云：
道具：在它的價值通過JavaScript
的Attr值的任何修改後的當前狀態因爲它是在頁面加載的html中定義的。

現在，如果這是正確的，

• 爲什麼修改prop似乎使action完全合格，反之爲什麼修改屬性呢？
• 爲什麼修改prop在1)修改屬性，那對我沒有意義？
• 爲什麼修改attr2)修改屬性，是否意味着要以這種方式鏈接？

---

測試代碼

HTML

的JavaScript

var element = $('form'); 
var property = 'action'; 

/*You should not need to modify below this line */ 

var body = $('body'); 
var original = element.attr(property); 

body.append('<h1>Prop Modification test</h1>'); 
element.prop(property, element.prop(property) + 1); 

body.append('Prop: '+element.prop(property)+'<br />'); 
body.append('Attr: '+element.attr(property)+'<hr />'); 

//reset 
element.prop(property, original); 
element.attr(property, original); 

body.append('<h1>Attr Modification test</h1>'); 
element.attr(property, element.attr(property) + 1); 

body.append('Prop: '+element.prop(property)+'<br />'); 
body.append('Attr: '+element.attr(property)+'<hr />'); 

//reset 
element.prop(property, original); 
element.attr(property, original); 

body.append('<h1>Attr then Prop Modification test</h1>'); 
element.attr(property, element.attr(property) + 1); 
element.prop(property, element.prop(property) + 1); 

body.append('Prop: '+element.prop(property)+'<br />'); 
body.append('Attr: '+element.attr(property)+'<hr />'); 

//reset 
element.prop(property, original); 
element.attr(property, original); 

body.append('<h1>Prop then Attr Modification test</h1>'); 
element.prop(property, element.prop(property) + 1); 
element.attr(property, element.attr(property) + 1); 

body.append('Prop: '+element.prop(property)+'<br />'); 
body.append('Attr: '+element.attr(property)+'<hr />'); 

Answer 1

遺憾的是沒有一個人r鏈接工作:(

雖然有些洞察，attr是所有屬性。 prop是屬性。

在較老的jQuery版本（< 1.6）中，我們只有attr。爲了得到DOM屬性，如nodeName，selectedIndex，或defaultValue你必須做一些事情，如：

var elem = $("#foo")[0]; 
if (elem) { 
    index = elem.selectedIndex; 
} 

爛的，所以prop加入：

index = $("#foo").prop("selectedIndex"); 

這是偉大的，但煩人這WASN 「T向後兼容的，如：

<input type="checkbox" checked> 

沒有的checked屬性，但它確實有一個性質C alled checked。

所以，在1.6的最終版本中，attr也做prop，以便事情沒有中斷。有些人希望這是一次徹底的休息，但我認爲做出正確的決定是因爲事情並沒有在所有地方發生。

關於：

道具：在它的價值的當前狀態的任何修改後通過JavaScript

的Attr：價值，因爲它是在頁面加載HTML定義。

這並非總是如此，因爲許多次屬性實際上已更改，但對於諸如已選中的屬性，沒有要更改的屬性，因此您需要使用prop。

參考文獻：

http://blog.jquery.com/2011/05/03/jquery-16-released/

http://ejohn.org/blog/jquery-16-and-attr

Answer 2

我試圖此

console.log(element.prop(property)); 
console.log(element.attr(property)); 

並輸出如下

http://fiddle.jshell.net/test/ 
/test/ 

這可能表示action僅在其爲讀和prop時才被標準化。

Answer 3

有一個明確的情況下，看.prop之間和.attr

考慮下面的HTML差異：

<form name="form" action="#"> 
    <input type="text" name="action" value="myvalue" /> 
    <input type="submit" /> 
</form> 
<pre id="return"> 
</pre> 

和使用jQuery以下JS：

$(document).ready(function(){ 
    $("#return").append("$('form').prop('action') : " + $('form').prop('action') + '\r\n'); 
    $("#return").append("$('form').attr('action') : " + $('form').attr('action') + '\r\n'); 
    $("#return").append("document.form.action : " + document.form.action); 
}); 

$（ 'form'）。prop（'action'）將返回document.form.action node => HTMLInputElement
$（'form'）。attr（'action'）將返回action屬性=>＃

Answer 4

因爲jquery 1.6.1+ attr（）返回/更改1.6之前的屬性。因此你的測試沒有多大意義。

請注意退貨價值的微小變化。

例如（'checked'）：在1.6之前，真/假是自從的1.6.1。 「checked」/ undefined返回。

ATTR（「選擇」）：之前1.6真/假返回，因爲1.6.1「選擇」 /未定義返回

詳細介紹這個主題，在德國可以在這裏找到：

http://mabraham.de/jquery-prop-attr-val-richtig-verwenden/