sélecteur de couche jQuery

HiérarchieSélecteur

Tous les nœuds du document ont l'une ou l'autre relation entre eux. Nous pouvons décrire la relation entre les nœuds en utilisant les relations familiales traditionnelles et traiter l'arbre du document comme un arbre généalogique. Il y aura alors des relations directes entre les nœuds, tels que le père et le fils, les frères et les grands-parents.

Il existe encore de nombreuses similitudes et différences entre les sélecteurs de niveau

Le sélecteur hiérarchique a un nœud de référence

Le sélecteur descendant contient le contenu sélectionné du sélecteur enfant

Sélection générale des frères et sœurs L'élément sélectionné par le sélecteur frère adjacent et le sélecteur frère général doivent être sous le même élément parent

Sélecteur
Regardez le code suivant :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>子选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("div>a").css("color","red");
		})
	</script>
</head>
<body>
	<div>
		<a href="#">php 中文网</a>
	</div>
</body>
</html>

Trouvez l'élément en dessous via le div et rendez la couleur de la balise a rouge

Sélecteur descendant, nous en avons déjà parlé dans la section précédente, les amis peuvent y jeter un oeil au code source

Sélecteur de frères et sœurs adjacents

Le code est le suivant

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>子选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".p1 + p").css("color","red");
		})
	</script>
</head>
<body>
		<div>
			<p>php 中文网</p>
			<p class="p1">php 中文网</p>
			<p>php 中文网</p>
		</div>
</body>
</html>

Sélecteur général de correspondance entre frères et sœurs

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>子选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".p1 ~ p").css("color","red");
		})
	</script>
</head>
<body>
		<div>
			<p>php 中文网</p>
			<p>php 中文网</p>
			<p>php 中文网</p>
			<p class="p1">php 中文网</p>
			<p>php 中文网</p>
			<p>php 中文网</p>
			<p>php 中文网</p>
		</div>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子选择器</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("div>a").css("color","red"); }) </script> </head> <body> <div> <a href="#">php 中文网</a> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique