Kartais, norint pradėti mokytis kažko didžiulio ir sudėtingo, reikia išmokti ką nors mažo ir paprasto. „JavaScript“ yra didžiulis ir sudėtingas, tačiau jūs galite žengti į jį mokydamiesi mažų ir paprastų dalykų. Jei esate internetinių puslapių dizaineris, manau, kad yra vienas dalykas, kurį galite išmokti ir kuris suteikia labai daug galių.
Tai yra dalykas, kurio noriu, kad išmoktumėte: spustelėję kokį nors elementą, pakeiskite kurio nors elemento klasę.
Įsivaizduokite, kad turime absoliučius esminius dalykus, kad turime mygtuką ir div:
Click Me I'm an element Div gali turėti keletą pagrindinių stilių ir kai kuriuos stilius, kai jis turi tam tikrą klasę:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Puikūs CSS-„Tricksters“ gali tai pripažinti kaip galimybę įsilaužti į žymimąjį laukelį, tačiau šiandien tai ne tai.
Mes norime prie mygtuko pridėti „įvykių klausytoją“: šiek tiek kodo, kad „klausytumėtės“, mūsų atveju spustelėkite įvykius, o kai taip atsitiks, paleiskite daugiau kodo.
Žinote, kaip CSS turime „pasirinkti“ elementus, kad juos stilizuotume? Turime tai padaryti ir „JavaScript“, kad galėtume pridėti mūsų renginių klausytoją. Sukursime mygtuką „nuoroda“ kaip į kintamąjį:
var button = document.querySelector("button");Dabar, kai turime nuorodą į mygtuką, pridėsime tą įvykių klausytoją:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));O ką mes norime daryti spustelėjus? Pridėkite klasės pavadinimą prie mūsų divo! Bet kaip mums reikėjo nuorodos mygtukui, kad galėtume atlikti veiksmus su juo, taip pat reikės nuorodos į div. Padarykime juos abu tuo pačiu metu, čia yra visas kodas:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Visa tai norėjau jums parodyti. Pridėjus tam tikrą CSS prie „yay“ klasės, mes galime išnykti ir išnykti div:
Žr. Chriso Coyierio (@chriscoyier) „Pen Spustelėkite kažką pakeisti / pakeisti klasę“ „CodePen“.
Kodėl šis vienas dalykas?
Dizaino galimybės yra begalinės, kai valdote CSS ir bet kurio elemento būseną (kokius klasės pavadinimus ji turi). Dalykų slėpimas ir atskleidimas yra akivaizdi jėga, tačiau tai tikrai gali būti bet kas.
Išlyginimas
Atminkite, kad jūs neapsiribojate vienos klasės pavadinimo keitimu. Galite pakeisti kelias vieno elemento klases arba pakeisti kelių elementų klases.
Sužinokite daugiau apie „classList“ nuosavybę. „Perjungti“ nėra vienintelė galimybė.
Kaip ir HTML ir CSS, „JavaScript“ turi skirtingus naršyklės palaikymo dalykus. Peržiūrėkite „classList“ naršyklės palaikymą ir pridėkite „addEventListener“. Ar gerai sutinkate su tokio lygio palaikymu savo projektui? Jei ne, galite ieškoti polyfills ar net jQuery.
Mes panaudojome „paspaudimo“ įvykį, bet yra daugybė kitų. Kiti pelės įvykiai, slinkimas, klaviatūra ir dar daugiau. Daugybė šimtų.
Metodas, kurį mes pasirinkome, buvo document.querySelector. Tai buvo naudinga, nes jis mums grąžina vieną elementą. Be to, jūsų suteikiami selektoriai yra tokie patys kaip CSS selektoriai. document.querySelector("#overlay .modal > h2");būtų teisėta atranka. Vis dėlto tai nėra vienintelis būdas pasirinkti, yra ir kitų, pvz., GetElementById, querySelectorAll, getElementsByClassName ir kt.
Štai pavyzdys, kai mes pasirenkame daugybę naršymo elementų ir prie visų jų vienu metu pritvirtiname paspaudimų tvarkytuvą:
Žiūrėkite Chriso Coyierio (@chriscoyier) „PenPlay“ klasių keitimo medžiagą „CodePen“.
Jei „JavaScript“, kurią parašėme mažame pavyzdyje, dėl kokių nors priežasčių nepavyko įkelti, vis tiek turėtume mygtuką „Spustelėkite mane“. Bet spustelėjus tai nebūtų nieko blogo, ar ne? Galbūt galėtume įterpti tą mygtuką su „JavaScript“, todėl mygtuko net nėra, nebent žinome, kad jis veiks? Gera idėja, ar ne? ;)