以下jQuery代码如何工作？

Question

遇到代码，并想知道为什么这有效？

$.fn.appendVal = function(txt) { return this.each(function(){ this.value += txt; }); }; 

与简单相反：

 $('#sometextboxaspcontrol').value +=txt;

顺便说一句。我知道'简单'不是，但为什么？

Answer 1

这创建了一个jquery插件，基本上与底部示例做同样的事情。你是对的，底部应该是等价的（除了其他响应中提到的语法问题），但我猜测顶部片段是作为如何扩展jquery的一个例子而创建的，这最终会变得非常强大

它可以让你写：

$('#sometextboxaspcontrol').appendVal(txt);

您可以想象，可以在保留非常简单的公共API的同时扩展抽象。

Answer 2

简单版本不起作用，因为该元素数组上不存在该属性。

jQuery对象本质上只是一个数组。你无法使用的原因：

$('#sometextboxaspcontrol').value +=txt;

是因为'value'在jQuery数组的上下文中不是有效选项。您需要使用方法，因为'value'属性应用于jQuery数组中的每个元素，即使该数组长度为一个元素。

Answer 3

jQuery对象没有名为value的属性。要获取或设置jQuery对象的值，必须使用.val（）。

所以$（...）。值不会得到或设置任何东西，因此不起作用。

Answer 4

jQuery function，$(...)不会直接返回该元素。它返回一个jQuery对象，该对象表示一个或多个匹配元素的列表*。

如果选择器表达式与单个元素匹配，则可以使用get()函数检索它并直接使用它：

$('#sometextboxaspcontrol').get(0).value +=txt;

如果选择器表达式与多个元素匹配，并且您希望独立地附加到每个元素的值，则需要以某种方式迭代元素。同样，您可以使用get()（没有索引）来获取原始元素数组。但是，您可以使用each()函数指定将在匹配列表中的每个元素的上下文中执行的函数。

如果这是你做了很多事情，你可以选择将自己的函数添加到jQuery对象本身（即创建一个插件）。通常，这将导致更小，更简单，更易读的脚本，并且重复代码更少。这就是这个例子的作用。 appendVal()函数被添加到jQuery对象中（它还返回jQuery对象（由each()函数返回）以允许您在“链”中调用其他jQuery函数，例如

$('#sometextboxaspcontrol').appendVal(txt).addClass('myClass');

Answer 5

$（'＃sometextboxaspcontrol'）[0] .value + = txt;

会工作吗？

原因是选择返回一个jquery数组而不是一个dom元素。

Answer 6

更复杂的第一个示例还允许您一次将值附加到多个匹配元素...

Answer 7

jquery返回一系列匹配对象。是的，即使您引用了唯一的元素标识符：

$('#foo').value = 'bar'
$('#foo').value != 'bar'

两个jQuery实际上都是包含相同元素的不同对象。所以这就是jquery扩展的来源，并将操作应用于每个所选元素。

使用firebug在javascript控制台周围戳。这将是启发。你可以在这里实验，因为他们使用jQuery。