Explication détaillée de la traversée jQuery des éléments et nœuds DOM METHODS_jquery

L'exemple de cet article décrit la méthode jQuery pour parcourir les éléments et les nœuds DOM. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1. Traversée vers le haut - éléments ancêtres

① $(selector).parent([filter]) : renvoie l'élément parent direct de l'élément correspondant au sélecteur. La méthode peut accepter un sélecteur de filtre pour filtrer l'élément parent renvoyé.

② $(selector).parents([filter]) : renvoie tous les nœuds ancêtres de l'élément correspondant, jusqu'à l'élément racine du document html. La méthode peut accepter un sélecteur de filtre pour filtrer les nœuds ancêtres renvoyés.

Remarques : La différence entre parent et parents est que parent renvoie le nœud parent direct, parents renvoie tous les nœuds ancêtres et $("html").parent() renvoie le nœud de document, tandis que $("html"). parents() Renvoie vide.

③ $(selector).parentUntil([ancestorSelector][,filter]) : renvoie tous les nœuds ancêtres entre le nœud correspondant et ancestralSelector. Notez que les points correspondants de ancestralSelector ne sont pas inclus. filtrez le nœud Ancestor de retour, si ancestralSelector est vide ou si aucun élément correspondant à ancestralSelector n'est trouvé dans son nœud ancêtre, tous les nœuds ancêtres sont renvoyés, ce qui est équivalent à la méthode parents().

$(selector).parentUtil(element[,ancestorSelector]) : L'utilisation et la signification sont les mêmes que ci-dessus.

④ $(selector).offsetParent() : renvoie l'élément ancêtre positionné le plus récent de l'élément correspondant. L'élément ancêtre positionné signifie que son attribut de position CSS est défini sur relatif, absolu, fixe, ce qui est principalement. calculé lors du processus de démonstration de l'animation. Le décalage et la position des éléments jouent un rôle important.

⑤ $(selector).closest(ancestorSelector[,context]) : Obtenez l'élément ancêtre le plus proche qui correspond à ancestralSelector. La méthode peut accepter un contexte de paramètre pour contrôler la portée de la recherche. Les différences avec la méthode des parents sont les suivantes :

a.closest recherche vers le haut à partir de l'élément actuel lui-même
parents commence à partir de l'élément de nœud parent.

b.closest parcourt l'arborescence DOM jusqu'à ce qu'il trouve une position d'élément qui correspond à l'ancêtreSelector
parents parcourt l'arborescence DOM jusqu'à l'élément racine du document, en ajoutant chaque élément ancêtre à une collection temporaire ; si un sélecteur est appliqué, cette collection est filtrée en fonction du sélecteur

c.closest renvoie un objet jQuery contenant 0 ou un élément
parents renvoie un objet jQuery contenant 0, un ou plusieurs éléments

Autre utilisation de la transformation :

$(selector).closest(ancestorSelectors[,context]);
$(selector).closest(jQuery object);
$(selector).closest(element)

2. Traversée vers le bas - éléments descendants

① .children([childrenSelector]) : renvoie les éléments enfants directs de l'élément. La méthode peut accepter un paramètre pour filtrer les éléments enfants renvoyés.

② .find(descendantSelector) : renvoie tous les éléments descendants de l'élément qui correspondent à descendantSelector, jusqu'au dernier descendant.

Autre utilisation de la transformation :

.find(jQuery object);
.find(element);

③ .contents() : renvoie tous les éléments enfants de l'élément. La différence avec les enfants est que le contenu inclut des nœuds de texte et des nœuds de commentaires.

3. Traversée fraternelle - éléments frères

① .siblings([selector]) : renvoie tous les éléments frères de l'élément actuel. La méthode peut recevoir un paramètre facultatif pour filtrer les éléments frères renvoyés.

② .next([selector]) : renvoie l'élément frère suivant de l'élément actuel. La méthode peut accepter un paramètre facultatif pour filtrer les éléments frères renvoyés.

③ .nextAll([selector]) : renvoie tous les éléments frères après l'élément actuel. La méthode peut accepter un paramètre facultatif pour filtrer les éléments frères renvoyés.

④ .nextUntil([selector][,filter]) : renvoie tous les éléments frères de l'élément actuel jusqu'à ce qu'un élément frère correspondant à la condition du sélecteur soit rencontré. La méthode peut accepter un filtre de paramètre facultatif pour filtrer les éléments frères renvoyés.

⑤ .prev/prevAll/prevUntil a le même usage et des fonctions similaires que next/nextAll/nextUntil, mais le sens de recherche est opposé.

4. Filtrage

① .filter(selector) : filtrez le sous-ensemble qui répond aux conditions du sélecteur à partir de l'ensemble d'éléments correspondants actuel pour réduire la portée de correspondance.

.filter(function(index)) : Filtre l'ensemble d'éléments actuellement correspondant en fonction de la fonction de rappel. L'index du paramètre transmis à la fonction de rappel fait référence à l'index de l'élément dans l'ensemble. représente l'élément dans le corps de la fonction, et la fonction renvoie vrai/faux, si vrai est renvoyé, les éléments enfants sont conservés, sinon les éléments enfants sont exclus.

Autre utilisation de la transformation :

.filter(element|jQueryObject)

② .first() : renvoie le premier élément de l'ensemble d'éléments correspondant actuel.

③ .last() : renvoie le dernier élément de l'ensemble d'éléments correspondants actuel.

④ .eq(index/-index) : renvoie l'élément à la position spécifiée dans l'ensemble d'éléments correspondants actuel. L'index commence à 0 et un nombre négatif signifie un tri de la fin au début.

⑤ .has(selector/element) : renvoie une collection d'éléments avec des sous-éléments spécifiques de la collection actuelle d'éléments, à l'exclusion des éléments qui n'ont pas de sous-éléments correspondants. Les éléments enfants peuvent être mis en correspondance à l'aide du sélecteur de paramètres ou de l'objet élément.

⑥ .is(selector|function(index)|element|jQueryObject) : vérifie la collection d'éléments basée sur un sélecteur ou une fonction de rappel ou un élément ou un objet jQuery, et renvoie si elle contient au moins un élément qui correspond à l'expression donnée true, sinon false est renvoyé. De plus, si la collection d'éléments actuelle est vide ou si l'expression est vide, false est renvoyé. Cette méthode est généralement utilisée dans les fonctions de rappel telles que les gestionnaires d'événements pour déterminer s'il s'agit d'un élément spécifique

⑦ .map(callback(index,domElement)) : convertissez le tableau d'éléments actuellement correspondant en un autre tableau d'objets (qu'il s'agisse d'un élément dom ou non) via la valeur de retour de la fonction de rappel si vous souhaitez convertir un jQueryObject ordinaire. tableau, vous pouvez utiliser la méthode jQuery map(array,callback(objectOfArray,indexOfArray)) pour y parvenir.

⑧ .not(selector|elements|function(index)|jQuery object) : Supprimez les éléments qui répondent à l'ajustement des paramètres du tableau d'éléments actuellement correspondant. Les paramètres peuvent être un sélecteur, un élément DOM, un objet jQuery ordinaire et un retour booléen. fonction de rappel de la variable.

⑨ .slice(start[,end]) : récupère un sous-ensemble de la plage spécifiée à partir de l'ensemble d'éléments actuellement correspondant. Si le début et la fin sont des nombres négatifs, obtenez la direction de l'élément de la fin au début.

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Algorithme de traversée JQuery et résumé des compétences", "Résumé des compétences d'opération de table jQuery (table) " , "Résumé des effets et techniques de glisser jQuery", "Résumé des techniques d'extension jQuery", "Résumé des effets spéciaux classiques courants jQuery" , "Résumé de l'utilisation des animations et des effets spéciaux jQuery", "Résumé de l'utilisation du sélecteur jquery" et "Plug-ins communs jQuery et résumé de l'utilisation"

J'espère que cet article sera utile à tous ceux qui programment jQuery.