suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Verwendung des jQuery-Selektors [selector1][selector2][selectorN].

Detaillierte Erläuterung der Verwendung des jQuery-Selektors [selector1][selector2][selectorN].

黄舟
黄舟Original
2017-06-23 13:56:091648Durchsuche

Übersicht

ZusammengesetzterAttributselektor, wird verwendet, wenn mehrere Bedingungen gleichzeitig erfüllt werden müssen.

Parameter

selector1Selector

Attributselektor

selector2Selector

Ein weiterer Attributselektor, um den Umfang weiter einzugrenzen

selectorNSelector

Jedes Mehrfachattribut Selektoren

Beispiel

Beschreibung:

Alle Attribute finden, die eine ID enthalten und deren Namensattribut mit man endet

HTML-Code:

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

jQuery-Code:

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

Ergebnis:

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

Übereinstimmung mit jedem Selektor Die empfangenen Elemente werden zusammengeführt und zusammen zurückgegeben.

jQuery( "selector1, selector2, selectorN" )

selector1: jede gültige Auswahl

selector2: andere gültige Auswahl

selectorN: weitere gültige Optionen für solange du möchtest.

Sie können eine beliebige Anzahl von Selektoren angeben, die zu einem einzigen Ergebnis kombiniert werden sollen. Diese Kombination mehrerer Ausdrücke ist eine effiziente Möglichkeit, verschiedene Elemente auszuwählen. Da sie in der Reihenfolge vorliegen, in der sie in der Datei vorliegen, ist die Reihenfolge der DOM-Elemente im zurückgegebenen jQuery-Objekt möglicherweise nicht dieselbe. Eine weitere Selektorkombination ist die Methode .add().

Beispiel:

Beispiel: Suchen Sie ein beliebiges Element, das mit den folgenden drei Selektoren übereinstimmt. 

<!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>

Ergebnis:

Detaillierte Erläuterung der Verwendung des jQuery-Selektors [selector1][selector2][selectorN].

Beispiel: Reihenfolge im jQuery-Objekt anzeigen.

<!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>

Ergebnis:

Detaillierte Erläuterung der Verwendung des jQuery-Selektors [selector1][selector2][selectorN].

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des jQuery-Selektors [selector1][selector2][selectorN].. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Lösungen für Probleme mit dem JQuery-Selektor [Attribut=Wert]Nächster Artikel：Lösungen für Probleme mit dem JQuery-Selektor [Attribut=Wert]

In Verbindung stehende Artikel

Mehr sehen