ホームページ > 記事 > ウェブフロントエンド > jQuery の子とは何を意味しますか?
jQuery の子とは何を意味しますか?
- 青灯夜游オリジナル
- 2022-05-12 20:29:163615ブラウズ
jQuery では、children は「子供」を意味し、現在の jQ オブジェクトの子をフィルタリングして条件付きの子を取得する、つまりすべての子要素を検索するために使用されるフィルタです。構文は「object.children( filter)」のパラメータ「filter」は、子要素の検索範囲を絞り込むための条件を設定するために使用されます。
このチュートリアルの動作環境: Windows7 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。
jQuery では、children は「子供」を意味します。
children はフィルターです。名前が示すように、子をフィルターします。現在の jQ オブジェクトの子をフィルターし、修飾された子を取得できます。つまり、子要素を検索します。 。
children() メソッドは、選択された要素のすべての直接の子要素を返します。このメソッドは、DOM ツリーの単一レベルを下位に移動するだけです。
構文:
$(selector).children(filter)
パラメータ「filter」: 条件を設定し、サブ要素の検索範囲を狭めるセレクター式を指定するために使用されます。
例 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.2.1.min.js"></script>
<style>
.descendants * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("ul").children().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body class="descendants">body (曾祖先节点)
<div style="width:500px;">div (祖先节点)
<ul>ul (直接父节点)
<li>li (子节点)
<span>span (孙节点)</span>
</li>
<li>li (子节点)
<span>span (孙节点)</span>
</li>
</ul>
</div>
</body>
</html> の直接の子要素をすべて返す
#例 2: 検索範囲を狭める
filter パラメーターを使用して、<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<style>
.descendants * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("ul").children("li.1").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body class="descendants">body (曾祖先节点)
<div style="width:500px;">div (祖先节点)
<ul>ul (直接父节点)
<li class="1">li (子节点)
<span>span (孙节点)</span>
</li>
<li class="2">li (子节点)
<span>span (孙节点)</span>
</li>
</ul>
</div>
</body>
</html>
以上がjQuery の子とは何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。