Jquery выбор элементов. JQuery селекторы. Другие примеры JQuery селекторы

Сохраните эту страницу для тестирования приведенных ниже примеров.

В большинстве случаев работа с jQuery осуществляется в два этапа, следуя одному и тому же шаблону:

первый этап заключается в выборе с помощью функции $() начального набора элементов страницы, соответствующих определенному критерию отбора, которые возвращаются в виде содержащего их объекта jQuery;

а второй - в выполнении над каждым элементом набора одной или нескольких операций, приводящих к созданию конечного набора.

В этой статье мы сосредоточим свое внимание на первом из этапов. Будут рассмотрены методы jQuery, позволяющие управлять выбранным набором и корректировать его состав в точном соответствии с конкретными задачами. Обычно исходят из некоего предварительно выбранного набора элементов, воздействуя на который, добиваются того, чтобы в нем остались лишь действительно необходимые элементы.

Расширение набора выбранных элементов

Метод add() позволяет добавить в существующий объект jQuery дополнительные элементы. Различные варианты вызова этого метода приведены в таблице ниже:

Подобно многим методам jQuery, метод add() возвращает объект jQuery, который можно использовать для вызова других методов, в том числе и для последующих вызовов метода add(). Пример использования метода add() для расширения ранее найденного набора приведен в ниже:

$(function() { var labelElems = document.getElementsByTagName("label"); var jq = $("img"); $("img:even").add("img").add(jq) .add(labelElems).css("border", "thick double red"); });

В этом сценарии для добавления элементов в первоначальный набор используются три подхода: с помощью другого селектора, с помощью объектов HTMLElement и с помощью другого объекта jQuery. Построив нужный набор объектов, мы вызываем метод css(), устанавливая для их свойств border значения, обеспечивающие окружение надписей рамками, прорисованными толстыми двойными линиями, как показано на рисунке:

Сужение набора выбранных элементов

Существует ряд методов, позволяющих удалять элементы из существующего набора. Их краткое описание приведено в таблице ниже. Каждый из этих методов возвращает новый объект jQuery, содержащий урезанный набор элементов. Объект jQuery, для которого вызывается метод, остается неизменным:

Методы фильтрации элементов Метод Описание

eq(индекс)	Исключает из набора все элементы, кроме элемента с указанным индексом
filter(условие)	Исключает из набора элементы, не соответствующие указанному условию. Подробное описание допустимых типов аргументов приводится далее
first()	Исключает из набора все элементы, кроме первого
has(), has(jQuery), has(HTMLElement), has(HTMLElement)	Исключает из набора элементы, у которых отсутствуют потомки, соответствующие указанному селектору или объекту jQuery, или потомки, не включающие указанные Объекты HTMLElement
last()	Исключает из набора все элементы, кроме последнего
not(условие)	Исключает из набора все элементы, соответствующие указанному условию
slice(начало, конец)	Исключает из набора все элементы, индексы которых выходят за пределы указанного диапазона

Сужение набора до одного элемента

Простейшими методами, с помощью которых можно сократить набор выбранных элементов, являются методы first() , last() и eq() . Эти три метода позволяют выбрать конкретный элемент на основании его позиции в наборе элементов, содержащихся в объекте jQuery. Соответствующий пример приведен ниже:

$(function() { var jq = $("label"); // выбор первого элемента и воздействие на него jq.first().css("border", "thick double red"); // выбор последнего элемента и воздействие на него jq.last().css("border", "thick double green"); // выбор элемента с указанным индексом и воздействие на него jq.eq(2).css("border", "thick double black"); jq.eq(-2).css("border", "thick double black"); });

Обратите внимание, что метод eq() вызывается дважды. Если аргумент имеет положительное значение, отсчет индексов начинается с первого элемента в наборе, содержащемся в объекте jQuery. В случае отрицательного значения аргумента индексы отсчитываются в обратном направлении, начиная с последнего элемента. Результат работы сценария приведен на рисунке:

Сужение набора до элементов, индексы которых принадлежат к заданному диапазону

Если необходимо оставить в выбранном наборе лишь элементы, индексы которых принадлежат к заданному диапазону, используется метод slice() . Соответствующий пример приведен ниже:

$(function() { var jq = $("label"); jq.slice(0, 2).css("border", "thick double black"); jq.slice(4).css("border", "thick solid red"); });

В качестве аргументов метод slice() принимает значения начального и конечного индексов. Отсчет индексов ведется от нуля, причем элемент, которому соответствует конечный индекс, в результирующий набор не включается. Поэтому аргументам 0 и 2 соответствует выбор первых двух элементов.

Если второй аргумент опущен, то выбор элементов продолжается до конца существующего набора. Следовательно, использованию единственного аргумента 4 для набора из шести элементов соответствует выбор последних двух элементов (с индексами 4 и 5). Результат представлен на рисунке:

Фильтрация элементов

Метод filter() позволяет задать условие. Элементы, не удовлетворяющие заданному условию, исключаются из набора. Возможные варианты использования метода filter(), соответствующие различным способам задания условия, описаны в таблице ниже:

Пример использования всех четырех вариантов задания аргументов метода filter() приведен ниже:

$(function() { // выборка элементов, в значении атрибута src которых // содержится строка "astor" $("img").filter("").css("border", "thick double red"); // выборка элементов, содержащих строку "daffodil" var jq = $(""); $("label").filter(jq).css("color", "blue"); // выборка элементов, являющихся указанным элементом var elem = document.getElementsByTagName("label"); $("label").filter(elem).css("font-size", "1.5em"); // фильтрация элементов с использованием функции $("img").filter(function(index) { return this.getAttribute("src").indexOf("peony.png") > -1 || index == 5; }).css("border", "thick solid red") });

Первые три методики не нуждаются в особых пояснениях. Фильтры в них определяются с помощью селектора, другого объекта jQuery и объекта HTMLElement. Четвертая методика, основанная на использовании функции, требует дополнительных пояснений.

Предоставляемая jQuery функция выполняется по одному разу для каждого элемента набора, содержащегося в объекте jQuery. Если эта функция возвращает true, то элемент, для которого она была вызвана, остается в наборе. Если же возвращаемым значением является false, то элемент удаляется из набора. Функция принимает единственный аргумент - индекс элемента, для которого она вызывается. Кроме того, переменная this устанавливается так, что она указывает на текущий обрабатываемый объект HTMLElement. В данном примере значение true возвращается в тех случаях, когда атрибут src или индекс элемента имеют указанные значения.

Метод not() работает аналогично методу filter(), но обращает процесс фильтрации. Возможные варианты вызова метода not(), аналогичны вызовам метода filter().

Сужение набора до элементов, имеющих определенных потомков

Метод has() можно использовать для того, чтобы оставить в наборе выбранных элементов только те из них, у которых есть определенные потомки, указываемые либо с помощью селектора, либо с помощью одного или нескольких объектов HTMLElement. Пример использования метода has() приведен ниже:

$(function() { $("div.dcell").has("img").css("border", "thick solid red"); var jq = $(""); $("div.dcell").has(jq).css("border", "thick solid blue"); });

В этом сценарии из выбранного набора исключаются элементы, у которых отсутствуют определенные потомки. В первом случае, когда используется селектор, из набора удаляются элементы, не имеющие ни одного потомка img, атрибут src которого был бы равен astor. Во втором случае, когда используется объект jQuery, то же самое происходит с элементами, не имеющими ни одного потомка со значением атрибута for, содержащим букву р. Результат работы сценария показан на рисунке:

Преобразование набора выбранных элементов

Метод map() обеспечивает гибкий способ использования одного объекта jQuery для создания другого. В качестве аргумента методу map() передается функция. Эта функция вызывается для каждого из элементов, входящих в исходный объект jQuery, а возвращаемые ею объекты HTMLElement включаются в результирующий объект jQuery.

Пример использования метода map() приведен ниже:

$(function() { $("div.dcell").map(function(index, elem) { return elem.getElementsByTagName("img"); }).css("border", "thick solid red"); $("div.dcell").map(function(index, elem) { return $(elem).children(); }).css("border", "thick solid blue"); });

В этом сценарии выполняются две операции преобразования. Первая из них, в которой используется программный интерфейс DOM, возвращает первый из элементов img, встречающихся в каждом элементе набора. Вторая операция, в которой используются возможности объекта jQuery, возвращает первый элемент набора, содержащегося в объекте jQuery, который возвращается методом children() (этот метод возвращает дочерние узлы каждого из элементов, содержащихся в объекте jQuery).

Тестирование набора выбранных элементов

Чтобы выяснить, соответствует ли хотя бы один из выбранных элементов заданному условию, можно использовать метод is() . Возможные варианты использования метода is(), аналогичны методам фильтрации not() и filter().

Если в качестве аргумента передается функция, то jQuery вызывает эту функцию для каждого элемента в объекте jQuery, передавая ей индекс данного элемента в качестве аргумента и устанавливая переменную this так, чтобы она указывала на сам элемент. Пример использования метода is() приведен ниже:

$(function() { var isResult = $("img").is(function(index) { return this.getAttribute("src").indexOf("rose.png") != -1; }); console.log("Результат: " + isResult); });

В этом сценарии мы проверяем, содержит ли объект jQuery элемент со значением атрибута src, который включает строку "rose.png".

Возврат к предыдущему состоянию измененного набора выбранных элементов

В jQuery предусмотрено сохранение состояний выбранного набора элементов при его изменении путем вызова методов цепочки. Из этого обстоятельства можно извлечь выгоду с помощью двух методов, описанных в таблице ниже:

Метод end() можно использовать для возврата предыдущего выбранного набора, что позволяет выбрать некоторые элементы, расширить или сузить его, выполнить некоторые операции, а затем вернуться к исходному набору, как показано в примере ниже:

$(function() { $("label").first().css("border", "thick solid blue") .end().css("font-size", "1.5em"); });

В этом сценарии мы начинаем с того, что выбираем все элементы label в документе. Далее мы сужаем выборку, вызывая метод first() (для получения первого подходящего элемента), а затем устанавливаем значение CSS-свойства border с помощью метода css().

Следующим вызывается метод end() для возврата предыдущего выбранного набора (в результате чего вам вновь предоставляются все элементы label, а не только первый), а затем опять вызывается метод css(), на этот раз для установки значения свойства font-size. Результат выполнения сценария показан на рисунке.

jQuery - это Javascript библиотека, которая упрощает работу с DOM, событиями, CSS и AJAX, а также позволяет легко создавать анимации. Главная особенность jQuery - это кроссбраузерность (да, и Internet Explorer 6 тоже:).Слоган jQuery звучит так: "Write less, do more", что в переводе на русский означает "Пиши меньше, делай больше" (или "Тише едешь - дальше будешь" :). Эти слова идеально подходят к описанию этой библиотеки и полностью себя оправдывают.

Первые шаги с jQuery

Для начала Вам понадобится скачать одноименную библиотеку. Сделать это можно на официальном сайте jQuery . После этого следует подключить jQuery к Вашей HTML страничке. Сделать это можно с помощью добавления тега script в head документа:

Подключаем jQuery

После этого Вы уже можете начинать использовать jQuery.

Селекторы в jQuery

Пришло время рассказать о селекторах. Селекторы в jQuery - это те же самые селекторы CSS, только модифицированные. Модифицированные они потому, что программисты jQuery добавили много полезных селекторов для удобного поиска нужных элементов.

Рассмотрим пример кода:

Пример 1

Параграф 1

Параграф 2

Параграф 3

// здесь будет ваш javascript код

Примеры получения каждого элемента документа:

$(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 селекторы являются одним из наиболее важных частей библиотеки JQuery.

JQuery селекторы

JQuery селекторы позволяют выбирать и манипулировать HTML-элемент (ы).

JQuery селекторы используются для "найти" (или выберите) HTML элементы, основанные на их имя, ID, классы, типы, атрибуты, значения атрибутов и многое другое. Он основан на существующих CSS селекторов , а кроме того, у него есть некоторые собственные селекторы.

Все селекторы в JQuery начинаются с знака доллара и скобки: $ ().

Элемент выбора

Селектор JQuery элемент выбирает элементы на основе имени элемента.

Вы можете выбрать все элементы

На странице, как это:

пример

Когда пользователь нажимает на кнопку, все

Элементы будут скрыты:

#id Selector

Селектор #id JQuery использует атрибут идентификатор HTML-тега, чтобы найти определенный элемент.

Идентификатор должен быть уникальным в пределах страницы, так что вы должны использовать селектор #ID, если вы хотите, чтобы найти единственный, уникальный элемент.

Чтобы найти элемент с определенным идентификатором, написать хэш-символ, за которым следует идентификатор HTML-элемента:

пример

Когда пользователь нажимает на кнопку, элемент с идентификатором = "тест" будут скрыты:

.class Selector

Селектор класса Jquery находит элементы с определенным классом.

Чтобы найти элементы с определенным классом, написать период символа, за которым следует имя класса:

пример

Когда пользователь нажимает на кнопку, элементы с классом = "тест" будут скрыты:

Другие примеры JQuery селекторыSyntax Description Example elements elements

$("*")	Selects all elements	Try it
$(this)	Selects the current HTML element	Try it
$("p.intro")	Selects all Elements with class="intro"	Try it
$("p:first")	Selects the first Element	Try it
$("ul li:first")	Selects the first element of the first	Try it
$("ul li:first-child")	Selects the first element of every	Try it
$("")	Selects all elements with an href attribute	Try it
$("a")	Selects all elements with a target attribute value equal to "_blank"	Try it
$("a")	Selects all elements with a target attribute value NOT equal to "_blank"	Try it
$(":button")	Selects all elements and elements of type="button"	Try it
$("tr:even")	Selects all even
Try it
$("tr:odd")	Selects all odd
Try it

Функции в отдельном файле

Если ваш сайт содержит много страниц, и вы хотите, чтобы ваши функции Jquery будет легко поддерживать, вы можете поместить свои функции JQuery в отдельный файл.js.

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

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

Пример jQuery кода

$(selector).function(parameters);

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

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

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

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

Код HTML

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

Код jQuery

$("#special").css("border", "1px solid black");

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

Классы (class).

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

Код HTML

Первый блок
Второй блок
Как видите, элемента (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. Все селекторы просто указывается через запятую.

Иерархические селекторы в jQueryancestor 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).

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

Код jQuery

$("tr:last").css({backgroundColor: "yellow",fontWeight: "bolder"});
Находим последнюю строчку (tr) в таблице и красим фон в жёлтый цвет и также устанавливаем жирный шрифт (bolder).

:not(selector)

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

Код jQuery

$("input:not(:checked) + span").css("background-color", "yellow");
Значение чекбоксов при этом не меняется.

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

Код jQuery

$("tr:even").css("background-color", "#с1с1с1");
Отбираем чётные строки в таблице. Выделена будет первая, третья и тд строки. Внимание! Отсчёт идёт по индексам, а в них первая строка имеет значение 0. Далее отбираются строки с индексами 0, 2, 4 и т.д.).

Теперь выбираем нечётные элементы. Считается значение индекса, начиная с 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.

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

Код jQuery

$(":header").css({ background:"#c1c1c1", color:"#0085cc" });
Для всех заголовков (элементов h) мы установим синий шрифт и светло-сервый фон.

:animated

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

Код HTML

Сделать первый div красным
Код jQuery

$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
Здесь пример немного посложнее. После клика по кнопке меняем цвет анимированного элемента (div). С не анимированными элементами изменений не происходит.

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

jQuery

#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; }

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

Флаг Болгарии
Флаг Австрии
Флаг СССР

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