Explication détaillée de l'utilisation de jquery selector_jquery

Le sélecteur de jQuery est extrêmement puissant. Voici un bref résumé des méthodes de recherche d'éléments couramment utilisées

$("#myELement") Sélectionnez l'élément dont la valeur id est égale à myElement La valeur id ne peut pas être répétée. dans le document Une seule valeur d'ID est myElement, donc ce que vous obtenez est le seul élément
$ ("div") pour sélectionner tous les éléments de balise DIV et renvoyer le tableau d'éléments DIV
$ (". MyClass" ) Choisissez d'utiliser la classe MyClass class Tous les éléments de css
$("*") Pour sélectionner tous les éléments du document, vous pouvez utiliser diverses méthodes de sélection pour une sélection conjointe : Par exemple, $("#myELement, div,.myclass")

Sélecteur en cascade :
$("form input") Sélectionne tous les éléments d'entrée dans les éléments du formulaire
$("#main > *") Sélectionne tous les éléments enfants avec la valeur id de main
$("label input") Sélectionne le nœud d'élément d'entrée suivant de tous les éléments d'étiquette. Après le test, le sélecteur renvoie tous les éléments d'étiquette d'entrée qui sont directement suivis d'une étiquette d'entrée
$(" #prev ~ div" ) Sélecteur frère, ce sélecteur renvoie toutes les balises div appartenant au même élément parent de l'élément tag avec l'identifiant prev

Sélecteur de filtre de base :
$("tr:first") Select le premier
$("tr:last") de tous les tr ​​éléments Sélectionnez le dernier
$("input:not(:checked) span") de tous les tr ​​éléments Filtrer

 : Tous les éléments d'entrée du sélecteur coché

$("tr:even")                                                                                                                       peut sélectionner les 0ème, 2ème, 4ème... éléments de tous les éléments tr (remarque : car les éléments multiples sélectionnés sont des tableaux, donc le numéro de série commence à 0)

$ ("tr: ODD") Sélectionnez le premier, 3, 5... ... un élément $("td:eq (2)")                                                               peut sélectionner l'élément td portant le numéro de série 2 parmi tous les éléments td
$ ("td: gt (4)")                                                      peut sélectionner l'élément td dont le numéro de série est supérieur à 4 parmi les éléments td
$("td:gt(4)")        Element $ ("td: ll (4)") Sélectionnez tous les éléments TD avec un numéro de série dans l'élément TD inférieur à 4
$ (": Header")
$ ("div: Animated")
Sélecteur de filtre de contenu :

$("div:contains('John')") Sélectionne tous les éléments contenant du texte John dans le div
$("td:empty") Sélectionne tous les éléments vides Tableau d'éléments td (sans compter les nœuds de texte)
$("div:has(p)") Sélectionnez tous les éléments div contenant des balises p Filtre visuel sélecteur pour le tableau d'éléments
du nœud parent :

$("div:hidden") Sélectionnez tous les éléments div cachés
$("div:visible") Sélectionnez tous les éléments div visuels
sélecteur de filtre d'attribut :

$("div[id]") Sélectionnez tous les éléments div contenant l'attribut id
$("input[name='newsletter']" ) Sélectionnez tous les éléments d'entrée dont le nom l'attribut est égal à 'newsletter'

$("input[name!='newsletter']") Sélectionnez tous les éléments d'entrée dont l'attribut name n'est pas égal à 'newsletter'

$(" input[name^='news']") Sélectionnez tous les éléments d'entrée dont l'attribut name commence par 'news'
$("input[name$='news']") Sélectionnez tous les noms Éléments d'entrée dont les attributs se terminent par ' news'
$("input[name*='man']") Sélectionnez tous les éléments d'entrée dont l'attribut name contient 'news'

$("input[id ][name$='man' ]") Vous pouvez utiliser plusieurs attributs pour la sélection conjointe. Ce sélecteur est un sélecteur de filtre pour obtenir tous les éléments qui contiennent des attributs id et dont les attributs se terminent par man

sous-éléments :

$( "ul li:nth-child(2)"),$("ul li:nth-child(impair)"),$("ul li:nth-child(3n 1)" )

$ ("div span:first-child") Renvoie le tableau des premiers nœuds enfants de tous les éléments div
$("div span:last-child") Renvoie tous les éléments div Le tableau du dernier nœud
$ ("bouton div : only-child") Renvoie le tableau de tous les nœuds enfants qui n'ont qu'un seul nœud enfant dans tous les divs

Sélecteur d'élément de formulaire :

$(":input")                                                                                            peut sélectionner tous les éléments de saisie du formulaire, y compris la saisie, la zone de texte, la sélection et le bouton                                                                                                                   )              Sélectionnez tous les éléments de saisie du mot de passe
$(":radio")                                                                                                                               sortir dehors en utilisant "  Tous les éléments d'entrée soumis
$(":image")                                                                                             peut sélectionner tous les éléments d'entrée du bouton
$(":file") Sélectionner tous les éléments d'entrée du fichier
$(":hidden") Sélectionnez tous les éléments de saisie de type champs cachés ou masqués de le formulaire

éléments du formulaire Sélecteur de filtre :

$(":enabled") Sélectionnez tous les éléments du formulaire utilisables
$(":disabled") Sélectionnez tous les éléments du formulaire inutilisables
$ ("": vérifié") Sélectionnez tous les éléments du formulaire cochés
$("select option:selected") Sélectionnez tous les éléments sélectionnés dans les éléments enfants de select



Sélectionnez un nom Le texte valeur du td précédent de la zone de texte de saisie de "S_03_22"
$("input[@ name =S_03_22]").parent().prev().text()

Le nom commence avec
$("input[@ name ^='S_']").not("[@ name $='_R']")

La valeur sélectionnée d'une radio nommée radio_01
$("input[@ name =radio_01][@checked]").val();


$("A B" ) Recherchez tous les nœuds enfants sous l'élément A, y compris les nœuds enfants indirects
$("A>B") Recherchez les nœuds enfants directs sous l'élément A
$("A B") Trouvez les nœuds frères derrière l'élément A, y compris les nœuds enfants indirects
$("A~ B") Recherchez les nœuds frères derrière l'élément A, à l'exclusion des nœuds enfants indirects

1. $("A B") Recherchez les nœuds frères sous l'élément A Tous les nœuds enfants, y compris les nœuds enfants indirects

Exemple : Rechercher tous les éléments d'entrée dans le formulaire

Code HTML :

Nom :

                                                                                 "newsletter /&g t;

Code jQuery :

$( "form input")
Résultat :

[ , ]

2. $ ("A>B") Recherchez les nœuds enfants directs sous l'élément A
Exemple : faites correspondre tous les éléments d'entrée enfants dans le formulaire.

Code HTML :




Copier le code


Le code est le suivant :

Name :

           Newsletter :< /label>        

Code jQuery :




Copier le code

Le code est le suivant :

$(" formulaire > saisie") Résultat :

Copier le code

Le code est le suivant :

[ ]

3. $("A B") Recherchez les nœuds frères après l'élément A, y compris les nœuds enfants indirects
Exemple : faites correspondre tous les éléments d'entrée suivant l'étiquette

Code HTML :

Copier le code Le code est le suivant :

Nom :

                           <

< /form>

Code jQuery :

Copier le code

Le code est le suivant : $(" saisie de l'étiquette")

Résultat :

Copier le code

Le code est le suivant :[ , ]

4 $("A~B") Trouvez les nœuds frères après le A. élément, à l'exclusion du nœud enfant non direct
Exemple : Rechercher tous les éléments d'entrée qui sont frères et sœurs du formulaire

Code HTML :




Copier le code

Le code est le suivant :Nom :

                                                                               



Code jQuery :




Copier le code

Le code est le suivant :

$(" formulaire ~ saisie") Résultat :

Copier le code

Le code est le suivant :

[ ]