Som vi har talt om, kan jQuery betragtes som et "vælg og gør" -bibliotek. Vi har talt om at vælge en hel del, så lad os nu tale om nogle handlinger. Husk, at mønsteret stort set ser sådan ud:
// Select something! $(".something") // Do something! .hide();I stedet for at arbejde med mere teoretiske eksempler bevæger vi os lige ind i noget virkeligt. Vi fandt denne pen af Drew Barontini og gaffelede den.
Se pen-kreditkortformularen af Chris Coyier (@chriscoyier) på CodePen
I vores eksempel skjulte vi kreditkortformularen som standard. Derefter oprettede vi et link, som du kunne klikke for at glide op og glide ned på kreditkortformularen. Vi vælger linket og gør derefter en slideToggle på formularen. Vælg og gør!
Vi har ikke talt meget om begivenheder endnu, men det er en stor del af jQuery. En begivenhed er ligesom et museklik, tastetryk, ruller osv. "Udfør" -delen af "vælg og gør" sker ofte efter en begivenhed. Bare rolig, vi taler meget om begivenheder, før denne serie er igennem. For nu ved bare, at on () er den bedste / standard måde at binde begivenheder i jQuery på. Bind, hvilket betyder "hold øje med denne begivenhed på dette element eller sæt af elementer."
Grundplanen:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));I vores eksempel var linket bogstaveligt talt et link.
skifte
Den måde, hvorpå hash-links fungerer som standard i enhver browser, er at vinduet ruller ned til elementet med det id, der matcher det hash-link. Nogle gange er det godt. Jeg kan godt lide, hvordan det skaber en semantisk forbindelse mellem dette link og det element. Så uden JavaScript er linket i det væsentlige stadig fornuftigt (især hvis du titler det som noget smart).
Men nogle gange er den hashlink jumping adfærd en bummer. Vi kan forhindre det i JavaScript ved hjælp af preventDefault. Sådan her:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Vi taler mere om det der kommer.
Selvfølgelig er jQuerys egen dokumentation en fantastisk ressource for alle "do" -aspekterne ved jQuery (metoder).
Jeg tror, at den meget grundlæggende forståelse af denne "vælg og gør" og begivenheder virkelig åbner en verden af forståelse i JavaScript. Jeg ved, det gjorde for mig. I slutningen af denne screencast tager vi et højdepunkt ved det nuværende design af CSS-Tricks og ser, hvor JavaScript tydeligt bruges til at reagere på nogle klikhændelser og ændre brugergrænsefladen. Meget meget lignende ting til det, vi lavede i den forrige demo. For eksempel at indstille en aktiv klasse på ting, som du klikker på, sådan her:
Se pennen d6f7161a5931397b4f24195a315d52f3 af Chris Coyier (@chriscoyier) på CodePen