Explication détaillée de l'utilisation du sélecteur jQuery [selector1][selector2][selectorN]-js tutoriel-php.cn

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

黄舟

Libérer： 2017-06-23 13:56:09

original

1647 Les gens l'ont consulté

Vue d'ensemble

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

Paramètres

selector1Selector

Copier après la connexion

Sélecteur d'attribut

selector2Selector

Copier après la connexion

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

selectorNSelector

Copier après la connexion

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" />

Copier après la connexion

Code jQuery :

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

Copier après la connexion

Résultat :

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Résultat :

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