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

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

黄舟

Freigeben： 2017-06-23 13:56:09

Original

1673 Leute haben es durchsucht

Übersicht

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

Parameter

selector1Selector

Nach dem Login kopieren

Attributselektor

selector2Selector

Nach dem Login kopieren

Ein weiterer Attributselektor, um den Umfang weiter einzugrenzen

selectorNSelector

Nach dem Login kopieren

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

Nach dem Login kopieren

jQuery-Code:

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

Nach dem Login kopieren

Ergebnis:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!