jQuery Dom Traversal: Contr?lez facilement les éléments Web

Cet article explorera en profondeur la méthode de traversée JQuery Dom, montrant comment utiliser jQuery pour sélectionner facilement les éléments de la page Web et fonctionner en fonction de leur relation avec d'autres éléments de la page.

Points de base:

• JQUERY DOM Traversal permet aux développeurs de naviguer et de manipuler facilement les éléments de la page Web et de fonctionner par rapport à la sélection initiale, y compris le remplacement de la sélection d'origine ou l'ajout et la suppression d'éléments.
• jQuery fournit plusieurs méthodes pour filtrer les éléments en fonction de la position des éléments par rapport à d'autres éléments et s'ils ont des classes spécifiques, etc. Les méthodes incluent eq, first, last, slice, filter, map et
.
• children jQuery fournit également des méthodes de traversée DOM pour accéder aux éléments des parents, de l'enfant ou des frères et s?urs. Ces méthodes incluent find, parent, parents, closest, siblings, prev, prevAll, next, nextAll,
,
• , add , addBack et end. contents not D'autres méthodes jQuery liées à la traversée DOM incluent
,

,

,

,

et

. Ces méthodes aident à ajouter plus d'éléments à la sélection, à restaurer à l'ensemble des éléments précédents ou à exclure certains éléments de la sélection.

Filtrage des éléments Commen?ons par comment filtrer la sélection dans un élément plus spécifique. Vous pouvez filtrer des éléments en fonction de nombreuses conditions, telles que leur position par rapport à d'autres éléments et s'ils ont des classes spécifiques. Dans la plupart des cas, vous finirez par sélectionner moins d'éléments que vous commencez à sélectionner. Ce qui suit est une liste de différentes méthodes de filtrage:

• eq - Cette méthode réduit les éléments correspondants définis sur des éléments situés à l'index que vous avez spécifié. L'indice commence à partir de zéro. Par conséquent, pour sélectionner le premier élément, vous devez utiliser $("selector").eq(0). à partir de la version 1.4, vous pouvez fournir un entier négatif qui compte les éléments de la fin plut?t que le début.
• first et last - first Les méthodes ne renverront que le premier élément de l'ensemble d'élément correspondant, tandis que last renverra le dernier élément de l'ensemble d'élément correspondant. Aucune méthode n'accepte aucun paramètre.
• slice - Si vous recherchez tous les éléments d'une collection dont l'index est dans une plage donnée, vous pouvez utiliser slice(). Cette méthode accepte deux paramètres. Le premier paramètre spécifie l'index de démarrage de la fa?on dont la méthode doit démarrer la tranche, et le deuxième paramètre spécifie l'index vers lequel la sélection doit se terminer. Le deuxième paramètre est facultatif et s'il est omis, tous les éléments dont l'indice est supérieur ou égal à l'indice de démarrage sont sélectionnés.
• filter - Cette méthode réduit votre ensemble d'éléments sur des éléments qui correspondent au sélecteur ou via les conditions définies dans la fonction que vous passez à cette méthode. Voici un exemple d'utilisation d'un sélecteur:

$("li").filter(":even").css( "font-weight", "bold" );

Vous pouvez également utiliser la fonction pour sélectionner le même élément:

$("li")
.filter(function( index ) {
   return index % 2 === 0;
})
.css( "font-weight", "bold" );

Vous pouvez également utiliser cette fonction pour effectuer des sélections plus complexes, telles que:

.filter(function( index ) {
 return $( "span", this ).length >= 2;
})

Cela ne sélectionnera que des éléments avec au moins deux balises <span></span>.

• map - Vous pouvez utiliser cette méthode pour passer chaque élément dans la sélection actuelle via une fonction, et enfin créer un nouvel objet jQuery avec la valeur de retour. L'objet jQuery renvoyé contient un tableau que vous pouvez utiliser la méthode get pour gérer le tableau de base.

DOM Traversal

Considérez une situation où vous connaissez le sélecteur que vous pouvez utiliser pour accéder à divers éléments, mais vous devez utiliser l'élément parent de chacun d'eux. De plus, l'élément parent n'a pas de classe ou de balises spécifiques qui leur sont communes. La seule chose qu'ils ont en commun, c'est qu'ils sont tous deux des éléments parents d'éléments auxquels vous pouvez accéder. J'ai rencontré des situations similaires plusieurs fois.

jQuery fournit de nombreuses méthodes utiles pour accéder aux éléments parents, enfants ou s?urs. Présenons-les un par un:

• children - Cette méthode nous permet d'obtenir des éléments enfants de chaque élément dans l'ensemble des éléments. Ces éléments enfants peuvent être éventuellement filtrés par des sélecteurs.
• find - Cette méthode obtiendra tous les descendants de chaque élément de l'ensemble d'élément correspondant, qui sont filtrés par des sélecteurs ou des éléments. Dans ce cas, le paramètre de sélecteur transmis à find() n'est pas facultatif. Si vous souhaitez obtenir tous les descendants, vous pouvez passer le sélecteur universel (*) en tant que paramètre à cette méthode.
• parent - Cette méthode obtiendra l'élément parent de chaque élément dans l'ensemble actuel. L'élément parent peut être éventuellement filtré à l'aide de sélecteurs.
• parents - Cette méthode obtiendra tous les ancêtres de chaque élément de la collection. Il accepte également un paramètre de sélecteur facultatif pour filtrer les ancêtres. La différence entre parent() et parents() est que le premier ne traverse qu'un niveau vers le haut, tandis que parents() traverse vers le haut vers l'élément racine du document.
• closest - Cette méthode obtient le premier élément qui correspond au sélecteur donné en testant l'élément lui-même, puis en traversant l'arbre Dom vers le haut. Il existe deux différences significatives entre parents() et closest(). parents() commence la traversée à partir de l'élément parent de l'élément, et closest() commence la traversée de l'élément lui-même. Une autre différence est que closest() ne passe par l'arborescence DOM que jusqu'à ce qu'une correspondance soit trouvée, tandis que parents() se déplacera jusqu'à ce qu'il atteigne l'élément racine du document.
• siblings - Cette méthode obtient les éléments de frère de chaque élément dans l'ensemble d'élément correspondant. Vous pouvez éventuellement fournir un sélecteur en tant que paramètre pour obtenir uniquement des éléments de frère avec des sélecteurs correspondants.
• prev - Cette méthode obtiendra exactement le même élément de chaque élément de notre collection. Si vous fournissez un sélecteur, la méthode ne sélectionnera l'élément que s'il correspond au sélecteur.
• prevAll - Cette méthode obtiendra tous les éléments précédents de chaque élément de notre collection. Comme d'autres méthodes, vous pouvez fournir des sélecteurs pour filtrer les éléments retournés.
• next - Cette méthode n'obtient que le même élément immédiatement après l'élément correspondant. Si un sélecteur est fourni, il n'obtiendra que des sélecteurs correspondants.
• nextAll - Cette méthode obtiendra tous les éléments frères et s?urs ultérieurs de chaque élément de la collection. Les éléments et s?urs peuvent être filtrés sélectivement en fournissant un sélecteur.

Plus de fonctions liées à la traversée DOM

Lorsque vous traversez le DOM, vous pouvez rencontrer des situations où vous devez ajouter plus d'éléments qui ne sont pas liés à la collection originale à la sélection, ou vous devez restaurer à l'ensemble des éléments précédents. JQuery fournit des fonctions que vous pouvez utiliser pour effectuer toutes ces taches.

• add - Cette méthode créera un nouvel objet jQuery qui contiendra de nouveaux éléments ajoutés à la liste des éléments existants. N'oubliez pas qu'il n'y a aucune garantie que de nouveaux éléments seront ajoutés à la collection existante dans l'ordre, ils sont transmis à la méthode add.
• addBack - JQuery maintient une pile interne qui suit les modifications des ensembles d'éléments. L'appel de toute méthode de traversée pousse un nouvel ensemble d'éléments sur la pile. Si vous souhaitez utiliser les ensembles d'éléments précédents et nouveaux, vous pouvez utiliser la méthode addBack.
• end - Cette méthode met fin à l'opération de filtrage la plus récente et restaure votre élément défini sur son état précédent. Il est utile dans les situations où vous souhaitez manipuler certains éléments liés à l'ensemble actuel d'éléments, restaurer l'ensemble d'origine, puis manipuler différents ensembles d'éléments.
• contents - Si vous souhaitez obtenir tous les éléments de tous les éléments enfants, y compris le texte et les n?uds de commentaires, vous pouvez utiliser la méthode contents. Vous pouvez également utiliser cette méthode pour obtenir le contenu de <iframe></iframe> (si <iframe></iframe> est dans le même domaine que votre page).
• not - Si vous avez un grand ensemble d'éléments et que vous souhaitez sélectionner uniquement les sous-ensembles d'éléments qui ne sont pas qui correspondent à un sélecteur donné, vous pouvez utiliser . à partir de la version 1.4, la méthode peut également accepter une fonction comme un argument pour tester chaque élément en fonction de certaines conditions. Tout élément qui remplit ces conditions sera exclu de l'ensemble filtré. not()

Conclusion

Toutes ces méthodes de jQuery nous fournissent un moyen facile de traverser un ensemble d'éléments à un autre. étant donné que certaines de ces méthodes sont très similaires les unes aux autres, je vous suggère de prêter une attention particulière à eux. Comprendre la différence entre

et parents() ou closest() et next("selector") peut vous éviter des heures de problème dans certains cas. nextAll("selector").eq(0)

J'espère que vous avez apprécié cet article. Si vous avez des conseils que vous souhaitez partager avec d'autres lecteurs, veuillez commenter ci-dessous!

jQuery Dom Traversal FAQ

Quelle est la signification de la traversée de jQuery Dom?

jQuery DOM Traversal est un aspect clé du développement Web, qui permet aux développeurs de naviguer facilement et de manipuler les modèles d'objets de document (DOMS). Il fournit un ensemble de méthodes qui peuvent être utilisées pour parcourir les éléments dans une page Web, ce qui facilite la sélection des éléments spécifiques et effectuer diverses opérations. Cela peut inclure la modification du contenu, du style et même de la structure d'une page Web. La capacité de traverser le DOM fait de JQuery un outil puissant pour le développement Web dynamique.

En quoi JQuery Dom Traversal est-il différent des opérations traditionnelles DOM JavaScript?

Alors que JavaScript fournit sa propre méthode de fonctionnement DOM, JQuery DOM Traversal simplifie le processus et le rend plus efficace. Il fournit une syntaxe plus intuitive et concise qui rend le code plus facile à écrire et à comprendre. De plus, JQuery gère de nombreux problèmes de compatibilité entre les navigateurs croisés liés à JavaScript, ce qui rend votre code plus robuste et fiable.

pouvez-vous expliquer les méthodes .parent() dans la traversée de jQuery Dom? .children() La méthode

dans jQuery est utilisée pour sélectionner l'élément parent direct d'un élément. Par exemple, si vous avez un élément

à l'intérieur de l'élément .parent(), en utilisant sur <div> sélectionnera <code><div>. D'un autre c?té, la méthode <code>.parent() est utilisée pour sélectionner tous les éléments enfants directs d'un élément. Si vous avez utilisé pour l'élément .children() dans l'exemple précédent, il sélectionnera . .children() Quelle est la différence entre les méthodes <div> et dans <h3> jQuery? <code>.find() .children() Bien que les méthodes et

soient utilisées pour sélectionner des éléments descendants, ils fonctionnent légèrement différemment. La méthode .find() ne traverse que le bas d'un niveau, ce qui signifie qu'il sélectionne uniquement les éléments enfants directs. Cependant, la méthode .children() peut traverser plusieurs niveaux de l'arborescence DOM, ce qui signifie qu'il peut sélectionner tous les descendants de l'élément, pas seulement les éléments enfants directs. .children() .find() Comment puis-je utiliser la méthode

dans JQuery Dom Traversal?

La méthode .siblings() dans jQuery est utilisée pour sélectionner tous les éléments de frère de l'élément sélectionné. Un élément simultané fait référence à un élément qui partage le même élément parent. Par exemple, si vous avez plusieurs éléments

dans un élément

, en utilisant .siblings() sur l'un sélectionnera tous les autres éléments . <div> <code><div> Quel est le but de la méthode <code>.siblings() dans la traversée jQuery Dom? <div> La méthode <h3 id="dans-jQuery-est-utilisée-pour-sélectionner-des-éléments-avec-un-numéro-d-index-spécifique-Il-est-particulièrement-utile-lorsque-vous-avez-plusieurs-éléments-du-même-type-et-que-vous-souhaitez-en-sélectionner-l-un-en-fonction-de-leur-position-dans-le-DOM-Le-numéro-d-index-commence-à-donc-code-eq-code-sélectionnera-le-premier-élément"> dans jQuery est utilisée pour sélectionner des éléments avec un numéro d'index spécifique. Il est particulièrement utile lorsque vous avez plusieurs éléments du même type et que vous souhaitez en sélectionner l'un en fonction de leur position dans le DOM. Le numéro d'index commence à 0, donc <code>.eq() sélectionnera le premier élément, sélectionnera le deuxième élément, et ainsi de suite.

.eq() pouvez-vous expliquer les méthodes .eq(0) dans la traversée de jQuery Dom? .eq(1) Les méthodes

et

dans .first() jQuery sont utilisées pour sélectionner les premiers et derniers éléments du groupe, respectivement. Par exemple, si vous avez un ensemble d'éléments .last(), l'utilisation de

sélectionnera le premier

dans le groupe, et .first() sélectionnera le dernier .last(). <div> <code>.first() Comment puis-je utiliser la méthode <div> dans JQuery Dom Traversal? <code>.last() <div> La méthode dans jQuery est utilisée pour sélectionner des éléments qui remplissent certaines conditions. Vous pouvez transmettre une fonction à la méthode <h3 id="qui-ne-sélectionnera-que-les-éléments-que-la-fonction-renvoie-code-filter-code-Cela-vous-permet-de-créer-des-critères-de-sélection-plus-complexes-et-de-sélectionner-des-éléments-basés-sur-les-attributs-ou-le-contenu-de-l-élément">, qui ne sélectionnera que les éléments que la fonction renvoie <code>.filter(). Cela vous permet de créer des critères de sélection plus complexes et de sélectionner des éléments basés sur les attributs ou le contenu de l'élément.

Quel est le but de la méthode .not() dans la traversée jQuery Dom?

La méthode .not() de jQuery est utilisée pour supprimer les éléments d'une collection. C'est l'opposé de la méthode .filter(). Vous pouvez transmettre un sélecteur, une fonction ou un objet jQuery à la méthode .not(), qui supprimera tous les éléments qui correspondent aux paramètres de la collection.

pouvez-vous expliquer la méthode .has() dans la traversée jQuery Dom?

La méthode

dans jQuery est utilisée pour sélectionner des éléments avec des descendants spécifiques. Vous pouvez transmettre un sélecteur ou un objet jQuery à la méthode .has(), qui sélectionnera tous les éléments contenant au moins un élément qui correspond au paramètre. Ceci est utile lorsque vous souhaitez sélectionner des éléments en fonction de ce que sont les éléments. .has()

Les URL de l'image sont conservées dans la sortie.