Wie bereits erwähnt, kann jQuery als "Select and Do" -Bibliothek betrachtet werden. Wir haben viel über die Auswahl gesprochen, also lassen Sie uns jetzt über einige Dinge sprechen. Denken Sie daran, dass das Muster im Grunde so aussieht:
// Select something! $(".something") // Do something! .hide();Anstatt mit theoretischeren Beispielen zu arbeiten, bewegen wir uns direkt in etwas Reales. Wir haben diesen Stift von Drew Barontini gefunden und gegabelt.
Siehe das Stift-Kreditkartenformular von Chris Coyier (@chriscoyier) auf CodePen
In unserem Beispiel haben wir das Kreditkartenformular standardmäßig ausgeblendet. Dann haben wir einen Link erstellt, auf den Sie klicken können, um das Kreditkartenformular nach oben und unten zu verschieben. Wir wählen den Link, dann tun ein slideToggle auf dem Formular. Auswählen und tun!
Wir haben noch nicht viel über Ereignisse gesprochen, aber das ist ein großer Teil von jQuery. Ein Ereignis ist so etwas wie ein Mausklick, ein Tastendruck, ein Bildlauf usw. Der "do" -Teil von "select and do" findet häufig nach einem Ereignis statt. Keine Sorge, wir werden viel über Ereignisse sprechen, bevor diese Serie beendet ist. Im Moment wissen Sie nur, dass on () die beste / Standardmethode zum Binden von Ereignissen in jQuery ist. Binden, was bedeutet: "Achten Sie auf dieses Ereignis für dieses Element oder eine Reihe von Elementen."
Der Grundplan:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));In unserem Beispiel war der Link buchstäblich ein Link.
Umschalten
Die Art und Weise, wie Hash-Links in jedem Browser standardmäßig funktionieren, besteht darin, dass das Fenster zu dem Element mit der ID gescrollt wird, die diesem Hash-Link entspricht. Manchmal ist das gut. Mir gefällt, wie es eine semantische Verbindung zwischen diesem Link und diesem Element herstellt. Ohne JavaScript ist der Link also im Wesentlichen immer noch sinnvoll (insbesondere, wenn Sie ihn als etwas Kluges bezeichnen).
Aber manchmal ist dieses Verhalten beim Springen von Hash-Links ein Mist. Wir können es in JavaScript mit PreventDefault verhindern. So was:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Wir werden mehr darüber reden.
Natürlich ist die eigene Dokumentation von jQuery eine fantastische Ressource für alle "do" -Aspekte von jQuery (Methoden).
Ich denke, das grundlegende Verständnis dieses „Select and Do“ und der Ereignisse eröffnet wirklich eine Welt des Verständnisses in JavaScript. Ich weiß, dass es für mich getan hat. Am Ende dieses Screencasts werfen wir einen Blick auf das aktuelle Design von CSS-Tricks und sehen, wo JavaScript eindeutig verwendet wird, um auf einige Klickereignisse zu reagieren und die Benutzeroberfläche zu ändern. Sehr, sehr ähnliches Zeug wie in der vorherigen Demo. Beispiel: Festlegen einer aktiven Klasse für Dinge, auf die Sie klicken, wie folgt:
Siehe den Stift d6f7161a5931397b4f24195a315d52f3 von Chris Coyier (@chriscoyier) auf CodePen