#07: Tun!

Wie wir besprochen haben, kann jQuery als "Auswählen und Tun"-Bibliothek betrachtet werden. Wir haben bereits viel über das Auswählen gesprochen, also reden wir jetzt über ein paar Dinge, die man tun kann. Denken Sie daran, dass das Muster im Grunde so aussieht:

// Select something!
$(".something")
  // Do something!
  .hide();

Anstatt mit theoretischeren Beispielen zu arbeiten, gehen wir direkt zu etwas Realem über. Wir haben diesen Pen von Drew Barontini gefunden und ihn geforkt.

Sieh den Pen 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 konnten, um das Kreditkartenformular ein- und auszublenden. Wir **wählen** den Link aus, dann **tun** wir ein slideToggle auf dem Formular. Auswählen und tun!

Wir haben noch nicht viel über Ereignisse gesprochen, aber das ist ein wichtiger Teil von jQuery. Ein Ereignis ist so etwas wie Mausklicks, Tastendrücke, Scrollen usw. Der "Tun"-Teil von "Auswählen und Tun" geschieht oft nach einem Ereignis. Keine Sorge, wir werden viel über Ereignisse sprechen, bevor diese Serie vorbei ist. Vorerst wissen Sie einfach, dass on() der beste/Standardweg ist, um Ereignisse in jQuery zu binden. Binden, was bedeutet, "auf dieses Ereignis auf diesem Element oder dieser Menge von Elementen zu achten".

Der grundlegende Plan

$("#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 standardmäßig in jedem Browser funktionieren, ist, dass das Fenster zu dem Element mit der ID scrollt, das mit diesem Hash-Link übereinstimmt. Manchmal ist das gut. Ich mag, wie es eine semantische Verbindung zwischen diesem Link und diesem Element herstellt. Ohne JavaScript macht der Link immer noch im Wesentlichen Sinn (besonders wenn Sie ihm einen klugen Titel geben).

Aber manchmal ist dieses Sprungverhalten des Hash-Links ein Ärgernis. Wir können es in JavaScript mit preventDefault verhindern. So:

$("#link-that-toggles").on("click", function(event) {
  $("#thing-to-toggle").slideToggle();
  event.preventDefault();
});

Wir werden bald mehr darüber sprechen.

Natürlich ist die eigene Dokumentation von jQuery eine fantastische Ressource für alle "Tun"-Aspekte von jQuery (Methoden).

Ich denke, das ganz grundlegende Verständnis dieses "Auswählen und Tun" und von Ereignissen eröffnet wirklich eine Welt des Verständnisses in JavaScript. Ich weiß, dass es mir so ging. Am Ende dieses Screencasts werfen wir einen Blick auf das aktuelle Design von CSS-Tricks und sehen, wo JavaScript eindeutig verwendet wird, um auf Klickereignisse zu reagieren und die Benutzeroberfläche zu ändern. Ganz ähnlich dem, was wir im vorherigen Demo gemacht haben. Zum Beispiel das Setzen einer aktiven Klasse auf Dinge, die Sie anklicken, wie hier:

Sieh den Pen d6f7161a5931397b4f24195a315d52f3 von Chris Coyier (@chriscoyier) auf CodePen