CSS manipulācijas ar jQuery

Ar jQuery Mēs varam sasniegt daudzas lietas lietotāju mijiedarbības līmenī, ieskaitot manipulācijas ar DOM koksTomēr viena no lietām, kas var ienākt prātā, ir CSS manipulācijas.
Manipulējot ar CSS mēs varam panākt izmaiņas ekrānā redzamajos elementos ļoti dabiskā un plūstošā veidā, neizmantojot sarežģītas funkcijas Javascript tīrs, kā tas bija jādara pirms dažiem gadiem.
SAULE tas ir veids, kā tiek kārtots mūsu dokuments HTML, ļauj mums nodrošināt paredzamu un hierarhisku struktūru tam, ko vēlamies parādīt ekrānā. Tas ir ļoti svarīgi, jo tas ir veids, kādā pārlūkprogramma interpretē dokumentus, tomēr ir vēl viens aspekts, ko varam izmantot savā labā; tas ir, lai varētu atrast elementus, lai ar tiem rīkotos.
Tātad, ja mums ir jāveic izmaiņas konkrētā elementā, pateicoties SAULE Mēs varam izmantot dažādus veidus, kā to atrast un tādējādi manipulēt ar tā saturu, stilu vai pat noņemt to no dokumenta reālā laikā.
Tas ir ļoti praktiski brīžos, kad mums ir jāizceļ kāds elements, veicot kādu darbību dokumentā vai saņemot atbildi un tādējādi nav jāmaina lapa vai jāveic pilnīga tās atsvaidzināšana.
Viena no labākajām praksēm, veidojot stilus CSS ir izmantot klases, ar to mēs varam izveidot aspektus, kurus pēc tam varam neatkarīgi piemērot dažādiem elementiem, neizmantojot koda pārrakstīšanu atkal un atkal.
Klases atribūtsLai elements varētu izmantot šos stilus, mums tas vienkārši jāievieto tā atribūtā klase = "" atbilstošās klases nosaukums un, ja tajā rakstītais stils ir piemērots elementam, tas to atspoguļos.
IerobežojumsViss izklausās lieliski, taču pastāv ierobežojums, stils tiek ielādēts, paceļot lapu, un, ja mums ir jāiekļauj jauns stils, parasti lapa ir jāielādē atkārtoti, tādējādi lietotājam pārtraucot navigāciju.
jQuery ļauj mums apiet šos ierobežojumus, dodot mums iespēju iekļaut minētās klases dokumentā reālā laikā, nepārlādējot visu lapu, jo mums vienkārši jāizmanto šī metode addClass () un nododiet tai klases nosaukumu CSS ko mēs vēlamies pievienot šim brīdim.
Apskatīsim nelielu praktisku piemēru soli pa solim, un tad mēs redzēsim pilnu aprakstītā kodu:
1- Vispirms mēs izveidojam savu failu ar nosaukumu add-class.html un mēs iekļausim bibliotēku jQuery, praktiskos nolūkos mēs veicam tiešu zvanu no CDN atbilstošs, tam ir nepieciešams interneta savienojums, tomēr mēs varam saglabāt failu un apkalpot to lokāli.
2- Tad mēs izveidosim savas nodarbības CSSLai labāk redzētu izmaiņas, mēs esam izveidojuši divas klases, katra no tām maina tā elementa fona krāsu, kurai tā tiek lietota, un katrai klasei būs atšķirīga krāsa.
3- Mūsu dokumenta pamattekstā mēs izveidojam divus un katram no tiem mēs piešķiram ID, ar kuru mēs varam tos identificēt SAULE viegli ar atlasītājiem jQuery.
4- Tad mēs izveidojam elementu, uz kuru notikumā onclick mēs sakām, lai tā sauc funkciju Javascript.
5- Beidzot mēs veidojam savu funkciju Javascript, tas vienkārši izsauks katru elementu pēc tā atlasītāja un ar metodi addClass () Tas pievienos klasi no tiem, kurus mēs sākotnēji izveidojām, kad mēs to darīsim, mēs uzreiz redzēsim izmaiņas.
Tā kā mēs esam aprakstījuši, kas mums jādara, mēs redzēsim kodu, kāds tas ir bijis:

 Pievienot nodarbībasMūsu pirmais jQuery CSS bloks
Mūsu otrais jQuery CSS bloks
Noklikšķiniet, lai mainītu nodarbības

Kā redzam, tas ir pavisam vienkārši, un, izpildot to savā pārlūkprogrammā, mēs redzēsim, kā pirms noklikšķināšanas uz pogas elementi ir normāli un pēc noklikšķināšanas tie maina krāsu un tiek pievienotas atbilstošās klases. Apskatīsim nākamajā attēlā, uz ko mēs atsaucamies:

PALIELINĀT

Pēc noklikšķināšanas uz pogas mēs varam vizualizēt pāreju mūsu lapā:

Ja mēs varam pievienot klasi, mums arī jāspēj rīkoties pretēji, proti, to noņemt jQuery nodrošina mūs ar metodi removeClass (), un tas darbojas ar principu, kas ir ļoti līdzīgs iepriekšējam piemēram, mēs vienkārši ievietojam elementu un caur metodi paziņojam, ka tam ir jānoņem norādītā klase, ja tā ir, tā tiks noņemta, pretējā gadījumā nekas nenotiks.
Lai padarītu lietas nedaudz interesantākas, mēs pievienosim citas metodes izmantošanu, un tā ir klases pārbaudes metode. hasClass () kas ļauj mums pārbaudīt, vai elementam ir noteikta klase, ar to mēs varam izmantot nosacījumus un veikt dažādus eksperimentus, ko nosaka mūsu loģika.
Šim nolūkam mēs izveidosim nelielu lapu, kurā mums būs vairākas funkcijas, funkcija pārbaudīs, vai elementam ir noteikta klase, ja tā, tā tiks noņemta, bet, ja atbilde ir negatīva, mēs to pievienosim .
Tas dod mums iespēju dinamiski spēlēties ar stiliem, jo ​​mēs varam redzēt reālā laikā, vai pievienojam vai noņemam noteiktas vērtības.
1- Pamatojoties uz iepriekšējo piemēru, mēs koncentrēsimies tikai uz to daļu, kurā mēs esam uzrakstījuši funkciju Javascript.
2- Funkcijas iekšpusē mēs izveidosim divus nosacījumus, pirmajā mēs strādāsim ar pirmo elementu, vispirms mēs jautāsim ar nosacītu bloku ja () ja jums ir izsaukta klase pirmā klaseJa atbilde ir pozitīva, mēs izmantosim noņemšanas klases metodi, bet, ja mums nav klases, mēs to pievienosim, tas dos mums efektu slēdzis.
3- Mēs atkārtojam iepriekšējo soli otrajam elementam un tādējādi panākam, ka tas darbojas vienādi.
Apskatīsim zemāk izveidoto jauno kodu:

 Pievienot nodarbībasMūsu pirmais jQuery CSS bloks
Mūsu otrais jQuery CSS bloks
Noklikšķiniet, lai mainītu nodarbības

Tagad redzēsim, kā notiek mūsu programmas izpilde, šajā pirmajā attēlā mēs redzēsim, kā izskatās mūsu dokuments HTML Sākotnējā stāvoklī mēs esam iekļāvuši konsoli Chrome lai mēs pamanītu, kā elementi mainās:

PALIELINĀT

Tagad redzēsim, kas notiek, noklikšķinot uz pogas un veicot pāreju:

PALIELINĀT

No pirmā acu uzmetiena varētu šķist, ka šis dokuments darbojas tieši tāpat kā pirmais, ko izveidojām šajā apmācībā, tomēr, noklikšķinot vēlreiz, mēs redzēsim, kā šī metode darbosies. removeClass ().
Mēs arī pārbaudījām, kā šī metode tiek izmantota hasClass () ir strādājis, varbūt tas nedara neko tādu, ko lietotājs redz, bet tas dod mums iespēju palaist nosacījumus uz mūsu HTML.
Ir kaut kas, kas mums ļauj jQuery un tas ir, lai pārslēgtos starp klasēm, šim nolūkam mēs izmantojam metodi toggleClass (), ar to mēs savam elementam varam norādīt, ka, aktivizējot notikumu, tā paņems klasi, ja tai jau ir lietota cita sarakstā.
LietderībaTas ir patiešām noderīgi, ja vēlamies strādāt pie stāvokļa izmaiņām, tas ir sava veida īsceļš, lai izvairītos no nepieciešamības rakstīt nosacītu struktūru ar metodi hasClass (). Tās pielietojums ir ļoti līdzīgs līdz šim redzētajām metodēm, vienīgā atšķirība ir tā, ka klases vietā mēs iesim garām divām, atdalītām ar atstarpi.
Redzēsim, kā mēs mainīsim tikai funkciju Javascript mūsu testa dokumenta, lai iekļautu šo jauno metodi:
1- Mēs saviem elementiem pievienosim sākotnējo klasi, tādā veidā mums būs sākuma punkts izmaiņām.
2- Tad mūsu funkcijas ietvaros Javascript mēs vienkārši izmantosim metodi toggleClass () katram elementam caur tā atlasītāju.
Apskatīsim, kā izskatās mūsu kods ar veiktajām izmaiņām:

 Pievienot nodarbībasMūsu pirmais jQuery CSS bloks
Mūsu otrais jQuery CSS bloks
Noklikšķiniet, lai mainītu nodarbības

Tagad redzēsim, kas notiek, pirmo reizi ielādējot dokumentu:

Tagad redzēsim, kas notiek, vēlreiz noklikšķinot uz pogas:

PALIELINĀT

Ja mēs turpināsim noklikšķināt uz pogas, klases turpinās mainīties bez ierobežojumiem.
Ar to mēs pabeidzam šo apmācību, mēs esam iemācījušies, kā mēs varam manipulēt ar CSS tieši ar jQueryTādējādi mēs varam iegūt labākas idejas, lai padarītu mūsu lietotāja saskarnes bagātākas ar funkcijām.