Som vi har snakket om, kan jQuery betraktes som et "velg og gjør" -bibliotek. Vi har snakket om å velge ganske mye, så la oss nå snakke om noen gjøremål. Husk at mønsteret i utgangspunktet ser slik ut:
// Select something! $(".something") // Do something! .hide();I stedet for å jobbe med mer teoretiske eksempler, beveger vi oss rett inn i noe virkelig verden. Vi fant denne pennen av Drew Barontini og gafflet den.
Se Pen-kredittkortskjemaet av Chris Coyier (@chriscoyier) på CodePen
I vårt eksempel skjulte vi kredittkortskjemaet som standard. Så opprettet vi en lenke som du kan klikke for å glide oppover og gli ned på kredittkortskjemaet. Vi velger lenken, og gjør deretter en slideToggle på skjemaet. Velg og gjør!
Vi har ikke snakket mye om hendelser ennå, men det er en stor del av jQuery. En hendelse er omtrent som museklikk, tastetrykk, ruller osv. "Gjør" -delen av "velg og gjør" skjer ofte etter en hendelse. Ikke bekymre deg, vi snakker mye om hendelser før denne serien er ferdig. Foreløpig er det bare å vite at on () er den beste / standardiserte måten å binde hendelser i jQuery på. Bind, som betyr "se etter denne hendelsen på dette elementet eller settet med elementer."
Den grunnleggende planen:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));I vårt eksempel var lenken bokstavelig talt en lenke.
veksle
Måten hash-koblinger fungerer som standard i en hvilken som helst nettleser, er at vinduet vil rulle ned til elementet med ID-en som samsvarer med den hash-lenken. Noen ganger er det bra. Jeg liker hvordan det skaper en semantisk forbindelse mellom den lenken og det elementet. Så uten JavaScript, er koblingen fortsatt fornuftig (spesielt hvis du kaller det noe smart).
Men noen ganger er den hashlink-hoppoppførselen en bummer. Vi kan forhindre det i JavaScript ved å bruke preventDefault. Som dette:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Vi snakker mer om det som kommer opp.
Selvfølgelig er jQuerys egen dokumentasjon en fantastisk ressurs for alle "do" -aspekter av jQuery (metoder).
Jeg tror den helt grunnleggende forståelsen av dette "velg og gjør" og hendelser virkelig åpner en verden av forståelse i JavaScript. Jeg vet at det gjorde for meg. På slutten av denne skjermsendingen tar vi en topp på den nåværende utformingen av CSS-Tricks og ser hvor JavaScript tydeligvis brukes til å reagere på noen klikkhendelser og endre brukergrensesnittet. Svært veldig like ting som det vi gjorde i forrige demo. For eksempel å sette en aktiv klasse på ting du klikker på, slik:
Se pennen d6f7161a5931397b4f24195a315d52f3 av Chris Coyier (@chriscoyier) på CodePen