Селекторы JQuery не работают для назначения элемента dom переменной

У меня есть программа, которая назначает переменную как:

var theList = document.getElementById('theList');

он использует jquery, но если я напишу его так:

var theList = $('#theList');

функция, использующая эту переменную, не работает.

В чем разница между селектором jquery и использованием getElementById?

ОТВЕТЫ

Ответ 1

document.getElementById возвращает собственный объект DOM Element с прямым доступом к этим свойствам node.

Функции jQuery вместо этого возвращают "коллекции jQuery", то есть объект jQuery с соответствующим набором функций/плагинов и т.д., который действует как массив узлов DOM.

Общим соглашением, используемым для указания первого из последнего, является префикс переменных, содержащих последний с $:

Чтобы извлечь отдельные элементы из коллекции jQuery в качестве узлов DOM, используйте .get(n) или [n].

var $theList = $('#theList');   // jQuery collection
var theList = $theList[0];      // DOM node
var theList = $theList.get(0);  // also a DOM node

Доступ к атрибуту и ​​свойствам зависит от того, есть ли у вас коллекция jQuery или нет:

var id = $theList.attr('id');   // jQuery function
var id = theList.id;            // native property

Ответ 2

Первый theList является элементом DOM; второй theList (который в идеале должен быть записан как $theList) является jQuery object. Ваша функция, по-видимому, ожидает первого, а не последнего.

Ответ 3

Это потому, что $('# theList') возвращает объект JQuery, а не объект DOM. Объекты JQuery не имеют тех же методов и свойств, что и элемент Javascript/ Node.

Ответ 4

Функция

getElementById возвращает первый элемент с заданным идентификатором, где селектор jquery возвращает объект, известный как "завернутый набор". Вы можете использовать функцию each для ее итерации и вызова вашей функции.

Смотрите эту статью: http://www.devx.com/codemag/Article/40923.

Ответ 5

Стандартная функция getElementByID возвращает ссылку на JavaScript для элемента DOM, тогда как функция jQuery возвращает объект jQuery (который содержит структуру ссылок, относящуюся к массиву, к нулевым или более ссылкам JavaScript для элементов DOM).

Чтобы сделать их совместимыми, вы можете использовать:

var theList = $('#theList').get(0);

NB: Отредактировано, чтобы помочь сохранить мир во всем мире и исправить мою поспешную типизированную терминологию, которую комментаторы быстро указали.