Jquery поиск по тегу. Как использовать селекторы jQuery для выделения элементов страницы

Последнее обновление: 1.11.2015

Одним из важных функциональностей jQuery является выборка элементов. Чтобы что-то делать с элементами, манипулировать ими, применять к ним методы jQuery, нам надо сначала их получить. Библиотека предоставляет нам удобный способ выбора элементов, основанный на селекторах. Нам достаточно передать в функцию jQuery селектор и мы можем получить нужный нам элемент, который соответствует данному селектору. Например, если необходимо получить все эелементы img , то мы можем использовать следующее выражение: $("img") . В данном случае "img" будет выступать в качестве селектора.

Рассмотрим основные селекторы jQuery, которые используются для выборки элементов.

Базовые селекторы jQuery

Шаблон селектора	Описание
	Выборка всех элементов страницы	Например, выражение $("*").css("background-color", "red") окрасит все элементы страницы и саму страницу в красный цвет
	Выборка всех элементов с данным именем тега	$("img") выбирает все элементы img $("input") выбирает все элементы input
	Выборка элемента с данным значением атрибута id	$("#btn1") выбирает элемент, у которого значение id равно btn1 (например, )
	Выборка всех элементов с данным значением атрибута class	$(".redStyle") выбирает элементы, у которого значение class равно redStyle (например, )
$("selector1,selector2,selectorN")	Выборка всех элементов, которые соответствуют указанным селекторам	Например, у нас есть такой код: то селектор $(".apple, .orange") выберет элементы, выделенные жирным

Конкретизация выбора

Мы можем использовать сразу несколько селекторов, чтобы более детально настроить выборку элементов. Например, у нас есть такая веб-страница:

Словарь

	Перевод
	таблица
	яблоко

В данном случае мы используем селектор #tab, то есть выбираем нашу таблицу, которая имеет id=tab. Выражение css("background-color", "silver") устанавливает цвет элемента - в данном случае серебряный.

Запустив данную страничку в веб-браузере мы получим следующую картину:

Но мы также можем использовать набор селекторов, чтобы более детально произвести действие. Например, нам надо, чтобы была закрашена только первая строка, которая имеет атрибут class="tabhead". Тогда мы можем использовать следующий селектор: $("#tab .tabhead") . В этом случае селектор выберет элемент с class="tabhead", который находится в элементе с id="tab".

При этом мы можем для сужения выборки использовать множество различных селекторов, например: $("div#menu a.redStyle") . К примеру данный селектор может найти например такой элемент:

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

Шаблон селектора	Описание
родительский_селектор > дочерний_селектор	Выборка всех элементов, которые соответстуют второму селектору и являются дочерними для элементов первого селектора
селектор1 + селектор2	Выборка элементов с селектором "селектор2", которые располагаются непосредственно за элементами "селектор1". Причем оба элемента должны находиться на одном уровне	1.html 2.html 3.html 4.html 5.html 6.html Тогда селектор $(".closed + .open") выберет те ссылки, которые выделены жирным, так как эти элементы с атрибутом class="open" идут непосредственно за элементами с атрибутом class="closed".
селектор1 ~ селектор2	Выборка элементов с селектором "селектор2", которые располагаются на одном уровне с элементами с селектором "селектор1".	Например, у нас есть следующий блок ссылок: 1.html 2.html 3.html 4.html 5.html 6.html Тогда селектор $(".closed ~ .open") выберет те ссылки, которые выделены жирным, так как эти элементы с атрибутом class="open" находятся на одном уровне с элементами с атрибутом class="closed".

Селекторы атрибутов

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

Шаблон селектора	Описание
	Выборка всех элементов с атрибутом attr	Например, выражение $("a") выберет все элементы ссылок, которые имеют атрибут class
	Выборка всех элементов, у которых значение атрибута attr равно value	Например, выражение $("a") выберет все элементы ссылок, которые имеют атрибут class="redStyle"
	Выборка всех элементов, у которых значение атрибута attr начинается со строки value	Например, выражение $("a") выбрать элементы ссылок, которые имеют атрибут class="redStyle" , так как слово "redStyle" начинается на "red".
	Выборка всех элементов, у которых значение атрибута attr оканчивается на строку value	Например, выражение $("a") выбрать элементы ссылок, которые имеют атрибут class="redStyle" , так как слово "redStyle" оканчивается на "Style".
	Выборка всех элементов, у которых атрибут attr имеет список значений, разделенных пробелом, и одно из этих значений равно value	Например, выражение $("a") выбрать элементы ссылок, которые могут иметь следующее значение атрибута class="redStyle closed" .
	Выборка всех элементов, у которых значение атрибута attr имеет имеет подстроку value	Например, выражение $("a") выбрать элементы ссылок, которые могут иметь следующее значение атрибута class="redStyle1" .
	Выборка всех элементов, у которых значение атрибута attr представляет либо значение value, либо список значений, разделенных дефисами, и первое значение в этом списке равно value	Например, выражение $("a") выбрать элементы ссылок, которые могут иметь следующее значение атрибута class="red-freeStyle-closed" .

Контекст селекторов

Выше мы использовали такую запись для выборки элемента: $(селектор). Данное выражение просматривало все дерево DOM на соответствие элемента селектору. Однако мы можем ограничить поиск, применив контекст поиска. Контекст представляет собой селектор, в рамках которого наждо производить выборку элементов. Например, у нас есть такая веб-страница:

На странице у нас три ссылки, у всех у них определен один и тот же класс, но две из них находятся в элементе div и именно их мы хотим получить. Тогда мы используем выражение $(".open", "div#menu") - здесь второй параметр-селектор будет являться контекстом выборки. А результатом в данном случае будет следующая страница:

Важно не путать это выражение с выборкой по множеству селекторов, например, $(".open, div#menu ") - это разные выражения, которые будут давать разный результат.

Метод имеет три вариант использования:

Осуществляет поиск элементов внутри выбранных элементов, оставляя те, которые содержатся в заданном объекте jQuery.

Осуществляет поиск элемента element внутри выбранных элементов. Параметр element задается в виде DOM-элемента.

Примеры использования:

Вышеуказанные примеры хороши лишь в качестве демонстрации возможностей метода.find() . Например, искать span-элементы, лежащие внутри div"ов правильнее так:

$("div span")

Find() же удобно использовать, когда некоторые элементы уже найдены, и вам необходимо осуществить поиск элементов внутри них:

// найдем все ul-элементы на странице var $ulElements = $("ul"); // ----- какой то код... ----- // найдем li-элементы с классом userBox, внутри $ulElements $ulElements.find("li.userBox");

Так же, .find() удобен для использования в цепочках методов:

$("ul") // найдем все ul-элементы на странице.addClass("listElements") // добавим ul"ам класс listElements .find("li.userBox") // найдем li-элементы с классом userBox, внутри ul"ов.remove(); // и удалим их

jQuery поддерживает только те селекторы CSS, которые выбирают элементы DOM. Например, :visited , :hover и:first-line не поддерживаются.

Основные селекторы

Основные селекторы вам знакомы, если вы когда-нибудь создавали хотя бы один шаблон CSS. скорее всего, вы будете использовать данные селекторы на протяжении 90% всего времени работы с jQuery:

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

// Выбирает все div с классом.myClass, а также все параграфы var selectedElements = $("div.myClass, p");

Выбор элементов по атрибуту

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

Однако, иногда нужно выбрать определенный элемент, у которого нет класса или ID, и нет возможности просто добавить класс или ID к данному элементу в разметке. Такая ситуация может сложиться при использовании CMS с фиксированным шаблоном HTML или при работе с контентом, созданным пользователем.

В данной ситуации возможно сузить область выбора с помощью атрибута HTML элемента, который надо выбрать. Например, можно выбрать:

• Изображение по атрибуту src
• Ссылку по атрибуту href
• Все поля input формы, которые имеют атрибут type="checkbox"

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

Селектор	Описание	Пример
Атрибут	Выбирает элемент(ы), которые содержат определенный атрибут вне зависимости от значения атрибута.	$("div")
Атрибут равен	Выбирает элемент(ы), которые содержат заданный атрибут с заданным значением.	$("div")
Атрибут не равен	Выбирает элемент(ы), которые не содержат заданного атрибута или сожержат заданный атрибут, но его значение не соответствует заданному.	$("div")
Атрибут начинается с	Выбирает элемент(ы), которые содержат заданный атрибут, у которого значение начинается с заданной строки.	$("div")
Атрибут заканчивается	Выбирает элемент(ы), которые содержат атрибут, у которого значение заканчивается заданной строкой.	$("div")
Атрибут содержит	Выбирает элемент(ы), который содержит атрибут, у которого значение содержит заданную строку.	$("div")
Атрибут содержит слово	Выбирает элемент(ы), который содержит атрибут, у которого значение содержит заданное слово. "Слово" - это последовательность символов без пробелов.	$("div")
Атрибут содержит префикс	Выбирает элемент(ы), который содержит атрибут, у которого значение либо равно заданной строке, либо начинается с заданной строки с последующим дефисом.	$("div")

Вы можете комбинировать селекторы атрибутов для сужения области выбора. Например:

// Выбираем только те изображения, которые имеют ширину 300 px и высоту 200 px var selectedImages = $("img");

Селектор "Атрибут содержит префикс" выглядит неэффективно, но он сделан для обработки атрибутов языка, таких как lang="en" и lang="en-US" .

Выбор элементов по содержанию

Если нет возможности сузить область выбора по основным селекторам и по атрибутам, то можно "покопаться" в содержании элемента для определения, подходит он для выбора или нет. jQuery имеет 4 селектора для данного назначения:

Селектор	Описание	Пример
:contains()	Выбирает элемент(ы), которые содержат заданный текст. Текст может быть в самом элементе, так и в любом элементе внутри в выбранного элемента. Примечание: :contains() чувствительно к регистру - "Hello" не соответствует "hello" .	// Выбираем все div, которые содержат "myText": $("div:contains("myText")")
:has()	Выбирает элемент(ы), которые содержат 1 или более элементов, соответствующих заданной строке. Селектор просматривает на соответствие все элементы внутри заданного элемента.	// Выбираем все div, которые содержат параграфы: $("div:has(p)")
:parent	Выбирает элемент(ы), которые содержат другие элементы или текстовые узлы.	// Выбираем все div, которые содержат что-нибудь: $("div:parent")
:empty	Выбирает элемент(ы), которые не содержат других элементов или текстовых узлов.	// Выбираем все div, которые не содержат ничего: $("div:empty")

Следующий пример показывает, как использовать:contains() , наряду с селектором класса для выбора параграфов, которые имеют определенный класс, дополнительным условием служит условие содержания определенной строки (или строк):

// Выбираем все параграфы,которые имеют класс "intro" // и также содержат текст "MegaWidget" var selectedElements = $("p.intro:contains("MegaWidget")"); // Выбираем все параграфы, которые имеют класс "intro" // и содержат и "MegaWidget" и "WonderWidget" var selectedElements = $("p.intro:contains("MegaWidget"):contains("WonderWidget")");

Выбор элементов по иерархии

Другой способ выбрать элементы в jQuery - это рассмотреть, как они соотносятся друг к другу на странице. Вероятно, вы знаете много таких селекторов по работе с CSS:

Селектор	Описание	Пример
Ребенок	Выбирает элемент(ы), которые являются ребенком (прямым потомком) заданного предка(ов).	// Выбираем все элементы списка с классом "highlight", которые являются ребёнком для списка с ID "nav": $("ul#nav > li.highlight")
Потомок	Выбирает элемент(ы), которые являются потомками (детьми, внуками и так далее) заданного предка(ов). Это более общая форма селектора Ребенок.	// Выбираем все ссылки внутри списка с ID "nav": $("ul#nav a")
Следующий соседний элемент	Выбирает элемент(ы), который следует непосредственно за заданным элементом, где оба элемента имеют одного и того же родителя.	// Выбираем все параграфы, которые следуют непосредственно за заголовком H1: $("h1 + p")
Следующий сестринский элемент	Выбирает элемент(ы), который следует за другим элементом, где оба элемента являются потомками одного родителя. Это более обобщенная версия селектора следующий соседний элемент.	// Выбираем все ячейки таблицы после ячейки, которая содержит слово "Hello": $("td:contains("hello") ~ td")
Первый ребенок	Выбирает элемент(ы), который является первым ребенком его родителя.	// Выбираем первые пункты во всех списках на странице: $("li:first-child")
Последний ребенок	Выбирает элемент(ы), который является последним ребенком его родителя.	// Выбираем последние пункты во всех списках на странице: $("li:last-child")
N-й ребенок	Выбирает элемент(ы), который является n-м ребенком его родителя (смотри примечание ниже) .	// Выбираем третьи пункты во всех списках на странице: $("li:nth-child(3)")
Только ребенок	Выбирает элемент(ы), которые являются ребенком родителей, у которых есть только дети.	// Выбираем только элементы в списках с одним пунктом: $("li:only-child")

Кроме задания определенного номера ребенка с помощью:nth-child() , можно указывать even (для выбора всех детей с четными номерами), odd (для выбора всех детей с нечетными номерами), или выражение (например, "li:nth-child(3n+2)" выбирает каждый третий элемент в списке, а отсчет начинается со второго элемента).

В следующем примере выбирается первая ячейка всех нечетных строк в таблице, которая имеет id "myTable" :

Var selectedElements = $("table#myTable tr:nth-child(odd) > td:first-child");

Выбор полей формы

Элементы формы имеют некоторые специфические свойства, которые вынуждают использовать некоторые трюки для их выбора. Например, чекбоксы, наряду со многими другими типами полей, являются элементами input . Таким образом, чтобы выбрать чекбоксы в форме нужно использовать $("input") .

Аналогично, идентификация выбранных элементов в списке select или отмеченных чекбоксов в форме может быть утомительным занятием./

К счастью, jQuery обеспечивает несколько специфических для форм селекторов, которые облегчают жизнь:

Селектор	Описание	Пример
:button	Выбирает все кнопки формы.	$("input:button")
:checkbox	Выбирает все чекбоксы.	$("input:checkbox")
:file	Выбирает все поля загрузки фала.	$("input:file")
:image	Выбирает все поля ввода изображения.	$("input:image")
:password	Выбирает все поля пароля.	$("input:password")
:radio	Выбирает все радио кнопки.	$("input:radio")
:reset	Выбирает все кнопки перезагрузки формы.	$("input:reset")
:submit	Выбирает все кнопки отправки формы.	$("input:submit")
:text	Выбирает все поля ввода текста.	$("input:text")
:input	Выбирает все поля формы, включая элементы input , textarea , и select .	$(":input")
:checked	Выбирает все отмеченные чекбоксы радио кнопки.	$("input:checked")
:selected	Выбирает все элементы option .	$("option:selected")
:disabled	Выбирает все недоступные поля формы.	$("input:disabled")
:enabled	Выбирает все Доступные поля формы.	$("input:enabled")

Кроме того, что написано, можно использовать, например, $("input:checkbox") для выбора всех чекбоксов на странице. Однако, $("input:checkbox") действует быстрее, так как jQuery может использовать функцию JavaScript getElementsByTagName() для быстрого ограничения объемов поиска только элементами input . Это действительно для jQuery вообще - для ускорения кода всегда ограничивайте объем для работы селекторов там, где возможно. Например, $("*") действует очень медленно, так как jQuery должен найти каждый отдельный элемент на странице.

Следующий пример ищет форму, которая имеет атрибут action со значением "mailform.php" , затем выбирает все отмеченные радио кнопки в форме:

Var selectedElements = $("form input:radio:checked");

Выбор элементов по их положению

Иногда нужно выбрать элемент, про который известно, что он расположен в наборе ранее выбранных элементов. Например, нужно выделить первый параграф, который имеет класс "myClass" . Для усложнения примера допустим, что нужно выбрать все пункты в списке, который имеет класс "myClass" , а затем выбрать 5-й пункт из получившегося набора.

jQuery имеет семь селекторов, которые можно использовать для ограничения области поиска на основе позиции элемента:

Селектор	Описание	Примеры
:first	Выбирает первый элемент в наборе отобранных элементов.	// Выбираем первый параграф, который имеет класс "myClass": $("p.myClass:first")
:last	Выбирает последний элемент в наборе отобранных элементов.	// Выбираем последний параграф, который имеет класс "myClass": $("p.myClass:last")
:eq()	Выбирает единственный элемент в наборе отобранных элементов. Выбор элемента осуществляется по последовательному номеру индекса (0 = первый элемент, 1 = второй и так далее).	// Выбираем з-й параграф, который имеет класс "myClass": $("p.myClass:eq(2)")
:lt()	Выбирает элементы в наборе отобранных элементов, которые расположены перед элементом с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны первые 2 элемента (с индексами 0 и 1).	// /Выбираем первые 2 параграфа, которые имеют класс "myClass": $("p.myClass:lt(2)")
:gt()	Выбираем элементы в наборе отобранных элементов, которые расположены после элемента с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны все элементы после третьего.	// Выбираем все параграфы, которые имеют класс "myClass", за исключением первых трех: $("p.myClass:gt(2)")
:even	Выбирает все элементы с четными индексами в наборе отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 1-й, 3-й и так далее элементы.	// Выбираем 1й, 3й, 5й, и так далее параграфы, которые имеют класс "myClass": $("p.myClass:even")
:odd	Выбирает все элементы с нечетными индексами в наборе уже отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 2-й, 4-й и так далее элементы	// Выбираем 2й, 4й, 6й, и так далее параграфы, которые имеют класс "myClass": $("p.myClass:odd")

Отметим, что данные селекторы не работают также как:first-child , :last-child , и так далее. Например, li.myClass:first-child выбирает только пункт списка с классом "myClass" , который является первым пунктом в соответствующем списке. А li.myClass:first находит все пункты списка на странице, которые имеют класс "myClass" , а затем выбирает первый пункт списка в наборе результата поиска.

В следующем примере выбираются все ячейки в первых двух строках таблицы, которая имеет ID "myTable" :

Var selectedElements = $("table#myTable tr:lt(2) > td");

Другие полезные селекторы jQuery

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

Селектор	Описание	Пример
:not()	Выбирает все элементы, которые не соответствуют заданному слектору.	// Выбираем все параграфы, которые не имеют класса "myClass": $("p:not(.myClass)")
:animated	Выбирает все элементы, которые в текущий момент анимируются jQuery (например, затухают).	// Выбираем все div, которые анимируются в текущий момент: $("div:animated")
:hidden	Выбирает все скрытые элементы. Элемент полагается "скрытым" если: его свойство display установлено в значение "none" ; поля формы - type "hidden" ; если ширина и высота установлены в 0; если один из элементов, которые содержат заданный элемент является скрытым. Однако, элемент не считается "скрытым" если только его свойство visibility установлено в значение "hidden" .	// Выбираем все скрытые праграфы, которые имеют класс "myClass": $("p.myClass:hidden")
:visible	Выбирает все видимые элементы. Это противоположный селектор для:hidden .	// Выбираем все видимые параграфы, которые имеют класс "myClass": $("p.myClass:visible")
:header	выбирает все элементы заголовков (h1 , h2 и так далее).	// Выбираем все заголовки, которые имеют класс "myClass": $(":header.myClass")

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

Var selectedElements = $(":header:not(h1)");

Заключение

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

• Основные селекторы , которые будут использоваться большую часть времени работы над проектом
• Селекторы атрибутов для выбора элементов на основе имен атрибутов и их значений
• Селекторы содержания , которые позволяют выбирать элементы на основе их содержания
• Иерархические селекторы , которые можно использовать для выбора элементов на основе их взаимоотношений с другими элементами на странице
• Селекторы полей формы , которые обеспечивают простой способ выбора различных элементов полей формы
• Селекторы положения для выбора элементов в соответствии с их положением в наборе элементов
• Дополнительные селекторы , такие как:not() для выбора элементов, не соответствующих селектору, и:animated для выбора анимированных элементов