Селекторы jQuery, которые мы видели до сих пор, позволяют нам выбирать элементы вниз по дереву DOM. Но во многих случаях вам нужно выбрать родительский элемент. Методы для выбора таких элементов называются traversal-методами. С помощью них мы можем очень легко перемещаться по всему дереву DOM.

DOM-traversing (дословно обход, пересечение) — одна из важнейших особенностей jQuery. Чтобы максимально использовать ее, вам необходимо понять отношения между элементами в дереве DOM.

<body>
    <div class="container">
        <h1>Hello World</h1>
        <p>This is a <em>simple paragraph</em>.</p>
        <ul>
            <li>Item One</li>
            <li>Item Two</li>
        </ul>
    </div>
</body>

HTML-код в приведенном выше примере может быть представлен следующим деревом DOM:

Приведенная выше диаграмма, показывает отношения родитель / потомок между элементами:

  • Элемент <body> является родителем элемента <div> и предком всего, что находится внутри него. Вложенный элемент <div> является родителем элементов <h1>, <p> и <ul> и потомком элемента <body>.
  • Элементы <h1>, <p> и <ul> являются братьями и сестрами, поскольку они имеют одного и того же родителя.
  • Элемент <h1> является дочерним элементом элемента <div> и потомком элемента <body>. Этот элемент не имеет дочерних элементов.
  • Элемент <p> является родителем элемента <em>, потомком элемента <div> и потомком элемента <body>. Содержащий элемент <em> является дочерним элементом этого элемента <p> и потомком элементов <div> и <body>.
  • Точно так же элемент <ul> является родителем элементов <li>, потомком элемента <div> и потомком элемента <body>. Содержащие элементы <li> являются дочерними элементами этого элемента <ul> и потомками элементов <div> и <body>. Кроме того, оба элемента <li> являются братьями и сестрами.

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

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.