Селектор по атрибуту jquery – jQuery — Селектор по атрибуту

Содержание

Все 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»)	Выбирает все элементы

basicweb.ru

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. Селекторы

habr.com

Селекторы 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]`.

html5book.ru