Как работает следующий код 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

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

Будет работать.

Причина в том, что выборка возвращает массив jquery, а не элемент dom.

Answer 4

Функция jQuery , $(...) не возвращает элемент напрямую. Он возвращает объект jQuery, представляющий список из одного или нескольких совпадающих элементов *.

Если выражение селектора соответствует одному элементу, вы можете использовать функцию get() для его извлечения и непосредственной работы с ним:

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

Если выражение селектора соответствует нескольким элементам, и вы хотите добавить к значению каждого элемента независимо, вам нужно каким-то образом перебрать элементы. Опять же, вы можете использовать get() (без индекса), чтобы получить массив необработанных элементов. Однако вы можете использовать функцию each(), чтобы указать функцию, которая будет выполняться в контексте каждого элемента в списке совпадений.

Если вы часто этим занимаетесь, вы можете добавить свою собственную функцию в сам объект jQuery (т.е. создать плагин). Обычно это приводит к меньшим, более простым и более читаемым сценариям с менее повторяющимся кодом. Это то, что делает пример. Функция appendVal() добавлена ​​к объекту jQuery (и также возвращает объект jQuery (возвращаемый функцией each()), чтобы позволить вам вызывать другие функции jQuery в «цепочке», например,

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

Answer 5

У объектов jQuery нет свойства с именем value. Чтобы получить или установить значение объекта jQuery, вы должны использовать .val ().

Так что $ (...). Value ничего не получает и не устанавливает и, следовательно, не работает.

Answer 6

jquery возвращает последовательность совпадающих объектов. да, даже если вы ссылаетесь на уникальный идентификатор элемента:

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

Оба jQuery на самом деле являются разными объектами, которые содержат одинаковых элементов. Так что именно здесь приходит расширение jquery и применяет операцию к каждому выбранному элементу.

Покопайтесь в консоли javascript с помощью firebug. Это будет поучительно. Вы можете поэкспериментировать прямо здесь, в SO, так как они используют jQuery.

Answer 7

Более сложный первый пример также позволяет добавлять значения к нескольким соответствующим элементам одновременно ...