jQuery-Selektor
jQuery Selector ermöglicht es Ihnen, zu einer Gruppe von HTML-Elementen oder ein einzelnes Element zu betreiben.
jQuery-Selektor
jQuery Selector ermöglicht es Ihnen, zu einer Gruppe von HTML-Elementen oder ein einzelnes Element zu betreiben.
Selektor jQuery basiert auf id Elemente, Klassen, Typen, Attribute, Attributwerte und so weiter "Suchen" (oder wählen) HTML-Elemente. Es basiert auf vorhandenen CSS - Selektoren , zusätzlich hat es auch einige benutzerdefinierte Selektoren.
Alle jQuery Selektoren mit einem Dollarzeichen beginnen: $ ().
Selektoren
jQuery Selektoren wählen Elemente basierend auf dem Elementnamen.
Wählen Sie alle <p> Elemente auf der Seite:
Beispiele
Der Benutzer klickt auf die Schaltfläche, die alle <p> Elemente versteckt sind:
Beispiele
$("button").click(function(){
$("p").hide();
});
});
Versuchen »
#id Selektor
jQuery #ID Selektoren wählen Elemente durch das id-Attribut des HTML-Elements angegeben.
id Elemente auf der Seite sollte eindeutig sein, so dass Sie nur die Elemente in der Seite durch #id Selektor auswählen möchten.
Id durch die folgenden Syntaxelemente auswählen:
Beispiele
Wenn der Benutzer auf die Schaltfläche klickt, haben die Elemente id = "test" Attribut versteckt werden:
Beispiele
$("button").click(function(){
$("#test").hide();
});
});
Versuchen »
.class- Selektor
jQuery Klasse Selektor kann ein Element von der angegebenen Klasse finden.
Die Syntax lautet wie folgt:
Beispiele
Der Benutzer klickt auf den Button, nachdem alle Elemente mit class = "test" sind versteckte Attribute:
Beispiele
$("button").click(function(){
$(".test").hide();
});
});
Versuchen »
Weitere Beispiele
| 语法 | 描述 | 实例 |
|---|---|---|
| $("*") | 选取所有元素 | 在线实例 |
| $(this) | 选取当前 HTML 元素 | 在线实例 |
| $("p.intro") | 选取 class 为 intro 的 <p> 元素 | 在线实例 |
| $("p:first") | 选取第一个 <p> 元素 | 在线实例 |
| $("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 | 在线实例 |
| $("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 | 在线实例 |
| $("[href]") | 选取带有 href 属性的元素 | 在线实例 |
| $("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 | 在线实例 |
| $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 | 在线实例 |
| $(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 | 在线实例 |
| $("tr:even") | 选取偶数位置的 <tr> 元素 | 在线实例 |
| $("tr:odd") | 选取奇数位置的 <tr> 元素 | 在线实例 |
Separate Datei mit jQuery-Funktion
Wenn Ihre Website viele Seiten enthält, und Sie möchten Ihre jQuery-Funktion ist leicht zu pflegen, so setzen Sie sich bitte Ihre jQuery-Funktionen in separate JS-Datei.
Wenn wir in jQuery-Tutorial zeigen, wird die Funktion direkt an den <head> Abschnitt hinzugefügt. Allerdings legte sie in einer separaten Datei besser sein wird, wie folgt aus (Datei durch das Attribut src verwiesen):
Beispiele
<script src="http://cdn.static.w3big.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>