Объект 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:

Это работает во многих случаях, но перестанет работать в большинстве версий Internet Explorer. В этом случае рекомендуемый подход состоит в использовании чистых методов DOM вместо этого. Оборачивая элемент target в объект jQuery, об этих случаях можно забыть и ожидаемый результат достигается во всех поддерживаемых браузерах:

Установка внутреннего HTML с jQuery:

Удобство – Есть много общих случаев использования манипуляций 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 );

Далее: Сетки jQuery Mobile