CSS manipuliavimas naudojant „jQuery“

Su „jQuery“ Naudotojo sąveikos lygiu galime pasiekti daug dalykų, įskaitant manipuliavimą DOM medisTačiau vienas iš dalykų, kurie gali neateiti į galvą, yra CSS manipuliacija.
Manipuliuojant CSS mes galime pasiekti elementų, kuriuos matome ekrane, pakeitimus labai natūraliai ir sklandžiai, nesinaudodami sudėtingomis funkcijomis Javascript tyra, kaip turėjome daryti prieš keletą metų.
The SAULĖ yra mūsų dokumento organizavimo būdas HTML, leidžia mums numatyti ir hierarchiškai išdėstyti tai, ką norime rodyti ekrane. Tai labai svarbu, nes tai yra būdas, kuriuo naršyklė interpretuoja dokumentus, tačiau yra dar vienas aspektas, kurį galime panaudoti savo naudai; kad būtų galima surasti elementus, kad su jais būtų galima imtis veiksmų.
Taigi, kai mums reikia pakeisti tam tikrą elementą, dėka SAULĖ Mes galime naudoti įvairius būdus, kaip jį surasti ir tokiu būdu manipuliuoti jo turiniu, stiliumi ar net pašalinti jį iš dokumento realiu laiku.
Tai labai praktiška tais momentais, kai mes turime paryškinti elementą, kai atliekame veiksmą dokumente arba kai gauname atsakymą ir todėl nereikia keisti puslapio ar visiškai jo atnaujinti.
Viena iš geriausių praktikų kuriant stilius CSS yra naudoti klases, tai mes galime sukurti aspektus, kuriuos vėliau galime pritaikyti savarankiškai skirtingiems elementams, nereikalaudami pakartotinai perrašyti kodo.
Klasės atributasKad elementas imtųsi šių stilių, mes tiesiog turime jį įtraukti į jo atributą klasė = "" atitinkamos klasės pavadinimą ir jei stilius, kurį jame rašome, tinka elementui, jis jį atspindės.
ApribojimasViskas skamba puikiai, tačiau yra tam tikras apribojimas, stilius įkeliamas pakeliant puslapį ir, jei reikia įtraukti naują stilių, paprastai puslapis turi būti įkeliamas iš naujo, todėl vartotojui nutrūksta naršymas.
„jQuery“ leidžia mums apeiti šias ribas, suteikiant mums galimybę minėtas klases įtraukti į dokumentą realiu laiku, neperkraunant viso puslapio, nes mes tiesiog turime naudoti metodą addClass () ir perduoti jam klasės pavadinimą CSS kurį norime pridėti prie momento.
Žiūrėkime nedidelį praktinį pavyzdį žingsnis po žingsnio ir tada pamatysime visą aprašyto kodą:
1- Pirmiausia sukuriame savo failą pavadinimu add-class.html ir mes ketiname įtraukti biblioteką „jQuery“, praktiniais tikslais tiesiogiai skambiname iš CDN tinkamas, tam reikalingas interneto ryšys, tačiau galime išsaugoti failą ir pateikti jį vietoje.
2- Tada mes kursime savo klases CSSKad galėtume geriau matyti pokyčius, sukūrėme dvi klases, kiekviena pakeičia elemento, kuriam jis taikomas, fono spalvą, ir kiekviena klasė turės skirtingą spalvą.
3- Mūsų dokumento tekste mes sukuriame du ir kiekvienam iš jų priskiriame ID, su kuriuo galime juos identifikuoti SAULĖ lengvai su selektoriais „jQuery“.
4- Tada mes sukuriame elementą, į kurį įvykio metu paspaudus liepiame vadinti funkciją Javascript.
5- Pagaliau mes kuriame savo funkciją Javascript, tai paprasčiausiai iškvies kiekvieną elementą jo parinkikliu ir metodu addClass () Ji pridės klasę tų, kuriuos sukūrėme iš pradžių, kai tai padarysime, iškart pamatysime pokyčius.
Kadangi aprašėme, ką turėtume daryti, kodą matysime tokį, koks buvo:

 Pridėti kursusMūsų pirmasis „jQuery“ CSS blokas
Mūsų antrasis „jQuery“ CSS blokas
Spustelėkite, kad pakeistumėte klases

Kaip matome, tai yra gana paprasta, ir kai tai atliksime savo naršyklėje, pamatysime, kaip prieš spustelėdami mygtuką elementai yra normalūs, o paspaudus jie keičia spalvą ir pridedamos atitinkamos klasės. Toliau esančiame paveikslėlyje pažiūrėkime, ką mes vadiname:

DIDELIS

Spustelėję mygtuką, galime vizualizuoti perėjimą mūsų puslapyje:

Jei galime pridėti klasę, taip pat turime sugebėti padaryti priešingai, ty ją pašalinti „jQuery“ pateikia mums metodą removeClass (), ir tai veikia principu, labai panašiu į ankstesnį pavyzdį, mes tiesiog įdedame elementą ir per metodą pasakome, kad jis turi pašalinti nurodytą klasę, jei ji ją turi, ji bus pašalinta, kitaip nieko neįvyks.
Kad viskas būtų šiek tiek įdomiau, mes pridėsime kitą metodą ir tai yra klasės tikrinimo metodas, tai yra hasClass () Tai leidžia mums patikrinti, ar elementas turi tam tikrą klasę, todėl galime naudoti sąlygines sąlygas ir atlikti skirtingus eksperimentus, kuriuos nurodo mūsų logika.
Norėdami tai padaryti, mes padarysime nedidelį puslapį, kuriame turėsime keletą funkcijų, funkcija patikrins, ar elementas turi tam tikrą klasę, jei taip, jis bus pašalintas, bet jei atsakymas yra neigiamas, mes jį pridėsime .
Tai suteikia mums galimybę šiek tiek pažaisti su stiliais, nes realiu laiku matome, ar pridedame ar pašaliname tam tikras vertes.
1- Remdamiesi ankstesniu pavyzdžiu, mes sutelksime dėmesį tik į tą dalį, kurioje parašėme funkciją Javascript.
2- Funkcijos viduje sukursime dvi sąlygines sąlygas, pirmiausia dirbsime su pirmuoju elementu, pirmiausia paprašysime su sąlyginiu bloku jei () jei jums skambina klasė pirma klasėJei atsakymas yra teigiamas, taikysime pašalinimo klasės metodą, tačiau jei neturime klasės, jį pridėsime, tai suteiks mums efektą jungiklis.
3- Kartojame ankstesnį žingsnį antrajam elementui ir taip pasiekiame, kad jis veiktų taip pat.
Pažiūrėkime žemiau sukurtą naują kodą:

 Pridėti kursusMūsų pirmasis „jQuery“ CSS blokas
Mūsų antrasis „jQuery“ CSS blokas
Spustelėkite, kad pakeistumėte klases

Dabar pažiūrėkime, kaip vykdoma mūsų programa, šiame pirmame paveikslėlyje pamatysime, kaip atrodo mūsų dokumentas HTML Pradinėje būsenoje mes įtraukėme konsolę „Chrome“ kad pastebėtume, kaip keičiasi elementai:

DIDELIS

Dabar pažiūrėkime, kas atsitiks, kai spustelėsime mygtuką ir bus atliktas perėjimas:

DIDELIS

Iš pirmo žvilgsnio gali atrodyti, kad šis dokumentas veikia lygiai taip pat, kaip ir pirmasis, kurį sukūrėme šioje pamokoje, tačiau jei dar kartą spustelėsime, pamatysime, kaip metodas veiks. removeClass ().
Mes taip pat patikrinome, kaip metodas hasClass () veikė, galbūt tai nedaro nieko, ką vartotojas mato, tačiau suteikia mums galimybę paleisti sąlygines sąlygas HTML.
Yra kažkas, kas mums leidžia „jQuery“ ir tai yra perjungimas tarp klasių, tam mes naudojame metodą toggleClass (), su juo mes galime nurodyti savo elementui, kad kai mes suaktyvinsime įvykį, jis užims klasę, jei jo sąraše jau yra kita.
NaudingumasTai tikrai naudinga, kai norime keisti būseną, tai yra tam tikras spartusis klavišas, kad nereikėtų rašyti sąlyginės struktūros naudojant metodą hasClass (). Jo taikymas yra labai panašus į metodus, kuriuos matėme iki šiol, vienintelis skirtumas yra tas, kad vietoj klasės pravažiuosime du, atskirtus tarpais.
Pažiūrėkime, kaip pakeisime tik funkciją Javascript mūsų bandymo dokumento, kad būtų įtrauktas šis naujas metodas:
1- Prie savo elementų pridėsime pradinę klasę, tokiu būdu turėsime atspirties tašką pokyčiams.
2- Tada mūsų funkcija Javascript mes tiesiog taikysime metodą toggleClass () prie kiekvieno elemento per jo parinkiklį.
Pažiūrėkime, kaip atrodo mūsų kodas pritaikius pakeitimus:

 Pridėti kursusMūsų pirmasis „jQuery“ CSS blokas
Mūsų antrasis „jQuery“ CSS blokas
Spustelėkite, kad pakeistumėte klases

Dabar pažiūrėkime, kas atsitinka, kai pirmą kartą įkeliame dokumentą:

Dabar pažiūrėkime, kas atsitiks, kai dar kartą spustelėsime mygtuką:

DIDELIS

Jei ir toliau spustelėsime mygtuką, klasės ir toliau keisis be apribojimų.
Baigę šį vadovėlį, sužinojome, kaip galime manipuliuoti CSS tiesiogiai su „jQuery“Turėdami tai, galime pradėti turėti geresnių idėjų, kad mūsų vartotojo sąsajos būtų turtingesnės funkcijomis.