Maison > Article > interface Web > Que signifie trouver dans jQuery ?

Que signifie trouver dans jQuery ?

青灯夜游original: 2023-02-10 11:09:473945parcourir

find signifie recherche et est une fonction intégrée à jQuery qui est utilisée pour parcourir et obtenir les nœuds descendants de chaque élément de la collection d'éléments actuelle ; la syntaxe est "spécifier l'élément object.find(selector)" et le paramètre " selector" contient les informations permettant de faire correspondre l'expression Selector pour l'ensemble actuel d'éléments, utilisée pour filtrer les nœuds descendants renvoyés.

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

find signifie rechercher et est une fonction intégrée à jQuery qui est utilisée pour parcourir et obtenir les nœuds descendants de chaque élément de la collection d'éléments actuelle.

En termes simples, la méthode find() peut obtenir tous les éléments de sous-ensemble (y compris les sous-ensembles de sous-ensembles) sous l'élément, c'est-à-dire qu'elle peut obtenir tous les éléments enfants. La méthode

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 ().

Si vous souhaitez obtenir tous les éléments enfants qui remplissent les conditions, filtrez via le sélecteur.

Syntaxe pour find

$(selector).find(filter)

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.

Remarque : Le paramètre

filter est requis dans la méthode find(), contrairement aux autres méthodes de traversée d'arbre.
Pour renvoyer tous les éléments descendants, veuillez utiliser le sélecteur "*".

Détails

Étant donné un objet jQuery représentant une collection d'éléments DOM, la méthode .find() nous permet de rechercher dans l'arborescence DOM les descendants de ces éléments et de construire un nouvel objet jQuery avec les éléments correspondants. La méthode .find() est similaire à la méthode .children(), sauf qu'elle ne parcourt qu'un seul niveau dans l'arborescence DOM. La première caractéristique évidente de la méthode

.find() est qu'elle accepte une expression de sélection du même type que l'expression que nous avons passée à la fonction $(). Les éléments seront filtrés en testant s'ils correspondent à l'expression.

Exemple 1

Renvoyer tous les éléments dans les descendants de

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.6.3.min.js"></script>
		<script>
			$(document).ready(function() {
				$("ul").find("span").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
		<style>
		.ancestors *{ 
			display: block;
			border: 2px solid lightgrey;
			color: lightgrey;
			padding: 5px;
			margin: 15px;
		}
		</style>
	</head>
	<body class="ancestors">body (曾祖先节点)

		<div style="width:500px;">div (祖先节点)
			<ul>ul (直接父节点)
				<li>li (子节点)
					<span>span (孙节点)</span>
				</li>
			</ul>
		</div>

	</body>
</html>

Que signifie trouver dans jQuery ?

Exemple 2 : Obtenir le premier élément enfant

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/jquery-3.6.0.min.js"></script>
        <script>
            $(function() {
                $("button").click(function() {
                    $("ul").find(":first-child").css("color", "red");
                })
            })
        </script>
    </head>
    <body>
        <ul style="border: 1px solid red;">
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨子</li>
            <li>橘子</li>
        </ul>
        <button>父元素ul的第一个子元素</button>
    </body>
</html>

Que signifie trouver dans jQuery ?

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter une couche contextuelle en javascriptArticle suivant：Comment implémenter une couche contextuelle en javascript

Articles Liés

Voir plus