以下jQuery代码是如何工作的？

遇到一个代码，想知道为什么会这样

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

与简单相反：

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

---

顺便说一句，我知道“simple”没有，但为什么呢？

这创建了一个jquery插件，它基本上完成了与下面示例相同的工作。您是对的，底部应该是等效的（除了其他响应中提到的语法问题），但我猜顶部的代码片段是作为如何扩展jquery的示例创建的，它最终可能非常强大

它可以让你写：

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

---

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

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

---

因此，$（…）.value不获取或设置任何内容，因此不起作用

更复杂的第一个示例还允许您同时将值附加到多个匹配的元素上。

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

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

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

---

是因为“

value

”在jQuery数组的上下文中不是有效的选项。您需要使用方法，因为“

value

”属性应用于jQuery数组中的每个元素，即使该数组只有一个元素长。

jQuery返回一个匹配对象序列。是，即使在引用唯一元素标识符时：

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

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

用firebug浏览javascript控制台。这将是有启发性的。实际上，您可以在这里进行实验，以便他们使用jQuery。

中，

$（…）

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

如果选择器表达式与单个元素匹配，则可以使用

get（）

函数检索它并直接使用它：

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

如果选择器表达式匹配多个元素，并且希望独立地附加到每个元素的值，则需要以某种方式对元素进行迭代。同样，您可以使用

get（）

（不带索引）来获取原始元素的数组。但是，您可以使用

each（）

函数指定将在匹配列表中每个元素的上下文中执行的函数

如果这是您经常做的事情，那么您可以选择将自己的函数添加到jQuery对象本身（即创建一个插件）。通常，这将导致更小、更简单、更可读的脚本，代码重复更少。这就是示例所做的。

appendVal（）

函数被添加到jQuery对象中（它还返回jQuery对象（由

each（）

函数返回），以允许您调用“链”中的其他jQuery函数，例如

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

会有用的

---

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

简单版本做了什么不正确的事情？@d03boy:jquery集合没有值属性；特定的dom元素有。

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