Несколько jquery селекторов: Перечисление селекторов в jQuery? — Хабр Q&A

Селекторы jQuery

Селекторы jQuery выбирают элементы веб-страницы, а методы выполняют операции с этими элементами.

Чтобы выбрать элементы, нужно передать селектор функции $(), например, $("img:odd"). Данный селектор будет применен ко всему дереву DOM, и чтобы ограничить процедуру отбора элементов, можно указать определенный фрагмент дерева DOM — $("img:odd", "div#slideshow"). Таким образом будут выбраны все четные картинки из блока с id=slideshow.

Для более точного выбора элементов селекторы можно комбинировать, например, следующая запись позволит выбрать все флажки полей формы, которые были выделены пользователем — $("input[type=checkbox][checked]").

А с помощью этой комбинации селекторов $("input:checkbox:checked:enabled") можно выбрать только активные и отмеченные флажки полей формы.

Также, допускается объединять несколько селекторов в одно выражение, разделяя селекторы запятой — $("p,span"), что позволит отобрать все элементы <p> и <span>.

Таблица 1. Селекторы jQuery
Селектор
Описание, пример
Элемента Выбирает все элементы данного типа на странице, например, $("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 справочник

СелекторПримерОписание примера
*$(«*»)Выбирает все элементы в документе (включая <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) содержит фрагмент идентификатора этого элемента.

jQuery для начинающих. Часть 4. Селекторы / Хабр

Последнее время мне всё чаще задают вопрос как выбрать тот или иной элемент в 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 &copy; 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

Если Вам хочеться опробывать как это все работает — то для этого можете воспользоваться тестовой страничкой

Слайды


Как-то слишком много текста получилось, пожалуй пора показывать слайды 😉

Данная статья написана с использованием следующих ресурсов:

Цикл статей


  1. jQuery для начинающих
  2. jQuery для начинающих. Часть 2. JavaScript Меню
  3. jQuery для начинающих. Часть 3. AJAX
  4. jQuery для начинающих. Часть 4. Селекторы

Селекторы JQuery

В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для манипуляций с элементами в документе.

Описание всех селекторов на api.jquery.com.

Если в названии класса или атрибута есть спец-символы (!"#$%&'()*+,./:;<=>[email protected][]^`{|}~), то они должны экранироваться.
Например, для элемента с 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: как использовать?

JQuery – библиотека методов, написанных на языке JavaScript, которые предназначены для упрощенной работы с элементами HTML страницы. Данная библиотека также значительно упрощает выборку этих элементов, ведь поддерживает набор селекторов, большая часть которых заимствована из CSS. В данной статье мы подробно расскажем о всех селекторах jQuery и приведем примеры их использования.

CSS и jQuery

Как говорилось выше, селекторы в jQuery заимствованы из CSS, однако здесь есть несколько «НО».

  • Во-первых, jQuery поддерживает только селекторы, выбирающие элементы DOM, т. е. вы не сможете работать с событийными селекторами, например, hover, и псевдо-элементами first-line.
  • Во-вторых, у jQuery имеется множество других селекторов, которые вы не встречали в правилах CSS, именно поэтому, если вы уже знаете все элементы CSS, эта статья все равно будет актуальна для вас.

Базовые элементы

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

Селектор Описание селектора
$(«*») В выборку попадают все элементы на странице

$(«b»)

В выборку попадают элементы с выбранным тегом из разметки HTML, в данном примере — элементы <b>…</b>

$(«.classA»)

В выборку попадают элементы с указанным классом (<div>)

$(«#IDone»)

В выборку попадают элементы с указанным id (<div>)

Как и в CSS, вы можете выбрать несколько селекторов jQuery одновременно. Их можно прописать через запятую. Например, использовать селектор jquery по имени тега и по ID — $(«#IDone, b»). Допускается и выборка через тег+класс, либо тег+ID, например, $(«b.classA»).

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

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

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

Вы можете комбинировать атрибуты, чтобы сузить поиск подходящих элементов, например, $(«img[width=500][height=260]»).

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

Покопаться в содержимом элементов HTML-страницы и выбрать по результатам нужный из них — уникальная возможность jQuery. Используя такой метод, вы можете, например, сделать селектор jquery по тексту, содержащемуся в параграфе (<p>текст</p>).

Селектор Пример селектора Описание селектора
:contains() $(«p:contains(‘value’)») – выбирает все параграфы <p>, содержащие строку ‘value’. Выбирает элемент, в котором содержится указанная строка. Элемент будет удовлетворителен даже в том случае, если указанная строка будет находиться внутри его дочернего элемента. Запомните, что данный селектор чувствителен к регистру, поэтому строка «text» не будет удовлетворять указанному значению «TEXT»
:has() $(«p:has(b)») – выбирает все элементы <p>, содержащие <b>. Выбирает элемент, в котором содержится другой элемент, указанный в скобках. Данный селектор также учитывает дочерние элементы
:parent $(«p:parent») – выбирает все <p>, содержащие что-либо. Выбирает элемент, в котором содержится что-либо
:empty $(«p:empty») – выбирает все пустые <p>. Выбирает элемент, в котором ничего не содержится.

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

Такой jquery селектор также можно совмещать с другими, например, $(«p.mail:contains(‘e-mail’)») будет выбирать все параграфы с классом «mail», которые содержат в себе строку «e-mail».

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

Данный метод абсолютно идентичен селекторам из CSS. Он позволяет выбрать элементы, в зависимости от их положения относительно родственных элементов в структуре DOM. Здесь лучше сразу разбирать селекторы jquery на примерах.

Пример селектора Описание селектора
$(«ul > li») Выбирает все элементы с тэгом <li>, которые являются прямыми потомками (детьми) <ul>
$(«ul a») Выбирает все элементы с тэгом <a>, которые являются потомками любого уровня для <ul>
$(«h2 + p») Выбирает братский элемент с тэгом <p>, идущий сразу за <h2>
$(«li ~ a») Выбирает элемент с тэгом <a>, который следует сразу за <li>, однако здесь они могут не быть братскими, но должны иметь общего предка
$(«li:first-child») Выбирает элемент с тэгом <li>, который является первым ребенком своего родителя, например, <ul>
$(«li:last-child») Выбирает элемент с тэгом <li>, который является последним ребенком своего родителя, например, <ul>
$(«li:nth-child(3)») Выбирает элемент с тэгом <li>, который является третьим ребенком своего родителя. Вместо тройки, конечно же, можно использовать любое другое число
$(«li:only-child») Выбирает те элементы с тэгом <li>, родитель которых имеет только прямых потомков (детей)

Отдельно стоит поговорить о jquery селекторе li:nth-child(n), ведь он позволяет задавать не только конкретные числа. Так он может выбирать все четные элементы, если вместо n задать константу even, либо нечетные, задав odd. Вместо n также можно использовать выражение, например, $(«li:nth-child(2n+3)») будет выбирать каждый второй элемент, начиная свой отсчет с третьего прямого потомка.

Работа с полями формы

Тег input имеет множество различных вариаций, работа которых зависит от атрибута type. Для выбора различных типов полей ввода в 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») Все поля формы
:checked $(«input:checked») Отмеченные поля в чекбоксах или радио-кнопках
:selected $(«option:selected») Элементы меню option
:disabled $(«input:disabled») Отключенные поля формы
:enabled $(«input:enabled») Включенные поля формы

Выбор по положению

JQuery селектор положения очень похож на селектор иерархии. Он выбирает элемент по его положению из списка подходящих под предыдущее условие элементов.

Селектор Описание
:first Работает с первым элементом из подходящего списка
:last С последним элементом из списка
:eq(n) Выбирает элемент из списка по его индексу (n). Внимание! Нумерация элементов, подходящих под условие jQuery select ведется с 0!
:lt() Выбираются все элементы из списка, находящие до элемента с индексом n
:gt() Выбираются все элементы из списка, находящие после элемента с индексом n
:even Выбираются элементы с четным номером индекса
:odd Выбираются элементы с нечетным номером индекса

Прочие селекторы

Данные селекторы невозможно присоединить к какой-либо группе, однако они не менее важны. Например, селектор: not(), который можно назвать логическим, позволяет «перевернуть» условие или его часть, сделав выборку из неподходящих условий.

Также не менее полезным окажется селектор: hidden, который позволит развернуть элемент-картинку с размерами 0х0 рх на весь экран, например, по нажатию кнопки.

Селектор Описание
:not() Выбирает элементы, не соответствующие заданному в скобках условию
:animated Выбирает элементы, анимируемые jQuery в данный момент
:hidden Выбирает элементы со свойством display: none, type=»hidden», и с высотой и шириной в 0px. Также распространяется на элементы, содержащие в себе скрытые элементы одним из вышеперечисленных способов. Внимание! Элемент со свойством visibility, установленным в «hidden», не попадет в выборку jquery select
:visible Обратно: hidden
:header

Выбирает элементы h2, h3, h4, h5, h5 и h6

Как лучше использовать селекторы?

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

  1. Старайтесь обходиться базовыми селекторами jQuery.
  2. При выборе нескольких элементов для обработки старайтесь объединить их в некоторую группу, а не выбирать каждый по отдельности. Сделать это можно через класс, либо используя более специфичные селекторы.
  3. Используя выбор по положению, старайтесь максимально минимизировать список, из которого будет происходить выборка — это значительно снизит скорость поиска нужного элемента.

Пример скрипта с jQuery и его селекторами:

Заключение

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

javascript — Выбор нескольких классов с помощью jQuery

Переполнение стека
  1. Около
  2. Продукты
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
.

javascript — селектор jQuery с несколькими элементами, включая оператор И

Переполнение стека
  1. Около
  2. Продукты
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *