jQuery Selektoren sind eine der wichtigsten Teile der jQuery-Bibliothek.
jQuery Selektoren
jQuery-Selektoren können Sie HTML-Element (e) auszuwählen und zu manipulieren.
jQuery Selektoren werden verwendet, um "finden" (oder wählen) HTML-Elemente basierend auf ihren Namen, id, Klassen, Typen, Attribute, Werte von Attributen und vieles mehr.It's based on the existing CSS Selectors , and in addition, it has some own custom selectors. Es basiert auf den bestehenden CSS - Selektoren , und darüber hinaus hat er einige eigene benutzerdefinierte Selektoren.
Alle Wähler in jQuery mit dem Dollarzeichen beginnen und Klammern: $ ().
Das Element Selector
Der Wähler jQuery Element wählt Elemente basierend auf dem Elementnamen.
Sie können alle <p> Elemente auf einer Seite wie folgt aus:
$("p")
Beispiel
Wenn ein Benutzer auf eine Schaltfläche klickt, werden alle <p> Elemente werden ausgeblendet:
Beispiel
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Versuch es selber "Die #id Selector
Die jQuery #id Selektor verwendet das id-Attribut eines HTML-Tags das spezifische Element zu finden.
Eine id sollte innerhalb einer Seite eindeutig sein, so dass Sie die #id Selektor verwenden sollten, wenn Sie ein einzelnes, einzigartiges Element finden möchten.
Um ein Element mit einer bestimmten ID finden, schreiben Sie eine Hash-Zeichen, durch die ID des HTML-Elements folgt:
$("#test")
Beispiel
Wenn ein Benutzer auf eine Schaltfläche klickt, wird das Element mit id = "test" wird ausgeblendet:
Beispiel
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Versuch es selber "Die .class- Selector
Die jQuery-Klassenauswahl findet Elemente mit einer bestimmten Klasse.
Um Elemente mit einer bestimmten Klasse zu finden, schreiben Sie eine Periode Charakter, durch den Namen der Klasse folgt:
$(".test")
Beispiel
Wenn ein Benutzer auf eine Schaltfläche klickt, werden die Elemente mit class = "test" ausgeblendet werden:
Beispiel
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Versuch es selber "Weitere Beispiele für jQuery Selektoren
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all <p> elements with class="intro" | Try it |
| $("p:first") | Selects the first <p> element | Try it |
| $("ul li:first") | Selects the first <li> element of the first <ul> | Try it |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | Try it |
| $("[href]") | Selects all elements with an href attribute | Try it |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | Try it |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | Try it |
| $("tr:even") | Selects all even <tr> elements | Try it |
| $("tr:odd") | Selects all odd <tr> elements | Try it |
Nutzen Sie unsere jQuery Selector Tester die verschiedenen Selektoren zu demonstrieren.
Eine vollständige Referenz aller jQuery Selektoren, gehen Sie bitte auf unsere jQuery Selektoren Referenz .
Funktionen in einer separaten Datei
Wenn Ihre Website viele Seiten enthält, und Sie möchten Ihre jQuery-Funktionen zu erhalten, um einfach, können Sie Ihre jQuery-Funktionen in einem separaten JS-Datei setzen.
Wenn wir jQuery in diesem Tutorial zeigen, werden die Funktionen direkt in den <head> Sektion hinzugefügt.However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file): Aber manchmal ist es besser, sie in einer separaten Datei zu platzieren, wie dies (das src-Attribut verwenden, um die JS-Datei zu beziehen):
Beispiel
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 » Übung 6»