Maison >interface Web >js tutoriel >Utilisation du sélecteur hiérarchique jQuery Analysis_jquery

Utilisation du sélecteur hiérarchique jQuery Analysis_jquery

WBOY
WBOYoriginal
2016-05-16 16:14:521277parcourir

Dans un document HTML, chaque élément se trouve toujours à une certaine position dans l'arborescence des nœuds DOM, et il existe toujours une certaine relation hiérarchique entre les éléments de la hiérarchie du document, comme la relation entre parent et enfant.

1. Sélecteur d'élément enfant

est utilisé pour rechercher tous les éléments enfants sous un élément parent donné. Le format de syntaxe est :

Copier le code Code comme suit :
$("parent->enfant");

2. Sélecteur d'élément descendant

est utilisé pour faire correspondre tous les éléments descendants sous un élément ancêtre donné. Le format de syntaxe est :

Copiez le code Le code est le suivant. :
$("ancêtre descendant");

3. Sélecteur d'élément frère immédiat

est utilisé pour faire correspondre tous les éléments suivants immédiatement après l'élément précédent. Le format de syntaxe est :

Copier le code Le code est le suivant :
$("précédent suivant")

4. Sélecteur d'éléments frères et sœurs adjacents

est utilisé pour sélectionner tous les éléments frères derrière un élément. Le format de syntaxe est le suivant :

Copier le code Le code est le suivant :
$("préc~frères et sœurs")

Exemple complet :

Copier le code Le code est le suivant :

Sélecteur de niveau                                                                                               & Lt; div id = "div1" & gt; sous-élément maindiv : l'ID est div1 & lt;/div & gt; & Lt; div id = "div2" & gt; sous-élément maindiv : l'ID est div2 & lt;/div & gt;                                                                                                                                                                                                                                                                                   ; & Lt; label & gt; tous les sous-éléments de maindiv sont : div1, div2 & lt;/label & gt;


Le rendu est présenté ci-dessous :




J'espère que cet article sera utile à la programmation jQuery de chacun.
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