Получение Элементов В Объекте jQuery

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

Например:

Выбор всех тегов <h1>.:

var headings = $( "h1" );

headings теперь является jQuery элементом, содержащим все теги <h1>, которые уже есть на странице. Это может быть проверено, просматривая свойство .length для headings:

Просмотр числа тегов <h1> на странице:

Если у страницы больше чем один тег <h1>, это число будет больше чем один. Если страница не имеет тегов <h1>, свойство .length будет нулем. Проверка свойства .length - распространенный способ убедиться, что селектор успешно сопоставил один или более элементов.

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

Выбор только первого элемента <h1> на странице (в объекте jQuery):

var headings = $( "h1" );
 
var firstHeading = headings.eq( 0 );

Теперь firstHeading - объект jQuery, содержащий только первый элемент <h1> на странице. И поскольку firstHeading - объект jQuery, у него есть полезные методы, такие как .html() и .after(). jQuery также имеет метод .get(), который обеспечивает связанную функцию. Вместо того, чтобы возвратить jQuery-обернутый элемент DOM, он возвращает элемент DOM непосредственно.

Выбор только первого элемента <h1> на странице:

var firstHeadingElem = $( "h1" ).get( 0 );

Либо, поскольку объект jQuery "подобен массиву", он поддерживает синтаксис массива через квадратные скобки:

Выбор только первого элемента <h1> на странице (альтернативный подход):

var firstHeadingElem = $( "h1" )[ 0 ];

В любом случае, firstHeadingElem содержит родной элемент DOM. Это означает, что у него есть свойства DOM, такие как innerHTML, и методы, такие как .appendChild(), но не jQuery методы, такие как .html() или .after(). С элементом firstHeadingElem более трудно работать, но есть определенные случаи, которые требуют этого. Один такой случай - когда надо сделать сравнение.

Далее: Функции JavaScript