Получение Элементов В Объекте 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 более трудно работать, но есть определенные случаи, которые требуют этого. Один такой случай - когда надо сделать сравнение.