.prop（）返回對象而不是值

Question

我會盡量讓我的問題儘可能簡單明瞭。所以我最近閱讀了stackoverflow上的.prop() vs .attr()頁面，並決定開始使用prop()而不是attr()。

HTML

<form action="php/select.php" method="POST" class="ajax"> 
    <fieldset> 
     <legend>Show</legend> 
     <div> 
      <input type="submit" value="Show Servers"/> 
     </div> 
     <div id="output"></div> 
    </fieldset> 
    <input type="hidden" name="action" value="SHOW_SERVERS"/> 
</form> 

JQuery的

$(document).ready(function(){ 
    $("form.ajax").on("submit",function(e){ 
     e.preventDefault(); 
     var t=$(this); 
     var form=t.serialize(); 
     var method=t.prop("method"); 
     var url=t.prop("action");//Before: t.attr("action"); 
     console.log(url); 
    }); 
}); 

這裏來的怪異的一部分，當我提交表單，它打印在控制檯是這個

我問題是：

爲什麼JQuery返回一個輸入元素而不是表單動作屬性的值？

爲什麼.prop()獲得方法屬性的值，而不是action屬性

PS：我已經知道了輸入有屬性name="action"。

Answer 1

爲什麼JQuery返回一個輸入元素而不是 表單動作屬性的值？

它與jQuery沒有任何關係。

這是HTML本身的規範。表單中的控件隨表單提交，控件的name成爲表單的屬性。更多此處：http://www.w3.org/TR/html401/interact/forms.html#control-name

這與form標記上的屬性不同。

因此，即使沒有使用jQuery，如果您要引用一個名爲example的input元素，您將以formname.example的身份執行此操作。

小提琴：https://jsfiddle.net/abhitalks/jct8ksr3/

段：

$("form.ajax").on("submit",function(e){ 
 
\t e.preventDefault(); 
 
\t console.log(this.example); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="php/select.php" method="POST" class="ajax"> 
 
    <div> 
 
    <input type="text" name="example" value="test"/> 
 
    <input type="submit" value="Show Servers"/> 
 
    </div> 
 
</form>

什麼jQuery不會是它與attr公開attribute秒。這些返回實際上不會從源更改的屬性值（標籤的）。但是，jQuery還公開了元素的屬性（，標籤屬性的當前值包括在內）。並且因爲表單控件名稱作爲屬性附加到表單，它也會返回這些名稱。

你可以看到，只是在你的代碼記錄此：

console.log(t); 

Answer 2

method屬性不適用於boolean值。您需要爲此使用attr()。 prop()只能用於設置和重置布爾值，如disabled或checked。

$(document).ready(function(){ 
    $("form.ajax").on("submit",function(e){ 
     e.preventDefault(); 
     var t=$(this); 
     var form=t.serialize(); 
     var method=t.attr("method"); // Change here 
     var url=t.attr("action");  // Change here 
     console.log(url); 
    }); 
}); 

FYI，prop()是不爲attr()的替代品。試想一下：

<input type="checkbox" name="chkBox" checked="checked" id="chkBox" /> 

用途：

$("#chkBox").prop("checked"); // true 
$("#chkBox").attr("name"); // chkBox 

用同樣的代碼，我想它應該工作：

$(document).ready(function() { 
 
    $("form.ajax").on("submit", function(e) { 
 
    e.preventDefault(); 
 
    var t = $(this); 
 
    var form = t.serialize(); 
 
    var method = t.attr("method"); 
 
    var url = t.attr("action"); 
 
    console.log(url); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form action="php/select.php" method="POST" class="ajax"> 
 
    <fieldset> 
 
    <legend>Show</legend> 
 
    <div> 
 
     <input type="submit" value="Show Servers" /> 
 
    </div> 
 
    <div id="output"></div> 
 
    </fieldset> 
 
    <input type="hidden" name="action" value="SHOW_SERVERS" /> 
 
</form>

我可以在控制檯中看到php/select.php 。

它之所以返回<input />就是，如圖Álvaro González說，（我不想採取信貸），這是因爲如果有<input name="something">，那麼<form>。 something將是該表單的一個屬性。所以prop()與name和action混淆。

欲瞭解更多信息，請參閱named form fields become properties of parent form。

Answer 3

正如你可能已經懷疑，困惑來自於事實，你已經使用了「行動」一詞在您的代碼兩次：

<form action="php/select.php" method="POST" class="ajax"> 
     ^^^^^^ 
<input type="hidden" name="action" value="SHOW_SERVERS"/> 
          ^^^^^^ 

因爲jQuery的1.6，t.attr("action")獲取HTML專門和t.prop("action")取屬性，以及JavaScript屬性。所以：

• t.attr("action")爭奪action="php/select.php"（這是簡單明瞭）

• t.prop("action")抓住一個屬性。由於named form fields become properties of parent form，我們得到相應的<input>。

這是一個很好的例子，說明新邏輯爲什麼有助於避免模棱兩可。

Answer 4

jQuery的源代碼（在jQuery的1.11.3.js線8239）看，你可以看到，prop功能依賴（經過幾次檢查）調用給定的元素字段。

在您的示例中，元素是表單，您試圖獲得的字段是method和action。它返回'post'爲method，因爲method是表單（DOM對象）的合適字段，所以form[method]按預期返回'post'。現在關於action，表單（DOM對象）中沒有action字段，因此調用form[action]實際上觸發了一種底層機制，該機制最終返回表單中具有action的第一個元素作爲其name屬性：您在控制檯中看到的input 。