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
-Element aus.
$("p.intro") wählt alle
-Elemente mit class="intro" aus.
$("p#demo") wählt alle
-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") | Alle -Elemente |
| . Klasse .class | $(".intro.demo") | Alle Elemente mit class="intro" und class="demo" |
| :first | $("p:first") | First element |
| :last | $("p:last") | Das letzte -Element |
| :even | $(" tr:even" ) | Alle geraden |
| :odd | $("tr:odd") | Alle ungeraden< tr> 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 Titelelemente- |
| :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 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") | Alle-Elemente |
| :text | $(":text") | Alle |
| :password | $(":password") | Alle -Elemente vom Typ="password" |
| :radio | $(":radio") | Alle -Elemente vom Typ="radio" |
| :checkbox | $(":checkbox") | Alle -Elemente vom Typ="checkbox" |
| :submit | $(":submit") | Alle -Elemente vom Typ="submit" |
| :reset | $ (":reset") | Alle -Elemente vom Typ="reset" |
| :button | $(":button") | Alle -Elemente vom Typ="button" |
| :image | $(":image") | Alle -Elemente vom Typ="image" |
| :file | $(":file") | Alle -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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
