smsc banner 468x60smsc banner 728x90smsc banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180beget banner 468x60beget banner 728x90beget banner 930x180

jQuery предоставляет такие полезные методы, такие как children() и find(), которые можно использовать для получения в DOM-дереве любого потомка в иерархии.

jQuery-метод children()

jQuery-метод children() используется для получения прямых дочерних элементов выбранного элемента.

В следующем примере будут выделены прямые дочерние элемента <ul> — элементы <li>, путем добавления класса .highlight.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery children() Demo</title>
<style>
    .highlight{
        background: yellow;
    }        
</style>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script>$(document).ready(function(){ $("ul").children().addClass("highlight");
});
</script>
</head><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>

jQuery-метод find()

jQuery-метод find() используется для получения элементов-потомков выбранного элемента.

Методы find() и children() похожи, за исключением того, что метод find() осуществляет поиск по нескольким уровням вниз по дереву DOM до последнего потомка, тогда как метод children() выполняет поиск только по одному уровню вниз по дереву DOM. В следующем примере будет добавлена граница вокруг всех элементов <li>, которые являются потомками элемента <div>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery find() Demo</title>
<style>
    *{
        margin: 10px;
    }
    .frame{
        border: 2px solid green;
    }        
</style>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script>$(document).ready(function(){ $("div").find("li").addClass("frame");
});
</script>
</head><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>

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery find() Demo</title>
<style>
    *{
        margin: 10px;
    }
    .frame{
        border: 2px solid green;
    }        
</style>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script>$(document).ready(function(){ $("div").find("*").addClass("frame");
});
</script>
</head><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>
flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600

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

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

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

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

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

Руководство по синтаксису в 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) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…