Comment interroger des éléments dans un nœud avec jquery-Questions et réponses frontales-php.cn

Comment interroger des éléments dans un nœud avec jquery

青灯夜游

Libérer： 2023-02-13 09:02:28

original

2752 Les gens l'ont consulté

Méthode de requête : 1. Utilisez la fonction children() pour interroger les éléments du sous-ensemble direct dans le nœud spécifié, la syntaxe est "$(selector).children(filter)" ; 2. Utilisez la fonction find() pour interroger le nœud spécifié Tous les éléments de sous-ensemble (y compris les sous-ensembles de sous-ensembles), la syntaxe est "$(selector).find(filter)".

Comment interroger des éléments dans un nœud avec jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6, ordinateur Dell G3.

Interroger les éléments d'un nœud revient à interroger les éléments enfants du nœud spécifié.

Il existe deux méthodes pour jquery pour interroger les éléments enfants :

Méthode children() : récupère les éléments du sous-ensemble direct sous cet élément
Méthode find() : récupère tout (y compris les sous-ensembles) sous cet élément (sous-ensemble de) éléments de sous-ensemble

Jetons un coup d'œil à ces deux méthodes.

Méthode jquery children() La méthode

children() renvoie tous les éléments enfants directs de l'élément sélectionné.

Arbre DOM : Cette méthode ne parcourt qu'un seul niveau dans l'arborescence DOM. Pour parcourir plusieurs niveaux (renvoyant des nœuds descendants ou d'autres descendants), utilisez la méthode find().

Astuce : Pour parcourir un seul niveau dans l'arborescence DOM ou parcourir tous les chemins jusqu'à l'élément racine du document (renvoyant des nœuds parents ou d'autres ancêtres), utilisez la méthode parent() ou parents().

Remarque : Cette méthode ne renvoie pas de nœuds de texte. Pour renvoyer tous les nœuds enfants contenant un nœud de texte, utilisez la méthode contents().

Syntaxe

$(selector).children(filter)

Copier après la connexion

Paramètres	Description
filtre	Facultatif. Spécifie une expression de sélecteur qui restreint la recherche d'éléments enfants.

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.3.min.js"></script>
		<style>
			div * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>

		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("ul").children("*").css({
						"color": "red",
						"border": "2px solid red"
					});
				});
			});
		</script>
	</head>

	<body class="ancestors">
		<div style="width:500px;">div (父节点)
			<ul>ul (指定元素)
				<li>li (子节点1)
					<span>span (孙节点1)</span>
				</li>
				<li>li (子节点2)
					<span>span (孙节点2)</span>
				</li>
				<li>li (子节点3)
					<span>span (孙节点3)</span>
				</li>
			</ul>
		</div>
		<button>选取ul的所有直接子元素</button>
	</body>

</html>

Copier après la connexion

Comment interroger des éléments dans un nœud avec jquery

méthode jquery find()

find() renvoie les éléments descendants de l'élément sélectionné. (Les descendants sont les descendants, les petits-enfants, les arrière-petits-enfants, etc.)

Arbre DOM : Cette méthode parcourt tous les chemins jusqu'aux descendants de l'élément DOM jusqu'au dernier descendant ().

Syntaxe :

$(selector).find(filter)

Copier après la connexion

Paramètres	Description
filter	Obligatoire. Une expression de sélecteur, un élément ou un objet jQuery qui filtre les descendants de recherche. Remarque : Pour renvoyer plusieurs descendants, utilisez des virgules pour séparer chaque expression.

Explication : Le paramètre filter est utilisé pour filtrer les résultats de la recherche. Il vous suffit de définir le paramètre sur "*" pour trouver tous les sous-éléments.

Exemple : interrogez tous les éléments enfants

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<style>
			div * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>

		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("ul").find("*").css({
						"color": "red",
						"border": "2px solid red"
					});
				});
			});
		</script>
	</head>

	<body class="ancestors">
		<div style="width:500px;">div (父节点)
			<ul>ul (指定元素)
				<li>li (子节点1)
					<span>span (孙节点1)</span>
				</li>
				<li>li (子节点2)
					<span>span (孙节点2)</span>
				</li>
				<li>li (子节点3)
					<span>span (孙节点3)</span>
				</li>
			</ul>
		</div>
		<button>选取ul的所有子元素</button>
	</body>

</html>

Copier après la connexion

Comment interroger des éléments dans un nœud avec jquery