jQuery の子とは何を意味しますか?-フロントエンドQ&A-php.cn

jQuery の子とは何を意味しますか?

青灯夜游

リリース： 2022-06-07 17:07:33

オリジナル

3632 人が閲覧しました

jQuery では、children は「子供」を意味し、現在の jQ オブジェクトの子をフィルタリングして条件付きの子を取得する、つまりすべての子要素を検索するために使用されるフィルタです。構文は「object.children( filter)」のパラメータ「filter」は、子要素の検索範囲を絞り込むための条件を設定するために使用されます。

jQuery の子とは何を意味しますか?

このチュートリアルの動作環境: Windows7 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jQuery では、children は「子供」を意味します。

jQuery の子とは何を意味しますか?

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>

ログイン後にコピー

jQuery の子とは何を意味しますか?

#例 2: 検索範囲を狭める

<!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 の子とは何を意味しますか? の直接の子要素であるクラス名「1」を持つすべての