Dažreiz, lai sāktu mācīties kaut ko milzīgu un sarežģītu, jums jāiemācās kaut kas mazs un vienkāršs. JavaScript ir milzīgs un sarežģīts, taču jūs varat tajā iekļūt, iemācoties mazas un vienkāršas lietas. Ja jūs esat tīmekļa dizainers, es domāju, ka ir viena lieta, ko jūs varat uzzināt, kas ir ārkārtīgi spēcinošs.
To es vēlos, lai jūs iemācītos: noklikšķinot uz kāda elementa, mainiet kāda elementa klasi.
Vārot to līdz absolūtajam svarīgākajam, iedomājieties, ka mums ir poga un div:
Click Me I'm an element Div var būt daži bāzes stili, un tam var būt daži stili, ja tam ir noteikta klase:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Izveicīgi CSS-Tricksters to varētu atzīt kā iespēju izvēles rūtiņu uzlaušanai, taču šodien mēs pie tā strādājam.
Mēs vēlamies pogai pievienot “notikumu klausītāju”: mazliet koda, lai “noklausītos” mūsu gadījumā noklikšķiniet uz notikumiem un, kad tas notiks, palaidiet vairāk koda.
Jūs zināt, kā CSS mums ir jāizvēlas elementi, lai tos veidotu? Mums tas jādara arī JavaScript, lai pievienotu mūsu pasākumu klausītāju. Mēs izveidosim atsauci uz pogu kā mainīgo šādi:
var button = document.querySelector("button");Tagad, kad mums ir atsauce uz pogu, pievienosim šo notikumu klausītāju:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));Un ko mēs vēlamies darīt klikšķa gadījumā? Pievienojiet klases nosaukumu mūsu div! Bet tāpat kā mums vajadzēja atsauci uz pogu, lai to izdarītu, mums būs nepieciešama atsauce arī uz div. Darīsim tos abus vienlaikus, šeit ir viss koda bits:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Tas ir viss, ko es gribēju jums parādīt. Kad šai “yay” klasei ir pievienoti daži CSS, mēs varam izbalināt un izdzēst div:
Skatiet Krista Koijera (@chriscoyier) pildspalvas klikšķi uz kaut ko / mainītu klasi vietnē CodePen.
Kāpēc šī viena lieta?
Projektēšanas iespējas ir bezgalīgas, kad kontrolējat CSS un jebkura elementa stāvokli (kādi klases nosaukumi tam ir). Lietu slēpšana un atklāšana ir acīmredzams spēks, taču tas tiešām varētu būt jebkas.
Izlīdzināšana
Atcerieties, ka jūs neaprobežojaties tikai ar vienas klases nosaukuma maiņu. Jūs varētu mainīt vairākas klases vienam elementam vai mainīt klases vairākiem elementiem.
Iepazīstieties ar īpašumu classList vairāk. “Pārslēgt” nav vienīgā iespēja.
Tāpat kā HTML un CSS, arī JavaScript ir dažāda līmeņa pārlūka atbalsts lietām. Izmeklējiet pārlūka classList atbalstu un pievienojiet addEventListener. Vai jums ir labi ar šo atbalsta līmeni jūsu projektam? Ja nē, jūs varētu izpētīt polifillus vai pat jQuery.
Mēs izmantojām “klikšķa” notikumu, taču ir vēl daudz citu. Citi peles notikumi, ritināšana, tastatūra un citi. Daudzi simti.
Metode, kuru mēs izmantojām atlasē, bija document.querySelector. Tas bija noderīgi, jo tas mums atdod vienu elementu, ar kuru strādāt. Turklāt atlasītāji, kurus jūs tam piešķirat, ir tādi paši kā CSS selektori. document.querySelector("#overlay .modal > h2");būtu likumīga atlase. Tomēr šī nav vienīgā atlases metode, taču ir arī citas, piemēram, getElementById, querySelectorAll, getElementsByClassName un citas.
Tālāk ir sniegts piemērs, kur mēs atlasām virkni navigācijas vienumu un visiem tiem pievienojam klikšķu apstrādes vienlaicīgi:
Skatiet Krisa Koijera (@chriscoyier) pildspalvu maiņas klases lietās CodePen.
Ja mūsu mazajā piemērā uzrakstīto JavaScript kāda iemesla dēļ neizdevās ielādēt, mums joprojām ir poga ar uzrakstu “Noklikšķiniet uz manis”. Bet, noklikšķinot uz tā, nekas daudz nedarīs, vai ne? Varbūt mēs varētu ievietot šo pogu ar JavaScript, tāpēc poga nav pat tur, ja vien mēs nezinām, ka tā darbosies? Laba ideja, vai ne? ;)