.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 。