Библиотека jQuery использует возможности селекторов каскадных таблиц стилей (CSS), позволяющих нам быстро и легко получать доступ к элементам или группам элементов в объектной модели документа (DOM).
JQuery Selector — это функция, которая использует выражения для поиска подходящих элементов из DOM на основе заданных критериев. Проще говоря, селекторы используются для выбора одного или нескольких элементов HTML с использованием jQuery. Как только элемент выбран, мы можем выполнять различные операции над этим выбранным элементом.
Функция фабрики $ ()
Селекторы jQuery начинаются со знака доллара и круглых скобок — $ () . Фабричная функция $ () использует следующие три строительных блока при выборе элементов в данном документе:
Sr.No. Селектор и описание
1
Название тэга
Представляет имя тега, доступное в DOM. Например, $ (‘p’) выбирает все абзацы <p> в документе.
2
ID тега
Представляет тег, доступный с данным идентификатором в DOM. Например, $ (‘# some-id’) выбирает единственный элемент в документе, который имеет идентификатор some-id.
3
Tag Class
Представляет тег, доступный для данного класса в DOM. Например, $ (‘. Some-class’) выбирает все элементы в документе, которые имеют класс some-class.
Название тэга
Представляет имя тега, доступное в DOM. Например, $ (‘p’) выбирает все абзацы <p> в документе.
ID тега
Представляет тег, доступный с данным идентификатором в DOM. Например, $ (‘# some-id’) выбирает единственный элемент в документе, который имеет идентификатор some-id.
Tag Class
Представляет тег, доступный для данного класса в DOM. Например, $ (‘. Some-class’) выбирает все элементы в документе, которые имеют класс some-class.
Все вышеперечисленные предметы можно использовать как самостоятельно, так и в сочетании с другими селекторами. Все селекторы jQuery основаны на том же принципе, за исключением некоторых настроек.
ПРИМЕЧАНИЕ. — Фабричная функция $ () является синонимом функции jQuery () . Так что если вы используете любую другую библиотеку JavaScript, где $ sign конфликтует с чем-то другим, вы можете заменить $ sign на имя jQuery и использовать функцию jQuery () вместо $ () .
пример
Ниже приведен простой пример использования Tag Selector. Это позволит выбрать все элементы с именем тега p .
Live Demo
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<div>
<p class = "myclass">This is a paragraph.</p>
<p id = "myid">This is second paragraph.</p>
<p>This is third paragraph.</p>
</div>
</body>
</html>
Это даст следующий результат —
Как использовать селекторы?
Селекторы очень полезны и будут необходимы на каждом этапе при использовании jQuery. Они получают именно тот элемент, который вы хотите от вашего HTML-документа.
Следующая таблица перечисляет несколько основных селекторов и объясняет их примерами.
Sr.No. Селектор и описание
1 название
Выбирает все элементы, которые соответствуют данному элементу Name .
2 #Я БЫ
Выбирает один элемент, который соответствует данному идентификатору .
3 .Учебный класс
Выбирает все элементы, которые соответствуют данному классу .
4 Универсальный (*)
Выбирает все элементы, доступные в DOM.
5 Несколько элементов E, F, G
Выбирает объединенные результаты всех указанных селекторов E, F или G.
Выбирает все элементы, которые соответствуют данному элементу Name .
Выбирает один элемент, который соответствует данному идентификатору .
Выбирает все элементы, которые соответствуют данному классу .
Выбирает все элементы, доступные в DOM.
Выбирает объединенные результаты всех указанных селекторов E, F или G.
Примеры селекторов
Подобно приведенному выше синтаксису и примерам, следующие примеры помогут вам понять, как использовать другие типы других полезных селекторов —
Здесь у вас есть другой тип других полезных селекторов —
Sr.No. Селектор и описание
1
$ ( ‘*’)
Этот селектор выбирает все элементы в документе.
2
$ («p> *»)
Этот селектор выбирает все элементы, которые являются дочерними для элемента абзаца.
3
$ ( «# Особая личность»)
Эта селекторная функция получает элемент с id = «specialID».
4
$ ( «specialClass»)
Этот селектор получает все элементы, которые имеют класс specialClass .
5
$ ( «ли: нет (.MyClass)»)
Выбирает все элементы, соответствующие <li>, которые не имеют class = «myclass».
6
$ ( «# specialID.specialClass»)
Этот селектор сопоставляет ссылки с идентификатором specialID и классом specialClass .
7
$ («p a.specialClass»)
Этот селектор сопоставляет ссылки с классом specialClass, объявленным в элементах <p>.
8
$ («ul li: first»)
Этот селектор получает только первый элемент <li> из <ul>.
9
$ («# контейнер p»)
Выбирает все элементы, соответствующие <p>, которые являются потомками элемента с идентификатором контейнера .
10
$ («li> ul»)
Выбирает все элементы, соответствующие <ul>, которые являются потомками элемента, соответствующего <li>
11
$ («сильный + их»)
Выбирает все элементы, совпадающие с <em>, которые следуют сразу за элементом-родителем, совпадающим с <strong>.
12
$ («p ~ ul»)
Выбирает все элементы, совпадающие с <ul>, которые следуют за родственным элементом, совпадающим с <p>.
13
$ («код, их, сильный»)
Выбирает все элементы, соответствующие <code> или <em> или <strong>.
14
$ («p strong, .myclass»)
Выбирает все элементы, соответствующие <strong>, которые являются потомками элемента, соответствующего <p>, а также все элементы, имеющие класс myclass .
15
$ ( «: пусто»)
Выбирает все элементы, которые не имеют дочерних элементов.
16
$ ( «р: пусто»)
Выбирает все элементы, соответствующие <p>, которые не имеют дочерних элементов.
17
$ ( «ДИВ [р]»)
Выбирает все элементы, соответствующие элементу <div>, которые содержат элемент, соответствующий элементу <p>.
18
$ ( «р [.MyClass]»)
Выбирает все элементы, соответствующие <p>, которые содержат элемент с классом myclass .
19
$ ( «а [@rel]»)
Выбирает все элементы, соответствующие <a>, которые имеют атрибут rel.
20
$ («input [@name = myname]»)
Выбирает все элементы, совпадающие с <input>, которые имеют значение имени, точно равное myname.
21
$ ( «вход [@ имя = MyName]»)
Выбирает все элементы, соответствующие <input>, которые имеют значение name, начинающееся с myname .
22
$ ( «а [@ $ отн = сам]»)
Выбирает все элементы, соответствующие <a>, которые имеют значение атрибута rel, заканчивающееся self .
23
$ ( «а [@ HREF = domain.com]»)
Выбирает все элементы, соответствующие <a>, которые имеют значение href, содержащее domain.com.
24
$ ( «ли: даже»)
Выбирает все элементы, соответствующие <li>, которые имеют четное значение индекса.
25
$ ( «тр: нечетный»)
Выбирает все элементы, соответствующие <tr>, которые имеют нечетное значение индекса.
26
$ ( «Ли: первый»)
Выбирает первый элемент <li>.
27
$ ( «Ли: последняя»)
Выбирает последний элемент <li>.
28
$ ( «Ли: видимый»)
Выбирает все элементы, соответствующие <li>, которые являются видимыми.
29
$ ( «Ли: скрытый»)
Выбирает все элементы, соответствующие <li>, которые скрыты.
30
$ ( «: радио»)
Выбирает все переключатели в форме.
31
$ ( «: проверено»)
Выбирает все флажки в форме.
32
$ ( «: вход»)
Выбирает только элементы формы (ввод, выбор, текстовое поле, кнопка).
33
$ ( «: текст»)
Выбирает только текстовые элементы (input [type = text]).
34
$ ( «Ли: экв (2)»)
Выбирает третий элемент <li>.
35
$ ( «Ли: экв (4)»)
Выбирает пятый элемент <li>.
36
$ ( «Li: л (2)»)
Выбирает все элементы, соответствующие элементу <li> перед третьим; другими словами, первые два элемента <li>.
37
$ ( «р: л (3)»)
выбирает все элементы, соответствующие элементам <p> перед четвертым; другими словами, первые три элемента <p>.
38
$ ( «Li: GT (1)»)
Выбирает все элементы, соответствующие <li> после второго.
39
$ ( «р: GT (2)»)
Выбирает все элементы, соответствующие <p> после третьего.
40
$ ( «DIV / р»)
Выбирает все элементы, соответствующие элементу <p>, которые являются дочерними элементами элемента, соответствующего элементу <div>.
41
$ ( «ДИВ // код»)
Выбирает все элементы, соответствующие <code>, которые являются потомками элемента, соответствующего <div>.
42
$ ( «// р // а»)
Выбирает все элементы, соответствующие <a>, которые являются потомками элемента, соответствующего <p>
43
$ ( «Ли: первый-ребенок»)
Выбирает все элементы, соответствующие <li>, которые являются первыми дочерними элементами их родителей.
44
$ ( «ли: последний ребенок»)
Выбирает все элементы, соответствующие <li>, которые являются последними дочерними элементами их родителя.
45
$ ( «: родитель»)
Выбирает все элементы, которые являются родительскими для другого элемента, включая текст.
46
$ ( «Ли: содержит (второй)»)
Выбирает все элементы, соответствующие <li>, которые содержат второй текст.
$ ( ‘*’)
Этот селектор выбирает все элементы в документе.
$ («p> *»)
Этот селектор выбирает все элементы, которые являются дочерними для элемента абзаца.
$ ( «# Особая личность»)
Эта селекторная функция получает элемент с id = «specialID».
$ ( «specialClass»)
Этот селектор получает все элементы, которые имеют класс specialClass .
$ ( «ли: нет (.MyClass)»)
Выбирает все элементы, соответствующие <li>, которые не имеют class = «myclass».
$ ( «# specialID.specialClass»)
Этот селектор сопоставляет ссылки с идентификатором specialID и классом specialClass .
$ («p a.specialClass»)
Этот селектор сопоставляет ссылки с классом specialClass, объявленным в элементах <p>.
$ («ul li: first»)
Этот селектор получает только первый элемент <li> из <ul>.
$ («# контейнер p»)
Выбирает все элементы, соответствующие <p>, которые являются потомками элемента с идентификатором контейнера .
$ («li> ul»)
Выбирает все элементы, соответствующие <ul>, которые являются потомками элемента, соответствующего <li>
$ («сильный + их»)
Выбирает все элементы, совпадающие с <em>, которые следуют сразу за элементом-родителем, совпадающим с <strong>.
$ («p ~ ul»)
Выбирает все элементы, совпадающие с <ul>, которые следуют за родственным элементом, совпадающим с <p>.
$ («код, их, сильный»)
Выбирает все элементы, соответствующие <code> или <em> или <strong>.
$ («p strong, .myclass»)
Выбирает все элементы, соответствующие <strong>, которые являются потомками элемента, соответствующего <p>, а также все элементы, имеющие класс myclass .
$ ( «: пусто»)
Выбирает все элементы, которые не имеют дочерних элементов.
$ ( «р: пусто»)
Выбирает все элементы, соответствующие <p>, которые не имеют дочерних элементов.
$ ( «ДИВ [р]»)
Выбирает все элементы, соответствующие элементу <div>, которые содержат элемент, соответствующий элементу <p>.
$ ( «р [.MyClass]»)
Выбирает все элементы, соответствующие <p>, которые содержат элемент с классом myclass .
$ ( «а [@rel]»)
Выбирает все элементы, соответствующие <a>, которые имеют атрибут rel.
$ («input [@name = myname]»)
Выбирает все элементы, совпадающие с <input>, которые имеют значение имени, точно равное myname.
$ ( «вход [@ имя = MyName]»)
Выбирает все элементы, соответствующие <input>, которые имеют значение name, начинающееся с myname .
$ ( «а [@ $ отн = сам]»)
Выбирает все элементы, соответствующие <a>, которые имеют значение атрибута rel, заканчивающееся self .
$ ( «а [@ HREF = domain.com]»)
Выбирает все элементы, соответствующие <a>, которые имеют значение href, содержащее domain.com.
$ ( «ли: даже»)
Выбирает все элементы, соответствующие <li>, которые имеют четное значение индекса.
$ ( «тр: нечетный»)
Выбирает все элементы, соответствующие <tr>, которые имеют нечетное значение индекса.
$ ( «Ли: первый»)
Выбирает первый элемент <li>.
$ ( «Ли: последняя»)
Выбирает последний элемент <li>.
$ ( «Ли: видимый»)
Выбирает все элементы, соответствующие <li>, которые являются видимыми.
$ ( «Ли: скрытый»)
Выбирает все элементы, соответствующие <li>, которые скрыты.
$ ( «: радио»)
Выбирает все переключатели в форме.
$ ( «: проверено»)
Выбирает все флажки в форме.
$ ( «: вход»)
Выбирает только элементы формы (ввод, выбор, текстовое поле, кнопка).
$ ( «: текст»)
Выбирает только текстовые элементы (input [type = text]).
$ ( «Ли: экв (2)»)
Выбирает третий элемент <li>.
$ ( «Ли: экв (4)»)
Выбирает пятый элемент <li>.
$ ( «Li: л (2)»)
Выбирает все элементы, соответствующие элементу <li> перед третьим; другими словами, первые два элемента <li>.
$ ( «р: л (3)»)
выбирает все элементы, соответствующие элементам <p> перед четвертым; другими словами, первые три элемента <p>.
$ ( «Li: GT (1)»)
Выбирает все элементы, соответствующие <li> после второго.
$ ( «р: GT (2)»)
Выбирает все элементы, соответствующие <p> после третьего.
$ ( «DIV / р»)
Выбирает все элементы, соответствующие элементу <p>, которые являются дочерними элементами элемента, соответствующего элементу <div>.
$ ( «ДИВ // код»)
Выбирает все элементы, соответствующие <code>, которые являются потомками элемента, соответствующего <div>.
$ ( «// р // а»)
Выбирает все элементы, соответствующие <a>, которые являются потомками элемента, соответствующего <p>
$ ( «Ли: первый-ребенок»)
Выбирает все элементы, соответствующие <li>, которые являются первыми дочерними элементами их родителей.
$ ( «ли: последний ребенок»)
Выбирает все элементы, соответствующие <li>, которые являются последними дочерними элементами их родителя.
$ ( «: родитель»)
Выбирает все элементы, которые являются родительскими для другого элемента, включая текст.
$ ( «Ли: содержит (второй)»)
Выбирает все элементы, соответствующие <li>, которые содержат второй текст.
Вы можете использовать все вышеупомянутые селекторы с любым элементом HTML / XML в общем виде. Например, если селектор $ («li: first») работает для элемента <li>, то $ («p: first») также будет работать для элемента <p>.