jQuery - тише едешь - дальше будешь!
jQuery - это Javascript библиотека, которая упрощает работу с DOM, событиями, CSS и AJAX, а также позволяет легко создавать анимации. Главная особенность jQuery - это кроссбраузерность ( да, и Internet Explorer 6 тоже :).Слоган jQuery звучит так: "Write less, do more", что в переводе на русский означает "Пиши меньше, делай больше" (или "Тише едешь - дальше будешь" :). Эти слова идеально подходят к описанию этой библиотеки и полностью себя оправдывают.
Первые шаги с jQuery
Для начала Вам понадобится скачать одноименную библиотеку. Сделать это можно на официальном сайте jQuery. После этого следует подключить jQuery к Вашей HTML страничке. Сделать это можно с помощью добавления тега script в head документа:
<head>
<title>Подключаем jQuery</title>
<script type='text/javascript' src='jquery-1.3.2.js'><script>
</head>
После этого Вы уже можете начинать использовать jQuery.
Селекторы в jQuery
Пришло время рассказать о селекторах. Селекторы в jQuery - это те же самые селекторы CSS, только модифицированные. Модифицированные они потому, что программисты jQuery добавили много полезных селекторов для удобного поиска нужных элементов.
Рассмотрим пример кода:
Пример 1
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
</head>
<body>
<div class="divEl">
<p id="pEl">Параграф 1</p>
<p class="second">Параграф 2</p>
<p class='third' id="third">Параграф 3</p>
</div>
<script type='text/javascript'>
// здесь будет ваш javascript код
</script>
</body>
</html>
Примеры получения каждого элемента документа:
$(document.body) - элемент body
$("div") - селектор возвращает все элементы div
$("p") или $("div p") - все параграфы p (3 штуки)
$("div > p") - возвращает параграфы, которые являются непосредственными дочерними нодами элемента div
$("p:first") - параграф №1
$("#pEl") или $("p#pEl") - возвратит параграф с идентификатором (id) "pEl"
$("p.second") - возратит параграф с классом "second"
$("p:eq(1)") - возвратит параграф с индексом 1 (индексы начинаются с 0, возвратится параграф №2)
$("p:last") - возвратит последний параграф
$("p.third#third") - возвратит параграф №3
Обратите внимание как легко найти нужный нам элемент. Забудьте про document.getElementById("id") и document.getElementsByTagName("p"), они нам больше не понадобятся.
Пример 2
Рассмотрим более сильные возможности jQuery. Для этого нарисуем таблицу
| Хедер 1 | Хедер 2 |
|---|---|
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
| Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 |
В этом примере я использовал селектор ":odd", который выбирает все нечетные элементы и применил его к рядкам таблицы (тегам tr). ":even" в свою очередь выбирает четные (0, 2, 4, ...).
И так нам надо выбрать все нечетные рядки таблицы, но мы не хотим чтобы первый рядок, который является хедером (элементы th) менял свой цвет и полосы начинались с третьего рядка. В этом случае нам пригодится селектор ":not(selector)". Используется он так:
$("table tr:not(:first):odd") - выбираем все четные элементы tr кроме первого
Вот исходный javascript:
$("button").toggle(function() {
$("table tr:not(:first):odd").css("background", "#eee");
// 1-е нажатие, проставляем серый фон
},function() {
$("table tr:not(:first)").css("background", "none");
// 2-е нажатие, убираем фон со всех tr
});
Пример 3 - работа с формами
На сайте jQuery в разделе селекторов есть отдельный подраздел, посвященный работе с формами. Селекторы предоставляют удобную работату с чекбоксами, кнопками, полями ввода и так далее. Нарисуем форму:
Далее приведен список jQuery селекторов, которые я использовал для получения данных с формы:
$("form :checked") - выбирает все чекбоксы, которые отмечены
$("form input[type='submit']") - выбирает инпуты типа submit
(данный селектор может выбирать элементы по любому атрибуту не только в форме)
$("form :text") - выбирает все элементы инпут типа text
$("form :input") - выбирает все инпуты, текстовые поля, селекты и кнопки
Ну вот и все, что я хотел рассказать. Список остальных, не менее полезных селекторов, можно найти на официальном сайте jQuery. Желаю удачи в изучении данной темы. Буду рад увидеть ваши мнения и мои очепатки в комментариях :)
