jQuery предоставляет широчайшие возможности по выбору DOM-элементов. Как уже упоминалось ранее, прежде, чем что то сделать с элементом (будь то блок, список или картинка) сначала нужно к нему обратиться. Выбор элементов в jQuery организован практически так же, как и css. Нагляднее всего это увидеть на примерах. Давайте создадим небольшую html страничку и поучимся с помощью скрипта обращаться к ее элементам:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Работа с jQuery</title> <script type='text/javascript' src='js/jquery-1.8.2.min.js'></script> </head> <body> <h1>Отбор элементов в jQuery</h1> <div class="wrap"> <p>Этот текст является первым абзацем на странице и первым дочерним элементом блока wrap.</p> <p>Этот текст является вторым абзацем на странице и вторым дочерним элементом блока wrap.</p> </div> </body> </html>
Предположим, нам понадобилось отобрать абсолютно все элементы на странице. Для этого в файле myscript.js (как создать и подключить файл для пользовательских скриптов, описывалось в прошлой статье) нам понадобится написать следующее:
$(function () { $('*') });
jQuery дождется, пока загрузится вся страница, запишет в массив абсолютно все элементы и предоставит нам возможность совершить над ними какие то действия. Правда, если мы загрузим данный код в браузере, то ничего не увидим.
Что бы сделать пример более наглядным, давайте покрасим текст в абзацах в красный цвет. Для этого сначала выберем все абзацы, а затем применим к ним метод jQuery, который добавляет стиль к отобранным элементам:
$(function () { $('p').css('color', 'red'); });
О методах jQuery мы не раз еще будем говорить в последующих статьях, а пока просто откройте страницу с кодом выше в браузере и убедитесь, что текст в абзацах стал красным. Обратите внимание, заголовок по прежнему остался черным. Это произошло потому, что мы обратились только к абзацам на странице документа. Что бы исправить ситуацию, нам понадобится обратиться к заголовку. Исправим ситуацию и добавим в код еще одну строчку:
$(function () { $('p').css('color', 'red'); $('h1').css('color', 'red'); });
Теперь и заголовок стал красным, но... Код выглядит немного избыточным. jQuery позволяет сократить запись и применить один и тот же метод к нескольким элементам. Все, что для этого нужно, указать требуемые объекты, разделив их запятой. Следующая запись выполнит то же самое, что и код выше - изменит цвет у заголовка и текста в абзацах:
$(function () { $('p, h1').css('color', 'red'); });
Таким же нехитрым способом мы можем обратиться как к группе элементов, так и к любому из них по отдельности. Ознакомиться подробнее со всеми возможными способами выборки можно здесь.
Для отбора элементов jQuery использует синтаксис css и если вы с каскадными таблицами стилей "на ты", то уже значительно облегчили себе жизнь. Но что бы начать практиковаться в написании скриптов, не хватает еще одной маленькой детали. Мы уже немного познакомились в этой статье с одним из методов jQuery. Но их в библиотеке присутствует огромное количество. Именно благодаря методам мы сможем вытворять с элементами на странице все, что душа пожелает. В следующей статье - События и методы в jQuery, мы попробуем копнуть глубже и узнать что же еще может библиотека, кроме как изменить цвет текста.