jQuery – web2.0 для начинающих

Программирование вообще и Web-dev в частности это мое хобби. Конечно были попытки сделать из него профессию, но особым успехом они не увенчались, всегда находилось занятие приносившее приемлемые деньги быстрее. Может оно и к лучшему, по крайней мере занимаюсь я этим с удовольствием 🙂 Все мои знания в данной области крайне разрознены и бессистемны. И желание привести их в какой-то порядок привело к написанию этого поста, а в перспективе - нескольких статей, призванных разложить все по полочкам. Начать я решил с упорядочивания своих знаний по jQuery (если кто не в курсе - это такая JavaScript-библиотека, позволяющая достаточно просто добавлять на сайт разного рода спецэффекты. Конечно возможности ее не ограничиваются визуальными эффектами, но именно они делают ее использование увлекательным. Процесс подключения библиотеки к сайту я опущу, процедура эта не отличается от подключения любого другого скрипта и описана тысячи раз на сотнях сайтов. Приступлю сразу к работе с фреймворком. Для начала разберемся, как работает jQuery. Весь процесс можно разделить на три этапа:
  • Выбираем, над каким элементом страницы будем издеваться
  • Выбираем, что будем с выбранным элементом делать
  • Определяемся когда будем это делать
Практически любой скрипт с использованием jQuery начинается с вот такой конструкции: $(document).ready(function(){

// собственно код скрипта

}); Этот код необходим для того, чтобы выполнение скрипта началось после полной загрузки страницы. В дальнейшем я буду его опускать, подразумевая что все примеры располагаются внутри этой конструкции. Итак, начнем. Допустим нам необходимо выбрать все картинки, расположенные на загруженной странице. var images = $("img"); Вот и все! Теперь в переменной images у нас находится массив со всеми элементами <img> нашей странички. Конечно, все это можно проделать с использованием "чистого" JavaScript, но во сколько раз увеличится объем кода!!! Становится понятным слоган разработчиков jQuery: "write less, do more" (пиши меньше, делай больше). Для того чтобы как-то проверить работу этого скрипта дополним его вот такой строчкой: images.css("border: 1px solid #0f0;"); Таким образом мы добавляем ко всем элементам <img> рамку. Подробнее об изменении элементов я расскажу в следующих постах, пока что этот кусок добавлен исключительно для иллюстрации примера. Короче техника отбора ясна. Создаем переменную и при помощи конструкции $("условия_выбора"); заносим в нее все что нам нужно. На самом деле переменную создавать не обязательно, предидущий пример можно реализовать следующим образом: $("img").css("border: 1px solid #0f0;"); Эффект будет тем же. Но если результатом выбора нужно воспользоваться больше одного раза, лучше все-таки хранить его в переменной. И код компактней, и браузер меньше нагружается. Условий выбора можнет быть несколько. Тогда они перечисляются через запятую: $("img, .myclass"); Выбираем все картинки и все элементы с классом myclass. А теперь условия для выборок:
  • $("*") - Выбираем ВСЕ элементы на странице;
  • $("#myid") - Элемент с идентификатором "id";
  • $(".myclass") - Все элементы с классом "myclass";
  • $("tagname") - Все элементы с тэгом <tagname>;
  • $(":header") – Все заголовочные элементы (h1, h2, h3 и т.д.);
  • $("element_1 element_2") - Все элементы <element_2>, родителем которых является <element_1>. "Степень родства" – любая;
  • $("element_1 > element_2") - Все элементы <element_2>, дочерние по отношению к  <element_1>;
  • $("element_1 + element_2") - Элемент <element_2>, следующий непосредственно после   <element_1>;
  • $("element_1 ~element_2") - Все элементы <element_2>, которые идут после <element_1> и имеют общего с ним родителя;
  • $("element:first) – Первый элемент element на странице;
  • $("element:last) - Последний элемент element на странице;
  • $("element:first-child) – Элемент element, являющийся первым потомком своего родителя;
  • $("element:last-child) – Элемент element, являющийся последним потомком своего родителя;
  • $("element:even) – Все четные элементы element;
  • $("element:odd) - Все нечетные элементы element;
  • $("element:empty) - Все пустые элементы element (не содержащие текста, и не имеющие потомков);
  • $("element:parent) - Все элементы element имеющие потомков;
Из этого списка становится ясно, что для отбора элементов jQuery использует синтаксис CSS. Это упрощает изучение. Но такой способ выборки это далеко не все. Результат можно конкретизировать, при чем очень сильно, если использовать дополнительные условия.  К примеру, нам нужно выбрать на странице все картинки, имеющие атрибут "alt" с содержанием "Моя картинка". <img src="image.jpg" alt="Моя картинка">     Ка это сделать? Элементарно:     $("img[alt='Моя картинка']");     Думаю, код говорит сам за себя, главное следить за использованием двойных и одинарных кавычек.     Но отбор по полному значению атрибута не слишком востребован. Куда чаще приходится искать какие-то куски этого значения. На этот случай у jQuery есть целый набор селекторов. Тот кто знаком с регулярными выражениями, наверняка увидит в них что-то знакомое 🙂
  • $("element[attr *= 'val']") - Значение атрибута attr у элемента element содержит значение val.
  • $("element[attr ~= 'val']") - Тоже что и предыдущий пункт, только val должно быть целым словом (ограниченным с обеих сторон пробелами).
  • $("element[attr ^= 'val']") - Значение attr должно начинаться с val.
  • $("element[attr $= 'val']") - Значение attr должно заканчиваться на val.
  • $("element[attr != 'val']") - Значение attr не содержать val.
Следующий селектор проверяет, содержит ли заданный элемент нужный текст: $("element:contains('text')"); В отдельную группу можно вынести набор селекторов, работающих с тегом <input>. Они позволяют выбрать элементы в форме в зависимости от их типа. Выглядят они следующим образом: $("element:type"); где element – любой из ранее перечисленных мной селекторов, а type – тип элемента input. К стати, наличие селектора element вовсе не обязательно. Если его нет, будут выбраны все элементы input заданного типа. Список возможных значений type:
  • $(":button") - выбираем все кнопки на странице.
  • $(":checkbox") - все чекбоксы.
  • $(":file") - все элементы для выбора файлов.
  • $(":image") - все картинки.
  • $(":text") - все поля ввода текста.
  • $(":password") - все поля ввода пароля.
  • $(":radio") - все радио-кнопки.
  • $(":hidden") - все скрытые элементы формы.
  • $(":submit") - все кнопки отправки формы.
  • $(":reset") - все кнопки очистки формы.
  • $(":checked") - все отмеченные элементы.
  • $(":disabled") - все неактивные элементы.
  • $(":enabled") - все активные элементы.
  • $(":focus") - элемент, на котором в данный момент находится фокус ввода.
  • $(":input") - просто все элементы input.
Это не все селекторы, доступные в jQuery, но IMHO перечисленных здесь достаточно для поиска и отбора практически любого элемента. Конечно, рано или поздно возникнет необходимость сделать какую-то особо хитро-мудрую выборку, тогда пожалуй пригодятся все эти eq(), gt(), lt() и прочие. Ну а пока небольшой пример, иллюстрирующий возможности jQuery в поиске и отборе элементов. Этот скрипт будет красить четные и нечетные строки таблицы в разные цвета. Он не только демонстрирует возможности фреймворка, но и вполне применим в реальной жизни. Если изначально не известно, сколько строк будет в таблице, то этот способ вполне подойдет. Лично я так и раскрасил таблицы характеристик товаров в одном интернет-магазине. $(document).ready(function(){ $("table tr:even").css({ "background":"#cccccc", "color":"#333333" }); $("table tr:odd").css({ "background":"#333333", "color":"#fff" }); }); Результат работы скрипта - вот здесь

Добавить комментарий