Учебники

JQuery — DOM Traversing

Ноябрь 20, 2018

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

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

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

Live Demo

<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) и так далее.

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

Каждый дочерний элемент начинает свой индекс с нуля, поэтому к элементу списка 2 можно получить доступ с помощью $ («li»). Eq (1) и так далее.

пример

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

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() {
            $("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) можно использовать для фильтрации всех элементов из набора совпадающих элементов, которые не соответствуют указанным селекторам. Селектор может быть написан с использованием любого синтаксиса селектора.

пример

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

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() {
            $("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> —

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

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

Методы JOM-фильтра DOM

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

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

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

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

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

3 фильтр (фн)

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

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

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

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

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

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

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

7 ломтик (начало, [конец])

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поиск элементов-потомков, соответствующих указанным селекторам.

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

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

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

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

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

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

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

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

37
Share: