recherche

Maison  >  Article  >  interface Web  >  Explication détaillée de l'utilisation du sélecteur jQuery [selector1][selector2][selectorN]

Explication détaillée de l'utilisation du sélecteur jQuery [selector1][selector2][selectorN]

黄舟
黄舟original
2017-06-23 13:56:091648parcourir

Vue d'ensemble

CompositeSélecteur d'attribut, utilisé lorsque plusieurs conditions doivent être remplies en même temps.

Paramètres

selector1Selector

Sélecteur d'attribut

selector2Selector

Un autre sélecteur d'attribut pour affiner davantage la portée

selectorNSelector

Tout attribut multiple sélecteurs

Exemple

Description :

Trouver tous les attributs contenant id, et son attribut name se termine par man

Code HTML :

<input id="man-news" name="man-news" /> <input name="milkman" /> 
<input id="letterman" name="new-letterman" /> <input name="newmilk" />

Code jQuery :

$("input[id][name$=&#39;man&#39;]")

Résultat :

[ <input id="letterman" name="new-letterman" /> ]

Faire correspondre chaque sélecteur Les éléments reçus sont fusionnés et renvoyés ensemble.

jQuery( "selector1, selector2, selectorN" )

selector1 : toute sélection valide

selector2 : autres sélections valides

selectorN : plus d'options valides pour aussi longtemps que vous le souhaitez.

Vous pouvez spécifier n'importe quel nombre de sélecteurs à combiner en un seul résultat. Cette combinaison d'expressions multiples est un moyen efficace de sélectionner différents éléments. Comme ils seront dans l'ordre dans lequel ils se trouvent dans le fichier, l'ordre des éléments DOM dans l'objet jQuery renvoyé peut ne pas être le même. Une autre combinaison de sélecteurs est la méthode .add().

Exemple :

Exemple : Recherchez n'importe quel élément qui correspond aux trois sélecteurs ci-dessous. 

<!DOCTYPE html>
<html>
<head>
  <style>
 
  div,span,p {
    width: 126px;
    height: 60px;
    float:left;
    padding: 3px;
    margin: 2px;
    background-color: #EEEEEE;
    font-size:14px;
  }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div>div</div>
 
  <p class="myClass">p class="myClass"</p>
  <p class="notMyClass">p class="notMyClass"</p>
  <span>span</span>
<script>$("div,span,p.myClass").css("border","3px solid red");</script>
 
</body>
</html>

Résultat :

Explication détaillée de lutilisation du sélecteur jQuery [selector1][selector2][selectorN]

Exemple : Afficher l'ordre dans l'objet jQuery.

<!DOCTYPE html>
<html>
<head>
  <style>
  b { color:red; font-size:16px; display:block; clear:left; }
  div,span,p { width: 40px; height: 40px; float:left;
               margin: 10px; background-color: blue;
               padding:3px; color:white;
             }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <span>span</span>
 
  <p>p</p>
  <p>p</p>
  <div>div</div>
  <span>span</span>
 
  <p>p</p>
  <div>div</div>
  <b></b>
<script>
    var list = $("div,p,span").map(function () {
      return this.tagName;
    }).get().join(", ");
    $("b").append(document.createTextNode(list));
</script>
 
</body>
</html>

Résultat :

Explication détaillée de lutilisation du sélecteur jQuery [selector1][selector2][selectorN]

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!

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
Article précédent：Solutions aux problèmes avec le sélecteur jquery [attribut=valeur]Article suivant：Solutions aux problèmes avec le sélecteur jquery [attribut=valeur]

Articles Liés

Voir plus