jQuery - обход DOM

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

Найти элементы по индексу

Рассмотрим простой документ со следующим содержимым HTML -

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Это даст следующий результат -

  • Над каждым списком есть свой индекс, и его можно найти напрямую, используя eq(index) как показано ниже в примере.

  • Каждый дочерний элемент начинает свой индекс с нуля, поэтому к элементу списка 2 можно будет получить доступ, используя$("li").eq(1) и так далее.

пример

Ниже приведен простой пример, который добавляет цвет ко второму элементу списка.

<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() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Это даст следующий результат -

Фильтрация элементов

В filter( selector )может использоваться для фильтрации всех элементов из набора совпадающих элементов, которые не соответствуют указанному селектору (-ам). Селектор может быть записан с использованием любого синтаксиса селектора.

пример

Ниже приводится простой пример, который применяет цвет к спискам, связанным со средним классом.

<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() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

Это даст следующий результат -

Поиск дочерних элементов

В find( selector )может использоваться для поиска всех дочерних элементов определенного типа элементов. Селектор может быть записан с использованием любого синтаксиса селектора.

пример

Ниже приведен пример, который выбирает все элементы <span>, доступные внутри разных элементов <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").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

Это даст следующий результат -

Методы фильтрации JQuery DOM

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

Sr. No. Метод и описание
1 eq (индекс)

Сократите набор совпадающих элементов до одного элемента.

2 фильтр (селектор)

Удаляет все элементы из набора совпавших элементов, которые не соответствуют указанному селектору (-ам).

3 фильтр (fn)

Удаляет все элементы из набора совпавших элементов, которые не соответствуют указанной функции.

4 есть (селектор)

Проверяет текущий выбор по выражению и возвращает истину, если хотя бы один элемент выбора соответствует данному селектору.

5 карта (обратный вызов)

Преобразуйте набор элементов в объекте jQuery в другой набор значений в массиве jQuery (который может содержать или не содержать элементы).

6 нет (селектор)

Удаляет элементы, соответствующие указанному селектору, из набора совпадающих элементов.

7 срез (начало, [конец])

Выбирает подмножество совпадающих элементов.

Методы обхода JQuery DOM

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

Sr. No. Методы и описание
1 добавить (селектор)

Добавляет дополнительные элементы, соответствующие заданному селектору, в набор совпадающих элементов.

2 andSelf ()

Добавить предыдущий выбор к текущему выбору.

3 дети ([селектор])

Получите набор элементов, содержащий всех уникальных непосредственных дочерних элементов каждого из согласованного набора элементов.

4 ближайший (селектор)

Получить набор элементов, содержащий ближайший родительский элемент, соответствующий указанному селектору, включая начальный элемент.

5 содержимое ()

Найдите все дочерние узлы внутри совпадающих элементов (включая текстовые узлы) или в документе содержимого, если элемент является iframe.

6 конец( )

Вернуть самую последнюю «деструктивную» операцию, вернув набор совпавших элементов в предыдущее состояние.

7 найти (селектор)

Ищет дочерние элементы, соответствующие указанным селекторам.

8 следующий ([селектор])

Получите набор элементов, содержащий уникальных ближайших братьев и сестер каждого из заданного набора элементов.

9 nextAll ([селектор])

Найдите все элементы-братья после текущего элемента.

10 offsetParent ()

Возвращает коллекцию jQuery с позиционированным родителем первого совпадающего элемента.

11 родительский ([селектор])

Получите прямого родителя элемента. Если вызывается для набора элементов, parent возвращает набор своих уникальных прямых родительских элементов.

12 родители ([селектор])

Получить набор элементов, содержащий уникальных предков согласованного набора элементов (кроме корневого элемента).

13 prev ([селектор])

Получите набор элементов, содержащий уникальных предыдущих братьев и сестер каждого из согласованного набора элементов.

14 prevAll ([селектор])

Найдите все элементы-братья перед текущим элементом.

15 братья и сестры ([селектор])

Получите набор элементов, содержащий всех уникальных братьев и сестер каждого из согласованного набора элементов.