Kaip jau kalbėjome, „jQuery“ gali būti laikoma „pasirinkite ir darykite“ biblioteka. Mes kalbėjome apie pasirinkimą gana mažai, todėl dabar pakalbėkime apie kai kuriuos veiksmus. Atminkite, kad modelis iš esmės atrodo taip:
// Select something! $(".something") // Do something! .hide();Užuot dirbę daugiau teorinių pavyzdžių, mes pereiname tiesiai į tikrąjį pasaulį. Šią Drew Barontini rašiklį radome ir šakute.
Žr. Chriso Coyierio (@chriscoyier) „Pen“ kreditinės kortelės formą „CodePen“
Mūsų pavyzdyje pagal numatytuosius nustatymus slėpėme kreditinės kortelės formą. Tada mes sukūrėme nuorodą, kurią galite spustelėti, norėdami paslysti aukštyn ir žemyn kreditinės kortelės forma. Mes pasirenkame nuorodą, tada atlikite skaidrių perjungimą formoje. Pasirinkite ir darykite!
Apie įvykius dar nedaug kalbėjome, tačiau tai didžiulė „jQuery“ dalis. Įvykis yra kažkas panašaus į pelės paspaudimus, klavišų paspaudimus, slinkimus ir pan. „Pasirinkite“ ir „Darykite“ dalis dažnai įvyksta po įvykio. Nesijaudinkite, mes daug kalbėsime apie įvykius, kol ši serija nebus baigta. Kol kas tiesiog žinokite, kad „(“) yra geriausias / standartinis būdas susieti įvykius „jQuery“. „Bind“, reiškiantis „stebėkite šį įvykį naudodami šį elementą ar elementų rinkinį“.
Pagrindinis planas:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));Mūsų pavyzdyje nuoroda buvo tiesiogine nuoroda.
perjungti
Maišos nuorodų veikimas pagal numatytuosius nustatymus bet kurioje naršyklėje yra tai, kad langas slinks žemyn iki elemento su ID, atitinkančiu tą maišos nuorodą. Kartais tai gerai. Man patinka, kaip tai sukuria semantinį ryšį tarp tos nuorodos ir to elemento. Taigi be jokios „JavaScript“ nuorodos vis tiek yra prasmės (ypač jei ją pavadinate kažkuo protingu).
Tačiau kartais toks šokinėjimo su maišu elgesys yra bummeris. Galime to išvengti „JavaScript“ naudodami „preventDefault“. Kaip šitas:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Mes pakalbėsime daugiau apie tai, kas bus.
Žinoma, paties „jQuery“ dokumentai yra fantastiškas šaltinis visiems „jQuery“ aspektams (metodams).
Manau, kad pats pagrindinis šio „pasirinkite ir darykite“ bei įvykių supratimas tikrai atveria supratimo pasaulį „JavaScript“. Aš žinau, kad tai padarė man. Šios ekrano kopijos pabaigoje mes pasiekiame piką pagal dabartinį CSS-Tricks dizainą ir matome, kur „JavaScript“ aiškiai naudojama norint reaguoti į kai kuriuos paspaudimų įvykius ir pakeisti vartotojo sąsają. Labai panašūs dalykai į tai, ką darėme ankstesnėje demonstracijoje. Pvz., Nustatykite aktyvią klasę spustelėtiems dalykams:
Žiūrėkite Chris Coyier (@chriscoyier) rašiklį „d6f7161a5931397b4f24195a315d52f3“ „CodePen“