Селекторы и фильтры jQuery

В прошлых уроках мы разбирали вопрос общих понятий jQuery и способов его подключения.
В этой статье речь пойдёт об применении селекторов в jQuery (CSS и XPath), которые позволяют с лёгкостью и точностью выбрать один или несколько элементов DOM. К каждому селектору будет приведён код, пример применения. Использование jQuery селекторов не вызывает проблем с работой в старый браузерах, например IE 6, так как содержит в себе механизмы работы CSS 1-3.

1. Селекторы
2. Иерархические селекторы в jQuery
3. Базовые фильтры
3. Пример работы селекторов jQuery

Структура кода jQuery

Знак доллара $ - обозначает использование jQuery, selector - элемент DOM с которым работаем и специальная функция jQuery с её параметрами (например, анимация, развёртывание, перемещение и тд).

Пример jQuery кода

$(selector).function(parameters);

Селекторы в jQuery

В данном уроке мы остановимся подробно на вопросе селекторов. Что же это такое?

Селектор (от англ. select - выбирать) - это элементы DOM (объектной модели документа, например, теги или специально размеченные блоки), к которым мы обращаемся с запросом. Данное понятие существует и в JavaScript, и в CSS, и других языках, где нужно выбрать конкретный элемент и поработать с его свойствами.

Идентификаторы (id).

Если Вы хотите поработать с конкретным элементом, и только один раз (в теории, так как на практике некоторые браузеры не побрезгуют повторным использованием идентификатора), то присваиваем ему уникальный id.

Код HTML

<div id="special"></div>

#id - выбирает единственный элемент с переданным идентификатором (id). В данном случае special

Код jQuery

<script type="text/javascript">
$("#special").css("border", "1px solid black");
</script>

В дальнейшем буду писать без тегов <script>, надеюсь понятно, что JavaScript надо заключать именно в них. В примере мы выбираем элемент с id special, в данном случае это div. В нём мы используем функцию css и создаём чёрную непрерывную (solid) границу (border) в 1 пиксель.



Классы (class).

.class - выбираем все элементы с указанным классом. Всё правильно, их может быть несколько. Главное, чтобы название класса было одинаковым.

Код HTML

<div class="spec_class">Первый блок</div>
<div class="spec_class">Второй блок</div>

Как видите, элемента (div) два и классы у них одинаковые.

Код jQuery

$(".spec_class").css("border", "1px solid red");

У всех элементов, где значение класса spec_class также создаются такие же границы, как и в прошлом примере, но уже красные.

Элементы (elements).

Выбираются все элемента определённого типа. Это либо body, либо все div, либо все table и так далее.

Код jQuery

$("div").css("border", "1px solid green");

У всех div появится зелёная рамка.

* (все элементы) - выбираем абсолютно все элементы. Даже head и body.

Код jQuery

$("*").css("border", "1px solid blue");

У всех элементов Вашего документа появится синяя рамка.

$("*", document.body).css("border", "2px solid black");

Выбираем все элементы в body и делаем им чёрную границу в 2 пикселя.

По типу: selector1, selector2, ..., selectorN - перечисляем все элементы. Ниже интересный пример совместного использования селекторов.

Код jQuery

$("div, span, p.spec_class").css("border", "1px solid red");

Выбирает все элементы div, span и p, у которых указан класс spec_class. Все селекторы просто указывается через запятую.

Иерархические селекторы в jQuery

ancestor descendant

Выбирается главный элемент (родительский элемент) и элементы включённые в него (потомки). Рассмотрим на примере ниже родителя form и потомков select.

Код jQuery

$("form select").css("border", "1px dashed black");

У всех элементов select, потомков form будет установлена чёрная пунктирная граница.

parent - child

Теперь выберем всех потомков родителького элемента.

Код jQuery

$("#id > *").css("border", "1px double black");

В начале выбираем всех наследников элемента с идентификатором id, а потом создаём им двойную границу чёрного цвета.

prev и next (предыдущий и следующий)

Указываем элементы, идущие следующими (next) за элементом, обозначенным в качестве предыдущего (prev).

Код jQuery

$("label + input").css("color", "blue").val("Готово!");

Выбираем элементы input, идущие за label. Устанавливаем им свойства CSS - цвет в форме чёрного цвета, а значение (.val) установлено Готово!

prev ~ siblings

Теперь работаем с сестринскими элементами. Выюираем всех сестёр, следующих за предыдущим элементом (prev).

Код jQuery

$("#prev ~ div").css("border", "3px groove blue");

Ищем все элементы div, которые являются сестринскими по отношению друг к другу и следуют сразу за элементом с идентификатором #prev. Обратите внимание, что в примере не будут отобраны элементы span, поскольку отбор идет только для элементов div.

Базовые фильтры

:first

Будет выбран первый элемент с указанным селектором.

Код jQuery

$("tr:first").css("font-style", "bold");

В первой строке (tr) в таблице текст будет выделен полужирным (bold).

:last

Теперь будем выбирать последний элемент с указанным селектором.

Код jQuery

$("tr:last").css({backgroundColor: "yellow",fontWeight: "bolder"});

Находим последнюю строчку (tr) в таблице и красим фон в жёлтый цвет и также устанавливаем жирный шрифт (bolder).

:not(selector)

Используя отрицание отфильтровывает элементы. Выбираем все input, в которых не стоит флажка (checkbox), а также span, следующие за ними

Код jQuery

$("input:not(:checked) + span").css("background-color", "yellow");

Значение чекбоксов при этом не меняется.

:even

Внимание! Интересный пример, который применяет каждый второй в своей практике. Как выбрать чётный или нечётный элементы? Нужно затем, чтобы строки в тексте или даже коде делать читаемыми. Стартовое значение 0.

Код jQuery

$("tr:even").css("background-color", "#с1с1с1");

Отбираем чётные строки в таблице. Выделена будет первая, третья и тд строки. Внимание! Отсчёт идёт по индексам, а в них первая строка имеет значение 0. Далее отбираются строки с индексами 0, 2, 4 и т.д.).

:оdd

Теперь выбираем нечётные элементы. Считается значение индекса, начиная с 0. Соответственно будут выбраны значения 1,3,5,7 и тд. Это соответствует 2,4,6 и тд строчкам, так как их отсчёт идёт по факту, с первой.

Код jQuery

$("tr:odd").css("background-color", "#с1с1с1");

Фон нечётных строк окрашиваем в серый.

:eq(index)

Выбираем конкретный индекс элемента. В примере покрасим только одну строку таблицы.

Код jQuery

$("td:eq(2)").css("color", "blue");

Выбираем по индексу элемент 2. Напоминаю, это будет 3-я строка, так как тэо будет третий по счёт индекс (0,1,2).

:gt(index)

Теперь выбираем значения индекса, которые больше указанного в селекторе.

Код jQuery

$("td:gt(4)").css("text-decoration", "line-through");

Выбираем строки в таблице, индекс элемента которых больше 4, то есть их индекс равен 5,6 и тд. Это соответствует 6, 7 и тд встречающимся элементам, в нашем случае строкам таблицы.

:lt(index)

Теперь выбираем значения индекса, которые меньше указанного в селекторе.

Код jQuery

$("td:lt(3)").css("color", "red");

Выбираются все элементы td с индексом мНапример ищем все элементы TD, с индексом меньше 3. Поскольку отсчёт, ещё раз напоминаю, ведётся с нуля, то это строки таблицы (td) 1,2,3.

:header

Будут выбраны все элементы, которые являются заголовками (h1,h2,h3 и тд)

Код jQuery

$(":header").css({ background:'#c1c1c1', color:'#0085cc' });

Для всех заголовков (элементов h) мы установим синий шрифт и светло-сервый фон.

:animated

Будут отобраны все элементы, являющиеся в тот момент анимированными.

Код HTML

<button onclick="animateIt()">Сделать первый div красным</button>

Код jQuery

$("#run").click(function(){
  $("div:animated").toggleClass("colored");
});
function animateIt() {
  $("#mover").slideToggle("slow", animateIt);
}
animateIt();

Здесь пример немного посложнее. После клика по кнопке меняем цвет анимированного элемента (div). С не анимированными элементами изменений не происходит.

Пример работы селекторов jQuery

Рассмотрим простой пример работы селекторов в jQuery. Файл полностью готов к работе, достаточно просто скопировать код целиком в созданный html-файл. Бибилотека в примере подключается с сервера Google, поэтому для корректной работы файла потребуется подключение к интернету. Под кодом есть Демо-версия для просмотра.

<html> 
<head> 
<title>jQuery</title> 
<style>
#polosa1{ position: relative; background:white; width: 200px; height: 50px; border-top: solid 1px #000; }
#polosa2{ position: relative; background:blue; width: 200px; height: 50px; }
#polosa3{ position: relative; background:red; width: 200px; height: 50px; border-bottom: solid 1px #000; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript">
function addFlag1(){ 
$("div:eq(0)").css("background", "white");
$("div:eq(1)").css("background", "green");
$("div:eq(2)").css("background", "red");
}
function addFlag2(){ 
$("#polosa1, #polosa3").css("background", "red");
$("#polosa2").css("background", "white");
}
function addFlag3(){ 
$("div").css("background", "red");
}
</script> 

</head> 

<body> 

<h2>Пример работы селекторов jQuery</h2>

<div id="polosa1"></div>
<div id="polosa2"></div>
<div id="polosa3"></div>

<button onclick="addFlag1()">Флаг Болгарии</button>
<button onclick="addFlag2()">Флаг Австрии</button>
<button onclick="addFlag3()">Флаг СССР</button>

</body> 
</html>

Демонстрация Скачать исходники
Спасибо за внимание! Удачи в начинаниях!