Heim > Artikel > Web-Frontend > Verwendung und Beispiele für vier jQuery-Selektoren
Dieser Artikel gibt Ihnen eine Zusammenfassung der vier Selektoren und Beispiele von jQuery. Ich hoffe, dass er für alle hilfreich ist.
jQuery Element Selector
jQuery verwendet CSS-Selektoren, um HTML-Elemente auszuwählen.
$("p") wählt das e388a4556c0f65e1904146cc1a846bee-Element aus.
$("p.intro") wählt alle e388a4556c0f65e1904146cc1a846bee-Elemente mit class="intro" aus.
$("p#demo") wählt alle e388a4556c0f65e1904146cc1a846bee-Elemente mit id="demo" aus.
Beispielcode:
jquery-Teil
$(document).ready(function(){//页面加载完成后执行 tagName(); // idName(); // className(); }); function tagName(){ $('p').addClass('heighlight'); } function idName(){ $('#p').addClass('heighlight2'); } function className(){ $('p.pClass').addClass('heighlight2'); }
HTML-Teil
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/select.js" ></script> <link rel="stylesheet" href="css/select.css" /> </head> <body> <p id="p"> <p>this is my name!!</p> <p class="pClass">class is import!</p> <a href="#">you cai!!</a> </p> </body> </html>
CSS-Teil
.heighlight { background-color: blue; } .heighlight2 { background-color: red; } .alt{ background-color:#ccc; }
jQuery Attributauswahl
Abfrage mit XPath-Ausdruck um Elemente mit einem bestimmten Attribut auszuwählen.
$("[href]") wählt alle Elemente mit dem href-Attribut aus.
$("[href='#']") wählt alle Elemente mit einem href-Wert gleich „#“ aus.
$("[href!='#']") wählt alle Elemente mit einem href-Wert ungleich „#“ aus.
$("[href$='.jpg']") wählt alle Elemente aus, deren href-Wert mit „.jpg“ endet.
jquery-Teil, andere Teile sind die gleichen wie oben.
$(document).ready(function(){ attribute(); }); function attribute(){ $('[href="#"]').addClass('heighlight'); }
jQuery CSS-Selektor
.addClass() oder .css()
$(document).ready(function(){ cssName(); }); function cssName(){ $('p').css("background-color","pink"); }
jQuery Custom Selector
$(document).ready(function(){ custom(); }); function custom(){ $('tr:odd').addClass('alt'); }
Anhang
Selektor | Instanz | Auswählen |
---|---|---|
* | $(" * ") | Alle Elemente |
#id | $("#lastname") | Element mit id="lastname" |
.class | $(".intro") | Alle Elemente mit class="intro" |
Element | $("p") | Allee388a4556c0f65e1904146cc1a846bee-Elemente |
. Klasse .class | $(".intro.demo") | Alle Elemente mit class="intro" und class="demo" |
:first | $("p:first") | Firste388a4556c0f65e1904146cc1a846bee element |
:last | $("p:last") | Das letztee388a4556c0f65e1904146cc1a846bee-Element |
:even | $(" tr:even" ) | Alle geradena34de1251f0d9fe1e645927f19a896e8 Elemente |
:odd | $("tr:odd") | Alle ungeraden868c3f8d39a371013a78a87c30e1b0d8 Elemente |
:eq(index) | $(" ul li:eq(3)") | Das vierte Element in der Liste (Index beginnt bei 0) |
:gt(no ) | $("ul li:gt(3)") | Elemente mit Index größer als 3 auflisten |
:lt( no ) | $("ul li:lt(3)") | Elemente mit einem Index von weniger als 3 auflisten |
:not(selector) | $("input:not(:empty)") | Alle Eingabeelemente, die nicht leer sind |
:header | $(":header") | Alle Titelelemente4a249f0d628e2318394fd9b75b4636b1 - 4e9ee319e0fa4abc21ff286eeb145ecc |
:animiert | Alle animierten Elemente | |
:contains(text) | $(" :contains('W3School')") | Enthält alle Elemente der angegebenen Zeichenfolge |
:empty | $(":empty") | Alle Elemente ohne untergeordnete (Element-)Knoten |
:hidden | $("p:hidden") | Alle ausgeblendeten Die e388a4556c0f65e1904146cc1a846bee Element |
:visible | $("table:visible") | Alle sichtbaren Tabellen |
s1,s2,s3 | $("th,td,.intro") | Alle mit passenden ausgewählten Elementen |
[Attribut] | $("[href]") | Alle Elemente mit href-Attribut |
[attribute=value] | $("[href='#']") | Der Wert aller href-Attribute Elemente gleich „#“ |
[attribute!=value] | $("[href!=' # ']") | Alle Elemente, deren href-Attributwert nicht gleich „#“ ist |
[attribute$=value] | $("[href$='.jpg']") | Der Wert aller href-Attribute enthält Elemente, die mit „.jpg“ enden |
:input | $(":input") | Alled5fd7aea971a85678ba271703566ebfd-Elemente |
:text | $(":text") | Alle |
:password | $(":password") | Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="password" |
:radio | $(":radio") | Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="radio" |
:checkbox | $(":checkbox") | Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="checkbox" |
:submit | $(":submit") | Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="submit" |
:reset | $ (":reset") | Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="reset" |
:button | $(":button") | Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="button" |
:image | $(":image") | Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="image" |
:file | $(":file") | Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="file" |
:aktiviert | $(":enabled") | Alle aktivierten Eingabeelemente |
:deaktiviert | $(":disabled") | Alle deaktivierten Eingabeelemente |
:selected | $(":selected") | Alle ausgewählten Eingabeelemente |
:checked | $(":checked") | Alle ausgewählten Eingabeelemente |
Das obige ist der detaillierte Inhalt vonVerwendung und Beispiele für vier jQuery-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!