Unterschiede in den Anwendungsbeispielen mehrerer häufig verwendeter Selektoren in JQuery

1. Häufig verwendete Filterselektoren in Jquery sind wie folgt:

1 :first, wählen Sie das erste Element aus, z. B. $("p: first") wählt das erste p-Element aus
2, :last, wählt das letzte Element aus, zum Beispiel $("p:last") wählt das letzte p-Element aus
3, :not (Selektor), wählt keine Elemente aus die die „Selektor“-Bedingung erfüllen, wie z. B. $("p:not(.className)"), wählen Sie alle p-Elemente aus, deren Stil nicht className
:even/:odd ist, wählen Sie index Wählen Sie für gerade/ungerade Elemente wie $("p:even") alle p-Elemente mit geraden Indexnummern
5, :eq (Indexnummer)/:gt (Indexnummer)/:lt (Indexnummer) aus ) ), wählen Sie Elemente aus, die der Indexnummer entsprechen/größer als die Indexnummer/kleiner als die Indexnummer sind, z. B. $("p:lt(3)"), und wählen Sie alle p Elemente mit Indexnummern kleiner als 3
aus Hinweis:
Filterselektor Bei Verwendung einer Mischung aus (3)").css("fontSize", "28"); //lt(3) ist die Seriennummer in der neuen Sequenz von gt(0), tun Sie dies nicht als lt(4) schreiben

zwei , Wichtige Punkte
1. Mehrfachbedingungsselektor
Mehrfachbedingungsselektor: $("p,p,span,menuitem"), wählt gleichzeitig aus p-Tag, p-Tag und span-Tag-Element mit Menüelementstil
Beachten Sie, dass im Selektor-
-Ausdruck nicht mehr oder weniger Leerzeichen enthalten sein dürfen, da es leicht zu Fehlern kommt!
2. Relativer Selektor
Geben Sie einfach den zweiten Parameter in $() an, und der zweite Parameter ist das relative Element. Der HTML-Code lautet beispielsweise wie folgt:

<table id="table1"> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
</table>

Dann können Sie den folgenden js-Code verwenden, um die Hintergrundfarbe von td

$("td", $(this)).css( „
Hintergrund“, „rot“), dieser Code verwendet einen relativen Selektor und der ausgewählte td ist relativ zum aktuellen tr-Element. Die ausgewählten td-Elemente sind alle td-Elemente unter dem aktuellen tr-Element und beziehen sich nicht auf td-Elemente in anderen Zeilen.

<script type="text/
javascript
"> 
$(function () { 
$("#table1 tr").click(function () { 
$("td", $(this)).css("background", "red"); 
}); 
}); 
</script>

3. Hierarchischer Selektor:
a $("#p li") ruft alle li-Elemente unter p ab (Nachkommen, Kinder, Kinder von Kindern... ). .)
b $("#p > li") Ruft das direkte untergeordnete li-Element unter p ab // Auf das Leerzeichen achten
c $(".menuitem + p") Ruft das erste Element nach dem ab Stil mit dem Namen „menuitem“ Ein p-Element, das nicht häufig verwendet wird.
d $(".menuitem ~ p") ruft alle p-Elemente nach dem Stilnamen menuitem ab, der nicht häufig verwendet wird.
Der Unterschied im Detail ist (fehleranfälliger Punkt):
Multi-Bedingungsselektor: $("p,p,span,menuiitem"), relativer Selektor: $("td", $(this)) .css ("Hintergrund", "rot")", hierarchischer Selektor: $("#p li") ruft alle li-Elemente unter p ab (Nachkommen, Kinder, Kinder von Kindern ...)

Drei Der Unterschied zwischen ihnen ist:
1. Mehrfachbedingungsselektor: durch ein Komma getrennt,
2. Relativer Selektor: durch 2 Elemente getrennt,
3. Trennen Sie

durch Leerzeichen. Der Beispielcode lautet wie folgt:

<style type="text/css">
  /*高亮显示*/
  .highlight{   
   background-color: gray
  }
 </style>

Das obige ist der detaillierte Inhalt vonUnterschiede in den Anwendungsbeispielen mehrerer häufig verwendeter Selektoren in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!