jQuery-Start-Tutorial – Verwendung von Selektoren und Ereignissen
jQuery bietet zwei Möglichkeiten, Elemente von HTML auszuwählen:
Die erste besteht darin, CSS- und Xpath-Selektoren zu kombinieren, um eine zu übergebende Zeichenfolge zu bilden zum Konstruktor von jQuery (z. B. $("div > ul a"));
Die zweite besteht darin, mehrere Methoden des jQuery-Objekts zu verwenden. Diese beiden Methoden können auch kombiniert eingesetzt werden.
Um diese Selektoren zu testen, versuchen wir, die erste geordnete Liste in unserem Starterkit.html auszuwählen und zu ändern.
Zunächst müssen wir diese Liste selbst auswählen list hat eine ID namens „orderedlist“, die übliche Javascript-Schreibmethode ist document.getElementById(„orderedlist“). In jQuery machen wir Folgendes: $(document).ready(function() {
$ („#orderedlist ").addClass("red");
}); Hier wird ein CSS-Stil rot im Starterkit an die bestellte Liste angehängt (Anmerkung des Übersetzers Keel: Verweisen Sie auf den Kern im CSS-Verzeichnis im Testpaket. css, in in dem der rote Stil definiert ist). Daher werden Sie nach dem Aktualisieren von starterkit.html feststellen, dass sich die Hintergrundfarbe der ersten geordneten Liste in Rot ändert, während sich die Hintergrundfarbe der zweiten geordneten Liste nicht ändert.
Jetzt fügen wir einige neue Stile hinzu die untergeordneten Knoten der Liste. $(document).ready(function() {
$("#orderedlist > li").addClass("blue");
}); in der geordneten Liste ist der Stil „blau“ angehängt.
Jetzt machen wir etwas Komplizierteres. Wenn die Maus auf dem Li-Objekt platziert und wegbewegt wird, wird der Stil geändert, aber er wird nur auf das letzte Element der Liste wirksam. } , function() {
$(this).removeClass("green"); Finden Sie es hier. (Anmerkung des Übersetzers Keel: Lesen Sie diesen Artikel, um loszulegen. Die Kultivierung hängt vom Einzelnen ab. Wenn Sie nach dem Start mehr wissen möchten, müssen Sie früher oder später die Links in diesem Absatz lesen!)
Jedes onXXX-Event Alle sind gültig, wie zum Beispiel onclick, onchange, onsubmit usw., alle verfügen über jQuery-äquivalente Darstellungsmethoden (Anmerkung des Übersetzers Keel: jQuery mag onXXX nicht, daher wurden sie in XXX geändert und on wurde entfernt). Einige andere Ereignisse, wie z. B. „Ready“ und „Hover“, stellen ebenfalls entsprechende Methoden bereit.
Die vollständige Liste der Ereignisse finden Sie in Visual jQuery in der Spalte „Ereignisse“.
Mit diesen Selektoren und Ereignissen können Sie bereits viele Dinge tun, aber hier ist ein besseres Gut Sachen! $(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this) .html() + „ BAM! $("#orderedlist).find("li") genau wie $("#orderedlist li").
each() iteriert alle li und kann auf dieser Basis mehr verarbeiten. Die meisten Methoden, wie z addClass(), kann ihre eigene every() verwenden. In diesem Beispiel wird html() verwendet, um den HTML-Text jedes li abzurufen und etwas Text anzuhängen und ihn an den HTML-Text von li zu setzen (Anmerkung des Übersetzers Keel: Von hier aus Sie können beispielsweise sehen, dass die Methode .html() den HTML-Code des Objekts abruft und .html('xxx') 'xxx' als HTML-Code festlegt)
Eine weitere häufig auftretende Aufgabe besteht darin, einige Methoden für DOM-Elemente aufzurufen, die nicht von jQuery abgedeckt werden. Stellen Sie sich einen Reset vor, nachdem Sie erfolgreich mit AJAX übermittelt haben: $(document).ready( function() {
;
}); Um es zu schreiben, müssen Sie kann diese ID in form1 oder testForm ändern, dann $("#form1") oder $("#testForm") verwenden, um sie darzustellen, und sie dann testen)
Dieser Code wählt alle aus. Das Element mit der ID „form“ und einem reset() wird auf dem ersten aufgerufen. Wenn Sie mehr als ein Formular haben, können Sie Folgendes tun: $(document).ready(function() {
// damit können Sie mehrere Formulare gleichzeitig zurücksetzen
$("#reset").click( function() {
});(Anmerkung von Übersetzer Keel: Bitte beachten Sie, dass Sie diese Codes selbst in custom.js schreiben und die Wirkung auf starterkit.html testen müssen, um sie zu erleben! Beachten Sie ggf. den HTML-Code von starterkit.html )
Auf diese Weise können Sie: Nachdem Sie auf den Link „Zurücksetzen“ geklickt haben, werden alle Formularelemente im Dokument ausgewählt und reset() wird für alle ausgeführt.
Ein weiteres Problem besteht möglicherweise darin, dass bestimmte Elemente nicht ausgewählt werden sollen. jQuery bietet die Methoden filter() und not(), um dieses Problem zu lösen. filter() verwendet einen Filterausdruck, um die ausgewählten Elemente zu reduzieren, die nicht mit dem Filterausdruck übereinstimmen, und not() wird verwendet, um alle ausgewählten Elemente zu löschen, die dem Filterausdruck entsprechen. Betrachten Sie eine ungeordnete Liste, und Sie möchten alle Elemente auswählen, die haben keine ul-Unterelemente. $(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});This Der Code wählt alle li-Elemente aus und entfernt dann li-Elemente, die keine untergeordneten ul-Elemente haben. Nach dem Aktualisieren des Browsers haben alle li-Elemente einen Rahmen, mit Ausnahme des li-Elements des ul-Unterelements.
(Anmerkung des Übersetzers Keel: Bitte achten Sie auf die äußerst praktische Methode css() und erinnern Sie Sie noch einmal daran, den Effekt tatsächlich zu testen und zu beobachten. Wie wäre es beispielsweise mit der Änderung des CSS-Stils? Wie wäre es mit dem Hinzufügen eines weiteren CSS? Stil? So: $("li").not("[ul]").css("border", "1px solid black").css("color",red");)
Der obige Code Die [Ausdruck]-Syntax in ist von XPath abgeleitet und kann als Filter für Elemente und Attribute verwendet werden. Beispielsweise möchten Sie möglicherweise alle Links mit dem Namensattribut auswählen: $(document).ready( Funktion () {
$("a[@name]").background("#eee");
}); Dieser Code fügt allen Links mit dem Namensattribut eine Hintergrundfarbe hinzu. (Anmerkung des Übersetzers Keel: Diese Farbe ist zu subtil, es wird empfohlen, sie als $("a[@name]").background("red"); zu schreiben)
Die häufigere Situation ist die Auswahl Für den Link nach Namen müssen Sie möglicherweise einen Link mit einem charakteristischen href-Attribut auswählen. Das Verständnis von href kann in verschiedenen Browsern inkonsistent sein, daher verwenden wir eine teilweise Übereinstimmung ("*=") anstelle einer vollständigen Übereinstimmung ("="): $(document).ready(function() {
irgendwo nach /content/gallery
});
}); Bisher wurden Selektoren verwendet, um untergeordnete Elemente auszuwählen oder Elemente zu filtern. Eine andere Situation besteht darin, das vorherige oder nächste Element auszuwählen, beispielsweise eine FAQ-Seite. Wenn Sie auf die Frage klicken, wird die Antwort wie folgt angezeigt: $(document).ready( function() { $ ('#Faq'). Find ('dd').
if (answer.is(':visible')) {
Antwort. slideUp();
} else {
answer.slideDown();
}
});
});Hier verwenden wir einige Kettenausdrücke, um die Codemenge zu reduzieren und ihn intuitiver und verständlicher zu gestalten. So wie „#faq“ nur einmal ausgewählt wird, wird mit der end()-Methode die erste find()-Methode beendet (rückgängig gemacht), sodass wir später mit „dt“ weitersuchen können, ohne $( „#faq“) zu schreiben. .find('dt').
Im Click-Ereignis verwenden wir $(this).next(), um ein dd-Element direkt unter dt zu finden, was uns ermöglicht, schnell die Antwort unter der angeklickten Frage auszuwählen.
(Anmerkung des Übersetzers Keel: Dieses Beispiel ist wirklich cool. Die Antworten in den FAQ können verkleinert werden! Von der Idee, next() zu verwenden, bis zur Realisierung dieser Effekte gibt es viele Stellen, die wir verdauen müssen . Achten Sie auf if (answer. Für die Verwendung von is(':visible')) achten Sie auf answer.slideUp(); am Anfang)
Zusätzlich zur Auswahl von Elementen derselben Ebene können Sie auch das übergeordnete Element auswählen. Vielleicht möchten Sie das übergeordnete Element eines Links in einem bestimmten Absatz des Artikels hervorheben, wenn der Benutzer die Maus bewegt. Versuchen Sie Folgendes: $(document).ready(function() {
$("a").hover (function () {
this) .Parents ("P"). removeclass ("Highlight"); Wenn Sie auf einen bestimmten Absatz des Artikels verweisen, wird der Absatz, in dem er sich befindet, vollständig verwendet. Wenden Sie den Hervorhebungsstil an und stellen Sie ihn nach dem Entfernen in seinem ursprünglichen Zustand wieder her.
(Anmerkung des Übersetzers Keel: Hervorhebung ist der in core.css definierte Stil. Sie können ihn auch ändern. Beachten Sie, dass es hier eine zweite Funktion() gibt. Dies ist eine Funktion der Hover-Methode. Bitte überprüfen Sie sie (in der API-Dokumentation finden Sie oben Beispiele.)
Schauen wir uns diesen Schritt an, bevor wir fortfahren: jQuery macht den Code kürzer und einfacher zu verstehen und zu warten. Das Folgende ist die Abkürzung von $(document). ready(callback) Methode: $(function() {
// Code, der ausgeführt werden soll, wenn das DOM bereit ist
}); angewendet auf unser Hello World-Beispiel, es kann so aussehen: $(function() {
$( "a").click(function() {
warning("Hallo Welt!");
}); Um andere Aspekte weiter zu erkunden, beginnen Sie mit AJAX!
Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!
