jQuery - Селекторы

Библиотека jQuery использует возможности селекторов каскадных таблиц стилей (CSS), позволяя нам быстро и легко получать доступ к элементам или группам элементов в объектной модели документа (DOM).

Селектор jQuery - это функция, которая использует выражения для поиска совпадающих элементов из модели DOM на основе заданных критериев. Вы можете просто сказать, что селекторы используются для выбора одного или нескольких элементов HTML с помощью jQuery. Как только элемент выбран, мы можем выполнять различные операции с этим выбранным элементом.

Заводская функция $ ()

Селекторы jQuery начинаются со знака доллара и скобок - $(). Заводская функция$() использует следующие три строительных блока при выборе элементов в данном документе -

Sr. No.	Селектор и описание
1	Tag Name Представляет имя тега, доступное в DOM. Например$('p') выделяет все абзацы <p> в документе.
2	Tag ID Представляет тег, доступный с данным идентификатором в DOM. Например$('#some-id') выбирает единственный элемент в документе с идентификатором some-id.
3	Tag Class Представляет тег, доступный для данного класса в DOM. Например$('.some-class') выбирает все элементы в документе, которые имеют класс некоторого класса.

Все перечисленные выше элементы можно использовать отдельно или в сочетании с другими селекторами. Все селекторы jQuery основаны на том же принципе, за исключением некоторых настроек.

NOTE - Заводская функция $() является синонимом jQuery()функция. Итак, если вы используете любую другую библиотеку JavaScript, где$ знак конфликтует с чем-то еще, тогда вы можете заменить $ подписать jQuery имя, и вы можете использовать функцию jQuery() вместо $().

пример

Ниже приведен простой пример использования селектора тегов. Это выберет все элементы с именем тега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	#Я БЫ Выбирает один элемент, соответствующий заданному ID.
3	.Класс Выбирает все элементы, которые соответствуют заданному Class.
4	Универсальный (*) Выбирает все элементы, доступные в DOM.
5	Несколько элементов E, F, G Выбирает объединенные результаты всех указанных селекторов E, F или же G.

Примеры селекторов

Подобно приведенному выше синтаксису и примерам, следующие примеры дадут вам представление об использовании другого типа других полезных селекторов:

Здесь у вас есть другие полезные селекторы другого типа -

Sr. No.	Селектор и описание
1	*$('')** Этот селектор выбирает все элементы в документе.
2	*$("p > ")** Этот селектор выбирает все элементы, которые являются дочерними элементами элемента абзаца.
3	$("#specialID") Эта функция-селектор получает элемент с id = "specialID".
4	$(".specialClass") Этот селектор получает все элементы, имеющие класс specialClass .
5	$("li:not(.myclass)") Выбирает все элементы, соответствующие <li>, у которых нет class = "myclass".
6	$("a#specialID.specialClass") Этот селектор сопоставляет ссылки с идентификатором specialID и классом specialClass .
7	$("p a.specialClass") Этот селектор сопоставляет ссылки с классом specialClass, объявленным в элементах <p>.
8	$("ul li:first") Этот селектор получает только первый элемент <li> из <ul>.
9	$("#container p") Выбирает все элементы, соответствующие тегу <p>, которые являются потомками элемента, имеющего идентификатор контейнера .
10	$("li > ul") Выбирает все элементы, соответствующие <ul>, которые являются дочерними элементами элемента, соответствующего <li>
11	$("strong + em") Выбирает все элементы, соответствующие тегу <em>, которые сразу же следуют за одноуровневым элементом, соответствующим тегу <strong>.
12	$("p ~ ul") Выбирает все элементы, соответствующие <ul>, которые следуют за одноуровневым элементом, совпадающим с <p>.
13	$("code, em, strong") Выбирает все элементы, соответствующие <code>, <em> или <strong>.
14	$("p strong, .myclass") Выбирает все элементы, соответствующие <strong>, которые являются потомками элемента, соответствующего <p>, а также все элементы, которые имеют класс myclass .
15	$(":empty") Выбирает все элементы, у которых нет дочерних элементов.
16	$("p:empty") Выбирает все элементы, соответствующие <p>, у которых нет дочерних элементов.
17	$("div[p]") Выбирает все элементы, соответствующие <div>, которые содержат элемент, соответствующий <p>.
18	$("p[.myclass]") Выбирает все элементы, соответствующие <p>, которые содержат элемент с классом myclass .
19	$("a[@rel]") Выбирает все элементы, соответствующие <a>, которые имеют атрибут rel.
20	$("input[@name = myname]") Выбирает все элементы, соответствующие <input>, у которых значение имени точно равно myname.
21 год	$("input[@name^=myname]") Выбирает все элементы, соответствующие <input>, у которых значение имени начинается с myname .
22	$("a[@rel$=self]") Выбирает все элементы, соответствующие <a>, у которых есть relзначение атрибута, оканчивающееся на self .
23	*$("a[@href=domain.com]")** Выбирает все элементы, соответствующие <a>, которые имеют значение href, содержащее domain.com.
24	$("li:even") Выбирает все элементы, соответствующие <li>, которые имеют четное значение индекса.
25	$("tr:odd") Выбирает все элементы, соответствующие <tr>, которые имеют нечетное значение индекса.
26	$("li:first") Выбирает первый элемент <li>.
27	$("li:last") Выбирает последний элемент <li>.
28	$("li:visible") Выбирает все видимые элементы, соответствующие <li>.
29	$("li:hidden") Выбирает все скрытые элементы, соответствующие <li>.
30	$(":radio") Выбирает все переключатели в форме.
31 год	$(":checked") Выбирает все флажки в форме.
32	$(":input") Выбирает только элементы формы (ввод, выбор, текстовое поле, кнопка).
33	$(":text") Выбирает только текстовые элементы (input [type = text]).
34	$("li:eq(2)") Выбирает третий элемент <li>.
35 год	$("li:eq(4)") Выбирает пятый элемент <li>.
36	$("li:lt(2)") Выбирает все элементы, совпадающие с элементом <li> перед третьим; другими словами, первые два элемента <li>.
37	$("p:lt(3)") выбирает все элементы, которым соответствуют элементы <p> перед четвертым; другими словами, первые три элемента <p>.
38	$("li:gt(1)") Выбирает все элементы, соответствующие <li> после второго.
39	$("p:gt(2)") Выбирает все элементы, соответствующие <p> после третьего.
40	$("div/p") Выбирает все элементы, соответствующие <p>, которые являются дочерними элементами элемента, соответствующего <div>.
41 год	$("div//code") Выбирает все элементы, соответствующие <code>, которые являются потомками элемента, соответствующего <div>.
42	$("//p//a") Выбирает все элементы, соответствующие <a>, которые являются потомками элемента, соответствующего <p>
43	$("li:first-child") Выбирает все элементы, соответствующие <li>, которые являются первым дочерним элементом своего родителя.
44	$("li:last-child") Выбирает все элементы, соответствующие <li>, которые являются последними дочерними элементами своего родителя.
45	$(":parent") Выбирает все элементы, которые являются родительскими для другого элемента, включая текст.
46	$("li:contains(second)") Выбирает все элементы, соответствующие <li>, которые содержат второй текст.

Вы можете использовать все перечисленные выше селекторы с любым элементом HTML / XML обычным образом. Например, если селектор$("li:first") работает для элемента <li>, тогда $("p:first") также будет работать для элемента <p>.