Jquery selector: Attribute Contains Selector [name*=”value”] | jQuery API Documentation — Вебджем.рф

Содержание

Все jQuery селекторы | jQuery справочник

В этом разделе представлено описание всех возможных способов для выбора необходимого элемента, или набора элементов в документе с использованием JavaScript библиотеки 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. =’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 | Фильтры Jquery, селекторы в jquery

Автор: Авинаш Малхотра

Обновлено 10 декабря 2019 г.

←Скачать Jquery
Показать Jquery Скрыть→

Селекторы Jquery

Jquery использует CSS-селекторы. Но в отличие от css, jquery имеет гораздо больше селекторов, чем CSS2. Вот список полных селекторов jquery с живым примером и кодом.

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

Jquery	Код	Описание	Выход
`$("элемент")`	`$("p"). css({"цвет":"красный"})`	выбрать все элементы с именем тега в примере.	Пункт 1 Пункт 2
`$("#id")`	`$("#p1").css({"цвет":"синий"})`	выберите один элемент с идентификатором имени в примере. Если имя идентификатора повторяется, будет выполнено только первое совпадение.	Параметр с идентификатором p1
`$(".класс")`	`$(".p1").css({"цвет":"бирюзовый"})`	выберите все элементы с именем класса в примере.	Para с классом p1 другой p с классом p1
`$("ул ли")`	`$("ул ли"). css({"цвет":"желтый"})`	выберите всех потомков элемента ul.	Список 1 Список 2 Список 3
`$("ul > li")`	`$("ul > li").css({"color":"aqua"})`	выберите все дочерние селекторы элемента ul.	Список 1 Список 2 Список 3
`$("ul,ol")`	`$("ul,ol").css({"цвет":"серый"})`	выберите группировку элементов ul и ol.	Список 1 Список 2 Список 1 Список 2

Базовые фильтры Jquery

Jquery	Код	Описание	Выход
`$(":первый")`	`$("ul li:first"). css({ "фон":"красный"})`	выберите первый элемент совпадения в примере.	Список 1 Список 2 Список 3 Список 4
`$(":последний")`	`$("ul li:last").css({ "фон":"красный"})`	выберите последний элемент совпадения в примере.	Список 1 Список 2 Список 3 Список 4
`$(":не(селектор)")`	`$("ul li:not(li:first)").css({ "фон":"красный"})`	выберите все элементы , кроме указанного в примере .	Список 1 Список 2 Список 3 Список 4
`$(":четный")`	`$("ul li:even").css({ "фон":"красный"})`	выберите все четных индексированных элемента в примере.	Список 1 Список 2 Список 3 Список 4
`$(":нечетное")`	`$("ul li:odd").css({ "фон":"красный"})`	выбрать все нечетных индексированных элемента в примере.	Список 1 Список 2 Список 3 Список 4
`$(":экв(индекс)")`	`$("ul li:eq(1)"). css({ "фон":"красный"})`	выберите элемент по n-му индексу например.	Список 1 Список 2 Список 3 Список 4
`$(":lt(индекс)")`	`$("ul li:lt(2)").css({ "фон":"красный"})`	выберите элементы больше, чем n-й индекс в примере.	Список 1 Список 2 Список 3 Список 4
`$(":gt(индекс)")`	`$("ul li:gt(2)").css({ "фон":"красный"})`	выберите элементы больше, чем n-й индекс в примере.	Список 1 Список 2 Список 3 Список 4

Фильтр по содержанию

Jquery Код Описание Выполнить Выход

$(":содержит(текст)")

 $("p:содержит(привет)"). css({ 
 "фон":"красный"})

выберите элемент p с текстом «привет» в примере.

привет

$(":пусто")

 $("ul li:пусто").css({
 "фон":"красный"})

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

Список 1

$(":имеет(селектор)")

 $("ul li:has(a)").css({ 
 "фон":"красный"})

выберите только элемента с потомками в примере.

Список 1
Список 2

$(":родительский")

 $("таблица tr td:parent"). css({
 "фон":"красный"})

:parent является инверсией : пусто в примере.

ряд 1, столбец 1	ряд 1, столбец 2
ряд 2, столбец 1	ряд 2, столбец 2

Детские фильтры

Jquery	Код	Описание	Выход
`$(":первый-потомок")`	`$("ul li:first-child").css({ "фон":"красный"})`	выберите первый дочерний элемент в примере.	Список 1 Список 2 Список 3
`$(":последний ребенок")`	`$("ul li:last-child"). css({ "фон":"красный"})`	выберите последний дочерний элемент например.	Список 1 Список 2 Список 3
`$(":n-й ребенок(n)")`	`$("ul li:nth-child(2)").css({ "фон":"красный"})`	выберите n-й дочерний элемент в примере.	Список 1 Список 2 Список 3
`$(":n-й ребенок(нечетный)")`	`$("ul li:nth-child(нечетный)").css({ "фон":"красный"})`	выберите нечетных дочерних элемента в примере.	Список 1 Список 2 Список 3 Список 4
`$(":n-й ребенок(четный)")`	`$("ul li:nth-child(even)"). css({ "фон":"красный"})`	выберите четных дочерних элемента в примере.	Список 1 Список 2 Список 3 Список 4
`$(":n-й дочерний элемент(уравнение)")`	`$("ul li:nth-child(3n)").css({ "фон":"красный"})`	выберите n-й элемент фактора в примере.	Список 1 Список 2 Список 3 Список 4 Список 5 Список 6
`$(":только ребенок")`	`$("ul li:only-child").css({ "фон":"красный"})`	выберите элемент только с одним дочерним элементом в примере.	Список 1

Фильтры атрибутов

JQuery	Код	Описание	Выполнить	Выход
`$("[атрибут]")`	`$("ul li[id]").css({ "фон":"красный"})`	выберите элемент с именем атрибута в примере.		Список 1 Список с идентификатором Список 3
`$("[ атрибут='значение' ]")`	`$("ввод [имя='имя']").css({ "контур":"сплошной красный"})`	выберите элемент с именем атрибута и значением в примере. =’значение’]») 9=’col’]»).css({ «контур»:»сплошной красный»})	выберите элемент со значением атрибута, начинающимся точно с заданной строки в примере.		Столбец класса списка Столбец класса списка Список без столбца класса
`$("[атрибут$='значение']")`	`$("li[класс$='2']").css({ "контур":"сплошной красный"})`	выберите элемент со значением атрибута, заканчивающимся точно на заданную строку в примере.		Класс списка, столбец 2 Класс списка, столбец
`$("[атрибут*='значение']")`	`$("li[class*='o']"). css({ "контур":"сплошной красный"})`	выберите элемент , у которого есть атрибут со значением, содержащим подстроку в примере.		Класс списка, столбец 2 Класс списка, столбец

jQuery — селекторы

Селекторы jQuery выбирают или находят элемент DOM (объектная модель документа) в документе HTML. Он используется для выбора элементов HTML на основе идентификатора, имени, типов, атрибутов, класса и т. д. Он основан на существующих селекторах CSS.