Som vi har pratat om kan jQuery ses på som ett "välj och gör" -bibliotek. Vi har pratat om att välja en hel del, så nu ska vi prata om några saker. Kom ihåg att mönstret i princip ser ut så här:
// Select something! $(".something") // Do something! .hide();I stället för att arbeta med mer teoretiska exempel går vi direkt in i något verkligt. Vi hittade den här pennan av Drew Barontini och gafflade den.
Se Pen-kreditkortsformuläret av Chris Coyier (@chriscoyier) på CodePen
I vårt exempel gömde vi kreditkortsformuläret som standard. Sedan skapade vi en länk som du kan klicka för att glida uppåt och glida ner på kreditkortsformuläret. Vi väljer länken sedan göra en slideToggle på blanketten. Välj och gör!
Vi har inte pratat mycket om händelser än, men det är en stor del av jQuery. En händelse är ungefär som ett musklick, tangenttryckningar, rullar osv. ”Gör” -delen av ”välj och gör” händer ofta efter en händelse. Oroa dig inte, vi pratar mycket om händelser innan den här serien är klar. För tillfället vet du bara att on () är det bästa / vanliga sättet att binda händelser i jQuery. Bind, vilket betyder "se upp för den här händelsen på detta element eller denna uppsättning element."
Grundplanen:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));I vårt exempel var länken bokstavligen en länk.
växla
Det sätt som hashlänkar fungerar som standard i vilken webbläsare som helst är att fönstret rullar ner till elementet med det ID som matchar den hashlänken. Ibland är det bra. Jag gillar hur det skapar en semantisk koppling mellan den länken och det elementet. Så utan JavaScript är länken i princip fortfarande meningsfull (speciellt om du ger den något smart).
Men ibland är det här hashlänkens hoppbeteende en bummel. Vi kan förhindra det i JavaScript med preventDefault. Så här:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Vi pratar mer om det som kommer upp.
Naturligtvis är jQuerys egen dokumentation en fantastisk resurs för alla "do" -aspekter av jQuery (metoder).
Jag tror att den mycket grundläggande förståelsen för detta "välj och gör" och händelser verkligen öppnar en värld av förståelse i JavaScript. Jag vet att det gjorde för mig. I slutet av denna screencast tar vi en topp med den nuvarande utformningen av CSS-Tricks och ser var JavaScript tydligt används för att reagera på några klickhändelser och ändra användargränssnittet. Mycket mycket liknande saker som vi gjorde i förra demo. Ställ till exempel en aktiv klass på saker som du klickar på så här:
Se pennan d6f7161a5931397b4f24195a315d52f3 av Chris Coyier (@chriscoyier) på CodePen