jQueryの>とはどういう意味ですか?-フロントエンドQ&A-php.cn

jQueryの>とはどういう意味ですか?

青灯夜游

リリース： 2022-03-01 18:26:29

オリジナル

2257 人が閲覧しました

jquery では、「>」は子要素セレクターであり、特定の要素の子要素のみを選択できます。構文は「$("E > F")」で、E は親です。要素、F はサブ要素です。これは、E 要素の下にあるすべてのサブ要素 F が選択されることを意味します。

jQueryの>とはどういう意味ですか?

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

jquery では、「>」は階層セレクターの一種であるサブ要素セレクターを指します。

子要素セレクター (E>F)特定の要素の子要素のみを選択できます。ここで、E は親要素、F は子要素です。ここで E> F が表すことは、E 要素の下にあるすべてのサブ要素 F が選択されていることです。

構文:

$("E > F")

ログイン後にコピー

jQuery のすべてのセレクターはドル記号 $() で始まります。

戻り値: 一致する結果セットを返します

例:

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("#main > *").css("border", "3px double red");
			});
		</script>
		<style>
			body {
				font-size: 14px;
			}

			span#main {
				display: block;
				background: yellow;
				height: 110px;
			}

			button {
				display: block;
				float: left;
				margin: 2px;
				font-size: 14px;
			}

			div {
				width: 90px;
				height: 90px;
				margin: 5px;
				float: left;
				background: #bbf;
				font-weight: bold;
			}

			div.mini {
				width: 30px;
				height: 30px;
				background: green;
			}
		</style>
	</head>
	<body>
		<span id="main">
			<div></div>
			<button>Child</button>
			<div class="mini"></div>
			<div>
				<div class="mini"></div>
				<div class="mini"></div>
			</div>
			<div><button>Grand</button></div>
			<div><span>A Span <em>in</em> child</span></div>
			<span>A Span in main</span>
		</span>
	</body>
</html>

ログイン後にコピー

分析:

$ ("#main > *").css("border", "3px double red");

は、span 要素の子要素と一致し、子要素の最初である必要がありますcollection 要素。一致する要素は次のとおりです (紫色)

jQueryの>とはどういう意味ですか?