На этом шаге мы введем несколько понятий, используемых при работе с объектной моделью документа.
Одной из наиболее сильных сторон jQuery является возможность легко производить выборку элементов дерева DOM. Объектная модель документа - своего рода древовидная структура. В языке HTML, как и в других языках разметки, эта модель применяется для описания взаимоотношений элементов страницы. Говоря о такого рода взаимоотношениях, мы будем использовать ту же терминологию, что и для описания взаимоотношений внутри семьи, - родители, потомки и так далее. Чтобы понять, как метафора генеалогического дерева применяется к документу, рассмотрим простой пример:
<html> <head> <title>Заголовок</title> </head> <body> <div> <p>Это абзац.</p> <p>Это другой абзац.</p> <p>Это еще один абзац.</p> </div> </body> </html>
Здесь элемент <html> является предком для всех остальных элементов; другими словами, все остальные элементы являются потомками элемента <html>. Элементы <head> и <body> являются не только потомками, но еще и дочерними элементами по отношению к элементу <html>. Точно так же элемент <html> является не только предком для элементов <head> и <body>, но и их родителем. Элементы <р> являются дочерними (и потомками) по отношению к элементу <div>, потомками по отношению к элементам <body> и <html> и братскими (то есть одного уровня) по отношению друг к другу.
Прежде чем продолжать, следует заметить, что множества элементов, отбираемых методами с помощью селекторов, всегда обертываются в объекты jQuery. Эти объекты jQuery очень просты в обращении, когда требуется выполнить какие-то операции над элементами страницы. Мы легко можем привязывать к этим объектам обработчики событий, добавлять эффекты, а также объединять в цепочки несколько операций или эффектов. Однако объекты jQuery отличаются от обычных элементов DOM или узлов списков и не обязательно предоставляют те же методы и свойства. По этой причине в дальнейшем мы рассмотрим способы доступа к элементам DOM, обернутым в объект jQuery.
На следующем шаге мы рассмотрим функцию $().