Объект jQuery
Создавая новые элементы (или выбирая существующие), jQuery возвращает элементы в виде коллекции. Многие разработчики, плохо знакомые с jQuery, предполагают, что эта коллекция - это массив. У нее есть индексированная с нуля последовательность элементов DOM, несколько знакомых функций массива и свойство .length
, в конце концов. В действительности, объект jQuery более сложен, нежели массив.
DOM и Элементы DOM
Объектная модель документа (DOM для краткости) является представлением документа HTML. Она может содержать любое число элементов DOM. На высоком уровне элемент DOM может считаться "куском" веб-страницы. Он может содержать текст и/или другие элементы DOM. Элементы DOM описываются типом, таким как <div>
, <a>
, или <p>
, и любым числом атрибутов таких как src
, href
, class
и так далее. Для более полного описания обратитесь к официальной спецификации DOM от W3C.
У элементов есть свойства, как у любого объекта JavaScript. Среди этих свойств атрибуты наподобие .tagName и методы, такие как .appendChild()
. Эти свойства - единственный способ взаимодействовать с веб-страницей через JavaScript.
Объект jQuery
Оказывается, работа прямо с элементами DOM может быть неудобной. Объект jQuery определяет много методов, чтобы смягчить эти неудобства для разработчиков. Некоторые преимущества Объекта jQuery включают:
Совместимость – реализация методов элементов изменяется для разных поставщиков браузеров и версий. Следующий отрывок пытается установить внутренний HTML контент для элемента <tr>
, сохраненного в target
:
Пример
target.innerHTML = "
Попробуйте Сами »
Это работает во многих случаях, но перестанет работать в большинстве версий Internet Explorer. В этом случае рекомендуемый подход состоит в использовании чистых методов DOM вместо этого. Оборачивая элемент target
в объект jQuery, об этих случаях можно забыть и ожидаемый результат достигается во всех поддерживаемых браузерах:
Установка внутреннего HTML с jQuery:
Пример
$( target ).html( "
Попробуйте Сами »
Удобство – Есть много общих случаев использования манипуляций DOM, которые являются неудобными при выполнении чистыми методами DOM. Например, вставка элемента, сохраненного в newElement
после элемента target
требует довольно подробного метода DOM:
Вставка нового элемента за другим с собственным API DOM:
var target = document.getElementById( "target" );
var newElement = document.createElement( "div" );
target.parentNode.insertBefore(
target.nextSibling, newElement )
Перенося элемент target
в объект jQuery, та же самая задача становится намного более простой:
Вставка нового элемента за другим с jQuery:
var target = document.getElementById( "target" );
var newElement = document.createElement( "div" );
$( target ).after( newElement );