jQuery для начинающих. Часть 4. Селекторы / Habr
Последнее время мне всё чаще задают вопрос как выбрать тот или иной элемент в DOM’е, и данный пост будет сплошь посвящен селекторам в jQuery, возможно большинство из них Вы видели в различных источниках, но собрать их воедино все же стоит…
Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)
Селекторы в jQuery базируются на CSS селекторах, а так же поддерживают XPath. Дабы не закапываться в документацию буду приводить примеры, много примеров. Но начнем с самых азов…
Для начала нам понадобиться макет HTML странички (вполне типичный макет):
<div id=»header»>
<h2><a href=»/» title=»homepage»>Title</a></h2>
<h3>Sub-title <span>small description</span></h3>
</div>
<div id=»wrapper»>
<div id=»content»>
<div class=»post»><h4>Post Title</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor.</p>
<span>Image Title</span>
<img src=»/image1.jpg» alt=»Image Alt Text»/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor.</p>
<span class=»inner-banner»>Banner Text</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor.</p>
</div>
<span id=»banner»><img src=»/banner1.jpg» alt=»Big Banner»/></span>
<div class=»post»>
<h4>Post Title</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor.</p>
<span>Image Title</span>
<img src=»/image2.jpg» alt=»Image Alt Text»/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,vel varius augue tortor vel tortor.</p>
<span class=»inner-banner»>Banner Text</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tempus sapien.
Cras condimentum, tellus id lacinia fermentum, tortor lectus tincidunt sapien,
vel varius augue tortor vel tortor.</p>
</div>
</div>
</div>
<div id=»sidebar»>
<ul>
<li><a href=»/item0.html»>Menu Item 0</a></li>
<li><a href=»/item1.html»>Menu Item 1</a></li>
<li><a href=»/item2.html»>Menu Item 2</a></li>
<li><a href=»/item3.html»>Menu Item 3</a></li>
</ul>
</div>
<div id=»footer»>
Copyright © 2008
</div>
А теперь приступим к выборкам:
Выбор элементов по Id либо ClassName аналогично используемому в CSS
$(‘#sidebar’); // выбор элемента с id = sidebar
$(‘.post’); // выбор элементов с class = post
$(‘div#sidebar’); // выбор элемента div с id = sidebar
$(‘div.post’); // выбор элементов div с class = post
Примечание: используйте валидные имена классов и id
Бродим по иерархии объектов в DOM’е
Простой выбор потомков:
$(‘div span’); // выбор всех span элементов в элементах div
Аналогичный результат так же можно получить используя следующую конструкцию:
$(‘div’).find(‘span’); // выбор всех span элементов в элементах div
Выбор только непосредственных потомков
$(‘div > span’); // выбор всех span элементов в элементах div, где span является прямым потомком div’a
Как же лучше поступить, что работает быстрее? Надо бы протестировать…
Так же селекторы можно группировать:
$(‘div, span’); // выбор всех div и span элементов
Поиск по соседям:
$(‘span + img’); // выбор всех img элементов перед которыми идут span элементы
$(‘span ~ img’); // выбор всех img элементов после первого элемента span
$(‘#banner’).prev(); // выбор предыдущего элемента от найденого
$(‘#banner’).next(); // выбор следующего элемента от найденого
Выбор всех элементов, всех предков, всех потомков
$(‘*’); // выбор всех элементов
$(‘p > *’); // выбор всех потомков элементов p
$(‘p’).children(); // —
$(‘p’).parent(); // выбор всех прямых предков элементов p
$(‘* > p’); // выбор всех предков элементов p (скорей всего Вам не понадобится)
$(‘p’).parents(); // —
$(‘p’).parents(‘div’); // выбор всех предков элемента p которые есть div (parents принимает в качестве параметра селектор)
Фильтры
Фильтров в jQuery реализовано достаточно много, и пользоваться ими одно удовольствие:
$(‘div:first’); // выбираем первый div в доме
$(‘div:last’); // выбираем последний div в доме
$(‘div:not(.red)’); // выбираем div’ы у которых нету класса red
$(‘div:even’); // выбираем четные div’ы
$(‘div:odd’); // выбираем нечетные div’ы
$(‘div:eq(N)’); // выбираем div идущим под номером N в DOMe
$(‘div:gt(N)’); // выбираем div’ы, индекс которых больше чем N в DOMe
$(‘div:lt(N)’); // выбираем div’ы, индекс которых меньше чем N в DOMe
$(‘:header’); // выбо заголовоков h2, h3, h4 и т.д.
$(‘div:animated’); // выбор элементов с активной анимацией
Фильтры по контенту и видимости:
$(‘div:contains(text)’); // выбираем div’ы содержащие текст
$(‘div:empty’); // выбираем пустые div’ы
$(‘div:has(p)’); // выбираем div’ы которые содержат p
$(‘div.red’).filter(‘.bold’) // выбираем div’ы которые содержат класс red и класс bold
$(‘div:hidden’); // выбираем скрытые div’ы
$(‘div:visible’); // выбираем видимые div’ы
Так же есть фильтры по атрибутам:
$(«div[id]»); // выбор всех div с атрибутом id
$(«div[title=’my’]»); // выбор всех div с атрибутом title=my
$(«div[title!=’my’]»); // выбор всех div с атрибутом title не равного my
$(«div[title^=’my’]»); // выбор всех div с атрибутом title начинающихся с my
// <div title=»myCat»>,<div title=»myCoffee»>, <div title=»my…»>
$(«div[title$=’my’]»); // выбор всех div с атрибутом title заканчивающихся на my
// <div title=»itsmy»>,<div title=»somy»>, <div title=»…my»>
$(«div[title*=’my’]»); // выбор всех div с атрибутом title содержащим my
// <div title=»itsmy»>,<div title=»myCat»>, <div title=»its my cat»>,<div title=»…my…»>
так же стоит отдельно отметить следующий фильтр:
$(«a[rel~=’external’]»); // выбор всех A с атрибутом rel содержащим external в списке значений разделенных пробелом
В результате его работы будут выбраны следующие теги:
<a href=»» rel=»external»>link</a> — да
<a href=»» rel=»nofollow external»>link</a> — да
<a href=»» rel=»external nofollow»>link</a> — да
<a href=»» rel=»friend external follow»>link</a> — да
<a href=»» rel=»external-link»>link</a> — нет
Для работы с элементами форм есть ряд селекторов позволяющий выбирать по типу элемента и фильтров — enabled/disabled/selected/checked:
$(«:text»); // выбор всех input элементов с типом =text
$(«:radio»); // выбор всех input элементов с типом =radio
// и так далее
$(«input:enabled»); // выбор всех включенных элементов input
$(«input:checked»); // выбор всех отмеченных чекбоксов
Фильтры так же можно группировать:
$(«div[name=city]:visible:has(p)»); // выбор видимого div’a с именем city, который содержит тег p
Приведу так же ряд полезных селекторов для работы с элементами форм:
$(«form select[name=city] option:selected»).val(); // получение выбранного(-ых) элементов в селекте city
$(«form :radio[name=some]:checked»).val(); // получение выбранного значения радиобатона с именем some
$(«form :checkbox:checked»); // выбор всех выбранных чекбоксов
Еще советую почитать статью jQuery: 8 полезных советов при работе с элементом SELECT
Если Вам хочеться опробывать как это все работает — то для этого можете воспользоваться тестовой страничкой
Слайды
Как-то слишком много текста получилось, пожалуй пора показывать слайды 😉
Данная статья написана с использованием следующих ресурсов:
Цикл статей
- jQuery для начинающих
- jQuery для начинающих. Часть 2. JavaScript Меню
- jQuery для начинающих. Часть 3. AJAX
- jQuery для начинающих. Часть 4. Селекторы
| Селектор | Пример | Описание примера |
|---|---|---|
| * | $(«*») | Выбирает все элементы в документе (включая <html>, <head> и <body>). |
| #id | $(«#test») | Выбирает элемент, глобальный атрибут id которого, имеет значение «test» (элемент с определенным идентификатором). |
| .class | $(«.test») | Выбирает элементы, глобальный атрибут class которых, имеет значение «test». |
| element | $(«a») | Выбирает все HTML элементы <a> в документе. |
| selector,selector | $(«i,b,em,.class») | Выбирает все HTML элементы <i>, <b>, <em> и элементы, глобальный атрибут class которых, имеет значение «test» в документе. |
| element element | $(«div a») | Выбирает все элементы <a>, вложенные внутри элементов <div> (селектор потомков). |
| element > element | $(«div > strong») | Выбирает все дочерние элементы <strong>, у которых родитель — элемент <div> (селектор дочерних элементов). |
| element + element | $(«h3 + p») | Выбирает все элементы <p>, которые расположены сразу же после элементов <h3>. |
| element ~ element | $(«div ~ p») | Выбирает все элементы <p>, которые следуют сразу же за элементом <h3>, а также все элементы <p>, которые находятся на одном уровне вложенности (сестринские элементы). |
| :first | $(«a:first») | Выбирает первый HTML элемент <a> в документе. |
| :last | $(«a:last») | Выбирает последний HTML элемент <a> в документе. |
| :even | $(«tr:even») | Выбирает каждый элемент с четным индексом (например: 0, 2, 4 и так далее), или другими словами выбирает каждый нечетный HTML элемент <tr> в документе (например: 1, 3, 5 и так далее). |
| :odd | $(«tr:odd») | Выбирает каждый элемент с нечетным индексом (например: 1, 3, 5 и так далее), или другими словами выбирает каждый четный HTML элемент <tr> в документе (например: 2, 4, 6 и так далее). |
| :first-child | $(«li:first-child») | Выбирает элементы <li>, которые являются первыми дочерними элементом своего родителя. |
| :first-of-type | $(«p:first-of-type») | Выбирает все элементы <p>, которые являются первыми дочерними элементами (определенного типа) своего родителя. |
| :last-child | $(«li:last-child») | Выбирает элементы <li>, которые являются последними дочерними элементами своего родителя. |
| :last-of-type | $(«p:last-of-type») | Выбирает все элементы <p>, которые являются последними дочерними элементами (определенного типа) своего родителя. |
| :nth-child(n) | $(«tr:nth-child(3)») | Выбирает каждый элемент <tr>, который является третьим дочерним элементом своего родительского элемента. |
| :nth-last-child(n) | $(«li:nth-last-child(3)») | Выбирает каждый элемент <li>, который является третьим дочерним элементом своего родительского элемента (считая от последнего дочернего элемента). |
| :nth-of-type(n) | $(«img:nth-of-type(2)») | Выбирает каждый элемент <img>, который является вторым дочерним элементом своего родительского элемента. |
| :nth-last-of-type(n) | $(«img:nth-last-of-type(2)») | Выбирает каждый элемент <img>, который является вторым дочерним элементом своего родительского элемента (считая от последнего дочернего элемента). |
| :only-child | $(«a:only-child») | Выбор каждого элемента <a>, который является единственным дочерним элементом своего родительского элемента (нет других элементов). |
| :only-of-type | $(«a:only-of-type») | Выбор каждого элемента <a>, который является единственным элементом <a> своего родительского элемента (нет других элементов <a>). |
| :eq(index) | $(«td:eq(3)») | Выбирает четвертую ячейку данных (тег <td>) внутри таблицы (индекс начинается с нуля). |
| :gt(index) | $(«td:gt(3)») | Выбирает все ячейки данных (тег <td>) чей индекс больше трех (индекс начинается с нуля). |
| :lt(index) | $(«td:lt(3)») | Выбирает все ячейки данных (тег <td>) чей индекс меньше трех (индекс начинается с нуля). |
| :not(selector) | $(«div:not(.test)») | Селектор отрицания выбирает все элементы <div>, кроме тех, глобальный атрибут class которых, имеет значение «test». |
| :header | $(«:header») | Выбирает все элементы, которые являются заголовками (от <h2> и до <h6>). |
| :animated | $(«:animated») | Выбирает все элементы, которые находятся в процессе анимации в тот момент, когда селектор используется (только для элементов анимируемых с использованием библиотеки jQuery). |
| :focus | $(«:focus») | Определяет какой элемент находится в фокусе в данный момент. |
| :contains(text) | $(«:contains(‘Aloha’)») | Выбирает все элементы, которые содержат текст «Aloha» |
| :has(selector) | $(«div:has(h4)») | Выбирает все элементы <div>, которые содержат в себе элементы <h4> (в качестве дочернего элемента, либо потомка). |
| :empty | $(«:empty») | Выбирает все элементы, которые не имеют дочерних элементов и текстовых узлов (пустые элементы). |
| :parent | $(«:parent») | Выбирает все элементы, которые имеют по крайней мере один дочерний узел (элемент или текст). |
| :hidden | $(«div:hidden») | Выбирает все элементы <div>, которые скрыты (не занимают место в документе). |
| :visible | $(«div:visible») | Выбирает все элементы <div>, которые являются видимыми (занимают место в документе). |
| :root | $(«:root») | Выбирает элемент, который является корневым для документа. |
| :lang(language) | $(«p:lang(ru)») | Выбирает каждый элемент <p>, глобальный атрибут lang которого, содержит значение «ru». |
| [attribute] | $(«[alt]») | Выбирает все элементы, которые имеют атрибут alt с любым значением. |
| [attribute=’value’] | $(«[src=’logo.png’]») | Выбирает все элементы, которые имеют указанный атрибут (src) со значением logo.png. |
| [attribute=’value’][attribute2=’value2′] | $(«[src=’logo.png’][alt=’image’]») | Выбирает все элементы, которые имеют указанные атрибуты (src и alt) со значениями этих атрибутов logo.png для первого и image для второго. |
| [attribute!=’value’] | $(«[src!=’logo.png’]») | Выбирает все элементы, которые не имеют указанный атрибут, либо имеют указанный атрибут (src) со значением отличным от logo.png (не равно этому значению). |
| [attribute$=’value’] | $(«[href$=’.php’]») | Выбирает все элементы, значение атрибута href которых, заканчивается на «.php». |
| [attribute|=’value’] | $(«[title|=’ru’]») | Выбирает элементы, которые имеют глобальный атрибут title со значением равным «ru», либо элементы, значение которых начинается с этого значения и после него сразу следует дефис («ru-anystring»). |
| [attribute^=’value’] | $(«[title^=’eng’]») | Выбирает элементы, которые имеют указанный глобального атрибут title со значением, которое начинается с «eng». |
| [attribute~=’value’] | $(«[title~=’free’]») | Выбирает все элементы со значением глобального атрибута title, содержащего определенное слово «free» (слово может быть разделено пробелами). |
| [attribute*=’value’] | $(«[title*=’free’]») | Выбирает все элементы со значением глобального атрибута title, содержащего указанную подстроку «free». |
| :input | $(«:input») | Выбирает все элементы <input>, <textarea>, <select> и <button>. |
| :text | $(«:text») | Выбирает все элементы <input>, которые имеют атрибут type со значением text. |
| :password | $(«:password») | Выбирает все элементы <input>, которые имеют атрибут type со значением password. |
| :radio | $(«:radio») | Выбирает все элементы <input>, которые имеют атрибут type со значением radio. |
| :checkbox | $(«:checkbox») | Выбирает все элементы <input>, которые имеют атрибут type со значением checkbox. |
| :submit | $(«:submit») | Выбирает все элементы <input> и <button>, которые имеют атрибут type со значением submit и элемент <button>, который не имеет атрибута type. |
| :reset | $(«:reset») | Выбирает все элементы <input> и <button>, которые имеют атрибут type со значением reset. |
| :button | $(«:button») | Выбирает все элементы <input> и <button>, которые имеют атрибут type со значением button. |
| :image | $(«:image») | Выбирает все элементы <input>, которые имеют атрибут type со значением image. |
| :file | $(«:file») | Выбирает все элементы <input>, которые имеют атрибут type со значением file. |
| :enabled | $(«:enabled») | Выбирает все элементы, которые активны (у которых не установлен логический атрибут disabled). |
| :disabled | $(«:disabled») | Выбирает все элементы, которые не активны (у которых установлен логический атрибут disabled). |
| :selected | $(«:selected») | Выбирает все элементы <option>, у которых установлен логический атрибут selected. |
| :checked | $(«:checked») | Выбирает все элементы <input>, у которых установлен логический атрибут checked (только для <input type = «checkbox» и <input type = «radio» >). Кроме того, выбирает элементы <option> (пункты раскрывающегося списка <select>) с логическим атрибутом selected. |
| :target | $(«p:target») | Если идентификатор ресурса (URI) документа содержит фрагмент идентификатора элемента, то селектор выбирет элемент с подобным идентификатором (глобальный атрибут id). Например, элемент <p id = «info»> будет выбран так как URI документа (http://пример.ру/#info) содержит фрагмент идентификатора этого элемента. |
| Селектор | Описание, пример |
|---|---|
| Элемента | Выбирает все элементы данного типа на странице, например, $("div"). |
| Элемент1 элемент2 | Выбирает все элементы2, вложенные непосредственно в элемент1, например, $("p img"). |
| Класса | Выбирает все элементы заданного класса, например, $(".sidebar"). |
| Идентификатора | Выбирает элемент с указанным идентификатором, например, $("#main"). |
| Элемент класс | Выбирает из элементов данного типа только те элементы, которым назначен указанный класс, например, $("p.first"). |
| Потомка | Выбирает все указанные элементы выбранного селектора, например, $(".sidebar a"). |
| Дочерние | Выбирает элементы, соответствующие второму селектору, которые содержатся непосредственно внутри первого селектора, являющиеся дочерними по отношению к нему, например, $("body > p"). |
| Сестринские | Выбирает элементы, соответствующие второму селектору, идущие непосредственно за первым элементом, являющимся для него сестринским, например, $("h3 + p"). |
| Выбирает элементы, соответствующие второму селектору, являющиеся сестринскими по отношению к первому элементу и расположенные после него, например, $("h3 ~ p"). | |
| Атрибута | Выбирает все элементы, которые содержат данный атрибут или указанно значение атрибута, например, $("img[alt]"), $("a[href]"), $("input[type='text']"). |
| Выбирает все элементы, начинающиеся с определенного значения, например, $("a[href^='http://']"). | |
| Выбирает все элементы, заканчивающиеся на определенное значение, например, $("a[href$='.pdf']"). | |
| Выбирает все элементы, содержащие в любом месте определенное значение, например, $("a[target*='blank']"). | |
| :even | Выбирает элементы по четным значениям индекса 0, 2, 4…, т.е. выбирает 1, 3, 5… элементы, например, $("li:even"). |
| :odd | Выбирает элементы по нечетным значениям индекса, т.е. выбирает 0, 2, 4… элементы. |
| :first | Выбирает только один элемент, первый из подходящих, например, $("p:first"). |
| :last | Выбирает только один элемент, последний из подходящих. |
| :first-child | Выбирает элементы, которые являются первыми дочерними элементами своих родителей. |
| :last-child | Выбирает элементы, которые являются последними дочерними элементами своих родителей. |
| :only-child | Выбирает элементы, являющиеся единственными дочерними элементами своих родителей. |
| :nth-child(n) | Выбирает элементы, которые являются n-дочерними элементами своих родителей. |
| :nth-child(Xn+Y) | Выбирает n-элемент, порядковый номер которого рассчитывается по формуле в круглых скобках. |
| :nth-of-type(n) | Выбирает элементы, являющиеся n-ми дочерними элементами данного типа для своих родителей. |
| :parent | Выбирает непустые элементы, которые имеют вложенные (дочерние) элементы, а также содержащие текст. |
| :eq(n) | Выбирает элементы с индексом n, при этом индексы отсчитываются от нуля. |
| :gt(n) | Выбирает все элементы, индекс которых больше n, индексы отсчитываются от нуля. |
| :lt(n) | Выбирает все элементы, расположенные перед n-элементом, не включая n-элемент. |
| :not(селектор) | Позволяет выбрать элемент, не соответствующий данному типу селектора, например, $("a:not(.link)"), $("a:not([href$='.pdf'])"). |
| :has(селектор) | Выбирает элементы, которые содержат внутри себя указанный селектор, например, элементы списка, содержащие внутри себя ссылки: $("li:has(a)"). |
| :contains(текст) | Выбирает элементы, которые содержат указанный в скобках текст, например, $("a:contains(Скачать)"). |
| :hidden | Выбирает скрытые элементы, для которых установлено значение display: none;, а также элементы форм со значением type="hidden" например, $("ul:hidden").show() — делает скрытые элементы видимыми. |
| :visible | Выбирает видимые элементы, к видимым элементам относятся элементы, размеры которых больше нуля, а также элементы со значением visibility: hidden и opacity: 0. |
| :active | Выбирает элемент, который активизирован пользователем, например, с помощью щелчка мыши. |
| :checked | Выбирает только отмеченные флажки или радиокнопки. |
| :focus | Выбирает элемент, находящийся в фокусе. |
| :hover | Выбирает элемент, на который наведен указатель мыши. |
| :disabled | Выбирает неактивные элементы (форм). |
| :enabled | Выбирает активные элементы (форм). |
| :empty | Выбирает элементы, не содержащие дочерних элементов. |
| :target | Выбирает элементы, на которые ссылается идентификатор фрагмента в url-адресе. |
| :animated | Выбирает все анимируемые в данный момент элементы. |
| :button | Выбирает все кнопки input[type=submit], input[type=reset], input[type=button], button. |
| :checkbox | Выбирает элементы-флажки input[type=checkbox]. |
| :file | Выбирает элементы типа file, input[type=file]. |
| :header | Выбирает элементы-заголовки от h2 до h6. |
| :image | Выбирает изображения в элементах форм input[type=image]. |
| :input | Выбирает элементы форм input, select, textarea, button. |
| :password | Выбирает элементы ввода пароля input[type=password]. |
| :radio | Выбирает радиокнопки input[type=radio]. |
| :reset | Выбирает кнопки сброса input[type=reset], button[type=reset]. |
| :selected | Выбирает выделенные элементы option. |
| :submit | Выбирает кнопки отправки формы input[type=submit], button[type=submit]. |
| :text | Выбирает элементы ввода текстаinput[type=text]. |
Селекторы JQuery
В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для манипуляций с элементами в документе.
Описание всех селекторов на api.jquery.com.
Если в названии класса или атрибута есть спец-символы (!"#$%&'()*+,./:;<=>?@[]^`{|}~), то они должны экранироваться.
Например, для элемента с id="foo.bar", будет такой селектор $("#foo\.bar").
1
Теги, ID и классы
$("*") |
Все теги |
$("p") |
Все <p> |
$("h2,div,p") |
Все <h2>, <div>, <p> |
$(":header") |
Все заголовки <h2>, <h3> … |
$("#lastname") |
Элемент с id="lastname" |
$(".intro") |
Все элементы с class="intro" |
$(".intro,.demo") |
Все элементы с классами «intro», «demo» |
$(".intro.demo") |
Все элементы с классом «intro» и «demo» |
$(".intro .demo") |
Все элементы с классом «demo», которые находится внутри «intro» |
$("div > p") |
Все <p>, которые являются прямыми потомками <div> |
$("div p") |
Все <p>, которые являются потомками <div> |
$("div + p") |
<p>, которые идут за <div> |
$("div ~ p") |
Все <p>, которые идут за <div>, в общем родителе |
2
Атрибуты
$("[href]") |
Все элементы с атрибутом href |
$("[href][title]") |
Все элементы с атрибутами href и title |
$("[href='default.htm']") |
Все элементы с атрибутом href="default.htm" |
$("[href!='default.htm']") |
Все элементы с атрибутом href, но без значения «default.htm» |
$("[href$='.jpg']") |
Все элементы с атрибутом href, с значением по маске «.jpg» |
$("[title|='Tomorrow']") |
Все элементы с атрибутом title, равным «Tomorrow» или начинающемуся с «Tomorrow», за которым следует дефис |
$("[title^='Tom']") |
Все элементы с атрибутом title, начинающимся с «Tom» |
$("[title~='hello']") |
Все элементы с атрибутом title, содержащим определенное слово «hello» |
$("[title*='hello']") |
Все элементы с атрибутом title, содержащим слово «hello» |
3
Порядок элементов
$("p:first") |
Первый <p> |
$("p:last") |
Последний <p> |
$("tr:even") |
Четные <tr> |
$("tr:odd") |
Нечетные <tr> |
Поиск в родителе
$("div p:first-child") |
Первый <p> в <div> |
$("div p:first-of-type") |
Первый <p> в <div>, игнорируя другие элементы |
$("div p:last-child") |
Последний <p> в <div> |
$("div p:last-of-type") |
Последний <p> в <div>, игнорируя другие элементы |
$("div p:nth-child(2)") |
Второй <p> в <div> |
$("div p:nth-last-child(2)") |
Второй с конца <p> в <div> |
$("div p:nth-of-type(2)") |
Второй <p> в <div>, игнорируя другие элементы |
$("div p:nth-last-of-type(2)") |
Второй с конца <p> в <div>, игнорируя другие элементы |
$("div p:only-child") |
<p>, который является единственным потомком в <div> |
$("div p:only-of-type") |
<p>, который является единственным потомком в <div>, игнорируя другие элементы |
Поиск по индексу (индекс элементов начинается с нуля)
$("ul li:eq(3)") |
Четвертый <li> в списке <ul> |
$("ul li:gt(3)") |
Все <li> с индексом > 3 |
$("ul li:lt(3)") |
Все <li> с индексом < 3 |
4
Состояние элементов
$(":animated") |
Элементы, которые находятся в процессе анимации |
$(":focus") |
Элемент в фокусе |
$(":contains('Hello')") |
Все теги, содержащие текст «Hello» |
$("div:has(p)") |
Элементы <div>, которые содержат хотя бы один элемент <p> |
$(":empty") |
Пустые элементы |
$(":not(:empty)") |
Непустые элементы |
$(":parent") |
Все элементы, у которых есть хотя бы один дочерний элемент или текст |
$("p:hidden") |
Скрытые элементы <p> (display: none;) |
$("p:visible") |
Видимые элементы <p> |
$(":root") |
Выбирает элемент, который является корнем документа (<html>) |
$("p:lang(ru)") |
Выбирает все элементы c указанным языком <p lang="ru">...</p> |
5
Поля форм
$(":input") |
Все поля input |
$(":text") |
Текстовые поля type="text" |
$(":password") |
Поля с паролем type="password" |
$(":radio") |
Радиокнопки |
$(":checkbox") |
Чекбоксы |
$(":submit") |
Кнопки с type="submit" |
$(":reset") |
Кнопки с type="reset" |
$(":button") |
Кнопки с type="button" |
$(":image") |
Кнопки с type="image" |
$(":file") |
Выбор файла type="file" |
Состояние полей
$(":enabled") |
Все активные элементы (без disabled="disabled") |
$(":disabled") |
Заблокированные элементы |
$(":selected") |
Выбранные <option> в <select> |
$(":checked") |
Отмеченные чекбоксы и радиокнопки |
Использование селекторов по атрибутам в jQuery | JavaScript. Базовый
В случае, если вам необходимо выбрать все активные поля input, либо все gif изображения на странице, или ссылки на один и тот же сайт, то обычными селекторами по классу, либо идентификатору, эту задачу не решить (если не добавлять каждому нужному элементу по классу)
Для решения этой задачи на помощь приходит такая группа селекторов, как селекторы по атрибутам, суть их очень проста, мы используем обычные селекторы по классу, id, или по названию тега и комбинируем их, указывая необходимую информацию о необходимых нам значениях их атрибутов.
Ниже приведен список основных селекторов по атрибутам, которые мы можем использовать, а то, как их применять, вы можете подсмотреть в видео-уроке
Селектор по наличию атрибута
Выбирает элемент(ы), которые содержат указаный атрибут, вне зависимости от его значения.
$("selector[attr]")
Селектор по значению атрибута
Выбирает элемент(ы), с заданным значением атрибута.
$("selector[attr='value']")
Селектор по отсуствию атрибута (неравенства значения)
Выбирает элемент(ы), которые не содержат заданного атрибута либо его значение отличается от указаного.
$("selector[attr!='value']")
Селектор по началу значения атрибута
Выбирает элемент(ы), которые содержат атрибут, который начинается с заданной строки.
$("selector[attr^='value']")
Селектор по окончанию значения атрибута
Выбирает элемент(ы), которые содержат атрибут, который заканчивается на заданную строку.
$("selector[attr$='value']")
Селектор по наличию значения в атрибуте
Выбирает элемент(ы), который содержит атрибут, у которого значение содержит заданную строку.
$("selector[attr*='value']")
Селектор по наличию значения в атрибуте
Выбирает элемент(ы), который содержит атрибут, в который входит указанное слово.
$("selector[attr~='value']")
Селектор по атрибуту с префиксом
Выбирает элемент(ы), который содержит атрибут, у которого значение либо равно заданной строке, либо начинается с заданной строки с последующим дефисом.
$("selector[attr|='value']")