Библиотека 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 .
<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>.