Главная»

Уроки»
jQuery»
Как использовать селекторы jQuery для выделения элементов страницы

Метки урока:
jquery
кодинг

Как использовать селекторы jQuery для выделения

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

Селекторы jQuery основаны на селекторах CSS, и если вы знаете CSS, то уже

имеет базовое представление об идее выбора элементов на странице.

В данном уроке мы рассмотрим селекторы, которые поддерживаются jQuery.

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

В урок включены следующие разделы:

Основные селекторы
Выбор элементов по атрибуту
Выбор элементов по содержанию
Выбор элементов по иерархии
Выбор полей формы
Выбор элементов по их положению
Другие полезные селекторы
Здесь приводится полный список всех селекторов, которые поддерживаются в
jQuery.

jQuery поддерживает только те селекторы CSS, которые выбирают элементы

DOM. Например, :visited, :hover и :first-line не поддерживаются.

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

Селектор Описание Пример

Выбирает все элементы на странице, включая
Все $("*")
head, body и так далее.
$("p")
Элемент Выбирает все элементы с заданным тегом.
$("div")
Выбирает все элементы с заданным именем $(".myClass")
Класс
класса. $("p.myClass")
$("#myID")
ID Выбирает один элемент с заданным атрибутом id.
$("p.#myID")

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

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

view source

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

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

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

В данной ситуации возможно сузить область выбора с помощью атрибута HTML

элемента, который надо выбрать. Например, можно выбрать:

Изображение по атрибуту src

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

...и так далее.

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

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

Селектор Описание Пример

Выбирает элемент(ы),
которые содержат
Атрибут определенный атрибут $("div[attributeName]")
вне зависимости от
значения атрибута.
Выбирает элемент(ы),
которые содержат
Атрибут равен $("div[attributeName='value']")
заданный атрибут с
заданным значением.
Выбирает элемент(ы),
которые не содержат
заданного атрибута
Атрибут не или сожержат
$("div[attributeName!='value']")
равен заданный атрибут, но
его значение не
соответствует
заданному.
Атрибут Выбирает элемент(ы), $("div[attributeName^='value']")
начинается с которые содержат
заданный атрибут, у
которого значение
 начинается с заданной
строки.
Выбирает элемент(ы),
которые содержат
Атрибут атрибут, у которого
$("div[attributeName$='value']")
заканчивается значение
заканчивается
заданной строкой.
Выбирает элемент(ы),
который содержит
Атрибут
атрибут, у которого $("div[attributeName*='value']")
содержит
значение содержит
заданную строку.
Выбирает элемент(ы),
который содержит
атрибут, у которого
Атрибут значение содержит
содержит заданное слово. $("div[attributeName~='value']")
слово "Слово" - это
последовательность
символов без
пробелов.
Выбирает элемент(ы),
который содержит
атрибут, у которого
Атрибут
значение либо равно
содержит $("div[attributeName|='value']")
заданной строке, либо
префикс
начинается с заданной
строки с последующим
дефисом.

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

Например:

view source

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

Селектор "Атрибут содержит префикс" выглядит неэффективно, но он сделан

для обработки атрибутов языка, таких как lang="en" и lang="en-US".

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

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

Селектор Описание Пример

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

view source

print?
1 // Выбираем все параграфы,которые имеют класс "intro"
2 // и также содержат текст "MegaWidget"
3 var selectedElements = $("p.intro:contains('MegaWidget')");
4
5 // Выбираем все параграфы, которые имеют класс "intro"
6 // и содержат и "MegaWidget" и "WonderWidget"
var selectedElements =
7
$("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":

view source

print?
1 var selectedElements = $("table#myTable tr:nth-child(odd) >
td:first-child");

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

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

Аналогично, идентификация выбранных элементов в списке 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")
элементы input, textarea, и select.
Выбирает все отмеченные чекбоксы
: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", затем выбирает все отмеченные радио кнопки в форме:

view source

print?
var selectedElements = $("form[action='mailform.php']
1
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)")
Выбирает элементы в наборе отобранных
// /Выбираем первые
элементов, которые расположены перед
2 параграфа, которые
элементом с заданным индексом.
:lt() имеют класс
Например, если задан индекс 2 (то есть 3-й
"myClass":
элемент), то будут выбраны первые 2
$("p.myClass:lt(2)")
элемента (с индексами 0 и 1).
// Выбираем все
Выбираем элементы в наборе отобранных
параграфы, которые
элементов, которые расположены после
имеют класс
элемента с заданным индексом. Например,
:gt() "myClass", за
если задан индекс 2 (то есть 3-й элемент),
исключением первых
то будут выбраны все элементы после
трех:
третьего.
$("p.myClass:gt(2)")
Выбирает все элементы с четными // Выбираем 1й, 3й,
индексами в наборе отобранных 5й, и так далее
элементов. Заметьте, что индексы параграфы, которые
:even
начинаются с 0, таким образом в имеют класс
действительности отбираются 1-й, 3-й и так "myClass":
далее элементы. $("p.myClass:even")
Выбирает все элементы с нечетными // Выбираем 2й, 4й,
индексами в наборе уже отобранных 6й, и так далее
элементов. Заметьте, что индексы параграфы, которые
:odd
начинаются с 0, таким образом в имеют класс
действительности отбираются 2-й, 4-й и так "myClass":
далее элементы $("p.myClass:odd")

Отметим, что данные селекторы не работают также как :first-child, :last-

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

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

которая имеет ID "myTable":
view source

print?
1 var selectedElements = $("table#myTable tr:lt(2) > td");

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

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

Селектор Описание Пример

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

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

заголовков h1:

view source

print?
1 var selectedElements = $(":header:not(h1)");

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

Основные селекторы, которые будут использоваться большую часть

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

Данный урок подготовлен для вас командой сайта ruseller.com

Источник урока: www.elated.com/ar cles/jquery-selectors/
Перевел: Сергей Фастунов
Урок создан: 19 Августа 2010
Просмотров: 283994
Правила перепечатки
© 2020 Евгений Попов. Все права защищены. Служба поддержки
Сайт мониторится с помощью сервиса ping-admin :)