Explication détaillée de l'utilisation du parcours ascendant, du parcours descendant, du parcours frère et du filtrage jquery

1. Traverse 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 le. é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 le retour. nœuds ancêtres.

Remarque : 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 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 qu'il n'inclut pas les points de correspondance ancestralSelector. un sélecteur de filtre Pour filtrer les nœuds ancêtres renvoyés, si l'ancêtreSelector est vide ou si aucun élément correspondant à l'ancêtreSelector n'est trouvé dans ses nœuds ancêtres, 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 dit positionné signifie que son attribut CSS position est défini sur. relatif, absolu, fixe, joue principalement un grand rôle dans le calcul du décalage et de la position des éléments lors de la présentation de l'animation.

⑤ $(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. La différence avec la méthode parents est la suivante :

a.closest recherche vers le haut à partir de l'élément actuel lui-même
parents commence à partir de l'élément du 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é, la collection sera 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'objet jQuery de l'élément

Autre utilisation de la transformation :

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

2. Traverse vers le bas - éléments descendants

① .children([childrenSelector]) : renvoie l'enfant direct de l'élément éléments, 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 variantes :

.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 des frères et sœurs - éléments frères et sœurs

① .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 frères renvoyés. élément.

② .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'il rencontre un élément frère qui correspond à la condition du sélecteur. La méthode peut accepter un filtre de paramètre facultatif pour filtrer le. éléments frères et sœurs 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. Filtre

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

.filter(function(index)) : filtre l'ensemble d'éléments actuellement correspondant en fonction de la fonction de rappel L'index du paramètre transmis par la fonction de rappel fait référence à l'index. , cela peut être utilisé pour représenter l'élément dans le corps de la fonction. La fonction renvoie vrai/false, l'élément enfant est conservé, sinon l'élément enfant est exclu.

Autre utilisation de la déformation :

.filter(element|jQueryObject)

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

③ .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érifiez la collection d'éléments basée sur un sélecteur ou une fonction de rappel ou un élément ou un objet jQuery, si elle en contient au moins un qui correspond à l'expression donnée l'élément renvoie vrai, sinon renvoie faux. De plus, si la collection d'éléments actuelle est vide ou si l'expression est vide, faux est renvoyé. Cette méthode est généralement utilisée dans les fonctions de rappel telles que le traitement d'événements gestionnaire pour déterminer s'il s'agit d'un élément spécifique

⑦ .map(callback(index,domElement)) : correspond à l'élément actuel Le tableau est converti 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 tableau jQueryObject ordinaire, vous pouvez utiliser jQuery.map(array,callback(objectOfArray,). indexOfArray)).

⑧ .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, des objets jQuery ordinaires et A. fonction de rappel qui renvoie une variable booléenne.

⑨ .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.

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!