Jak już wspomnieliśmy, jQuery można traktować jako bibliotekę typu „wybierz i wykonaj”. Sporo rozmawialiśmy o wyborze, więc teraz porozmawiajmy o niektórych działaniach. Pamiętaj, że wzór zasadniczo wygląda następująco:
// Select something! $(".something") // Do something! .hide();Zamiast pracować z bardziej teoretycznymi przykładami, przechodzimy od razu do czegoś rzeczywistego. Znaleźliśmy ten długopis Drew Barontiniego i rozwidliliśmy go.
Zobacz formularz karty kredytowej Pen autorstwa Chrisa Coyiera (@chriscoyier) na CodePen
W naszym przykładzie domyślnie ukryliśmy formularz karty kredytowej. Następnie utworzyliśmy łącze, które można kliknąć, aby przesunąć w górę i w dół formularz karty kredytowej. Możemy wybrać link, a następnie zrobić to slideToggle na formularzu. Wybierz i zrób!
Nie rozmawialiśmy jeszcze wiele o wydarzeniach, ale to ogromna część jQuery. Zdarzenie przypomina kliknięcie myszą, naciśnięcie klawisza, przewijanie itp. Część „wykonaj” polecenia „wybierz i wykonaj” często ma miejsce po zdarzeniu. Nie martw się, będziemy dużo mówić o wydarzeniach przed zakończeniem tej serii. Na razie wiedz tylko, że on () jest najlepszym / standardowym sposobem wiązania zdarzeń w jQuery. Bind, czyli „obserwuj to wydarzenie w tym elemencie lub zestawie elementów”.
Podstawowy plan:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));W naszym przykładzie odsyłacz był dosłownie łączem.
przełącznik
Sposób, w jaki linki skrótu działają domyślnie w dowolnej przeglądarce, polega na tym, że okno przewinie się w dół do elementu o identyfikatorze, który pasuje do tego łącza skrótu. Czasami to dobrze. Podoba mi się, jak tworzy semantyczne połączenie między tym łączem a tym elementem. Więc bez JavaScript link nadal ma sens (zwłaszcza jeśli nazwiesz go czymś inteligentnym).
Ale czasami to zachowanie związane z przeskakiwaniem linków mieszających jest kłopotliwe. Możemy temu zapobiec w JavaScript za pomocą PreventDefault. Lubię to:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Porozmawiamy o tym więcej.
Oczywiście własna dokumentacja jQuery jest fantastycznym źródłem informacji o wszystkich aspektach „do” jQuery (metod).
Myślę, że bardzo podstawowe zrozumienie tego „wybierz i zrób” oraz wydarzeń naprawdę otwiera świat zrozumienia w JavaScript. Wiem, że to zrobiło dla mnie. Pod koniec tego screencasta przyglądamy się obecnemu projektowi sztuczek CSS i widzimy, gdzie JavaScript jest wyraźnie używany do reagowania na niektóre zdarzenia związane z kliknięciami i zmiany interfejsu użytkownika. Bardzo podobne rzeczy do tego, co robiliśmy w poprzednim demo. Na przykład ustawienie aktywnych zajęć dla klikanych rzeczy, na przykład:
Zobacz pióro d6f7161a5931397b4f24195a315d52f3 autorstwa Chrisa Coyiera (@chriscoyier) na CodePen