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 | братья и сестры ([селектор])
Получите набор элементов, содержащий всех уникальных братьев и сестер каждого из согласованного набора элементов. |