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>.