CSS-manipulatie met jQuery

Met jQuery We kunnen veel bereiken op gebruikersinteractieniveau, inclusief het manipuleren van de DOM-boomEen van de dingen die misschien niet in je opkomen, is de CSS-manipulatie.
Door het manipuleren van de CSS we kunnen veranderingen in de elementen die we op het scherm zien op een zeer natuurlijke en vloeiende manier bereiken zonder toevlucht te nemen tot complexe functies in Javascript puur zoals we een paar jaar geleden moesten doen.
De ZON is de manier waarop ons document is georganiseerd HTML, stelt ons in staat om een ​​voorspelbare en hiërarchische structuur te geven aan wat we op het scherm willen laten zien. Dit is erg belangrijk omdat het de manier is waarop de browser de documenten interpreteert, maar er is nog een ander aspect dat we in ons voordeel kunnen gebruiken; dit is om de elementen te kunnen lokaliseren om er actie op te ondernemen.
Dus wanneer we een wijziging moeten aanbrengen aan een bepaald element, dankzij de ZON We kunnen verschillende manieren gebruiken om het te lokaliseren en zo de inhoud, de stijl te manipuleren of het zelfs in realtime uit het document te verwijderen.
Dit is erg praktisch op momenten waarop we een element moeten markeren bij het uitvoeren van een actie in het document of bij het ontvangen van een reactie en dus niet de pagina hoeven te wijzigen of het volledig te vernieuwen.
Een van de beste praktijken bij het maken van stijlen CSS is om klassen te gebruiken, hiermee kunnen we aspecten creëren die we vervolgens onafhankelijk op verschillende elementen kunnen toepassen zonder dat we de code steeds opnieuw moeten herschrijven.
Klasse attribuutOm een ​​element deze stijlen te laten aannemen, hoeven we het alleen maar in zijn attribuut te plaatsen klasse = "" de naam van de overeenkomstige klasse en als de stijl die we erin schrijven geschikt is voor het element, wordt dit weergegeven.
BeperkingAlles klinkt geweldig, maar er is een beperking, de stijl wordt geladen bij het optillen van de pagina en als we een nieuwe stijl moeten opnemen, zou de pagina normaal gesproken opnieuw moeten worden geladen, waardoor de navigatie voor de gebruiker wordt onderbroken.
jQuery stelt ons in staat om deze limieten te omzeilen door ons de mogelijkheid te geven om genoemde klassen in realtime in het document op te nemen zonder de hele pagina opnieuw te hoeven laden, hiervoor moeten we gewoon de methode gebruiken addClass () en geef het de naam van de klas door CSS die we willen toevoegen aan het moment.
Laten we stap voor stap een klein praktisch voorbeeld bekijken en dan zullen we de volledige code zien van wat wordt beschreven:
1- Eerst maken we ons bestand genaamd add-classes.html en we gaan de bibliotheek van jQuery, voor praktische doeleinden bellen we rechtstreeks vanuit de CDN voldoende is, hiervoor is een internetverbinding vereist, maar we kunnen het bestand opslaan en lokaal serveren.
2- Dan gaan we onze lessen maken CSSOm de verandering beter te kunnen zien, hebben we twee klassen gemaakt, elk verandert de kleur van de achtergrond van het element waarop het wordt toegepast, en elke klasse heeft een andere kleur.
3- In de hoofdtekst van ons document maken we er twee en aan iedereen kennen we een ID toe waarmee we ze kunnen identificeren binnen de ZON gemakkelijk met de selectors jQuery.
4- Dan creëren we een element waaraan in het evenement bij klikken we vertellen het om een ​​functie aan te roepen Javascript.
5- Eindelijk bouwen we onze functie Javascript, dit roept eenvoudig elk element op met zijn selector en met de methode addClass () Het gaat een klasse toevoegen van degene die we in eerste instantie hebben gemaakt, wanneer we dit doen, zullen we onmiddellijk de verandering zien.
Omdat we hebben beschreven wat we moeten doen, gaan we de code zien zoals deze is:

 Klassen toevoegenOns eerste jQuery CSS-blok
Ons tweede jQuery CSS-blok
Klik om van klas te veranderen

Zoals we zien, is het vrij eenvoudig en wanneer we dit in onze browser uitvoeren, zullen we zien hoe voordat we op de knop klikken de elementen normaal zijn en na het klikken van kleur veranderen en de bijbehorende klassen worden toegevoegd. Laten we in de volgende afbeelding zien waar we naar verwijzen:

VERGROTEN

Nadat we op de knop hebben geklikt, kunnen we de overgang op onze pagina visualiseren:

Als we een klasse kunnen toevoegen, moeten we ook het tegenovergestelde kunnen doen, namelijk deze verwijderen, hiervoor jQuery geeft ons de methode verwijderKlasse (), en dit werkt met een principe dat erg lijkt op het vorige voorbeeld, we plaatsen gewoon een element en vertellen het via de methode dat het de aangegeven klasse moet verwijderen, als het die heeft, wordt het verwijderd, anders gebeurt er niets.
Om de dingen een beetje interessanter te maken, gaan we het gebruik van een andere methode toevoegen en het is de klassecontrolemethode, dit is de heeftKlasse () waarmee we kunnen verifiëren of een element een bepaalde klasse heeft, hiermee kunnen we conditionals gebruiken en verschillende experimenten doen die onze logica dicteert.
Hiervoor gaan we een kleine pagina maken waarin we verschillende functies zullen hebben, een functie zal verifiëren of het element een bepaalde klasse heeft, zo ja, dan wordt het verwijderd, maar als het antwoord negatief is, zullen we het toevoegen .
Dit geeft ons de mogelijkheid om dynamisch een beetje met de stijlen te spelen, omdat we in realtime kunnen zien of we bepaalde waarden toevoegen of verwijderen.
1- Op basis van het vorige voorbeeld gaan we ons alleen concentreren op het deel waar we de functie hebben geschreven Javascript.
2- Binnen de functie gaan we twee conditionals maken, in de eerste zullen we met het eerste element werken, eerst zullen we vragen met een conditioneel blok indien () als je de klas hebt genoemd eerste klasAls het antwoord positief is, zullen we de methode klasse verwijderen toepassen, maar als we de klasse niet hebben, zullen we deze toevoegen, dit geeft ons een effect van schakelaar.
3- We herhalen de vorige stap voor het tweede element en zo bereiken we dat het zich op dezelfde manier gedraagt.
Laten we de nieuwe code bekijken die we hieronder hebben gemaakt:

 Klassen toevoegenOns eerste jQuery CSS-blok
Ons tweede jQuery CSS-blok
Klik om van klas te veranderen

Laten we nu eens kijken hoe de uitvoering van ons programma is, in deze eerste afbeelding zullen we zien hoe ons document eruit ziet HTML In de oorspronkelijke staat hebben we de console opgenomen Chroom zodat we zien hoe de elementen veranderen:

VERGROTEN

Laten we nu eens kijken wat er gebeurt als we op de knop klikken en de overgang wordt gemaakt:

VERGROTEN

Op het eerste gezicht lijkt het erop dat dit document precies hetzelfde werkt als het eerste document dat we in deze tutorial hebben gemaakt, maar als we nog een keer klikken, zullen we zien hoe de methode zal werken. verwijderKlasse ().
We hebben ook gecontroleerd hoe de methode heeftKlasse () heeft gewerkt, doet het misschien niets wat de gebruiker ziet, maar het geeft ons de mogelijkheid om conditionals uit te voeren op onze HTML.
Er is iets dat ons toelaat jQuery en dit is om te schakelen tussen klassen, hiervoor gebruiken we de methode toggleClass (), hiermee kunnen we aan ons element specificeren dat wanneer we een gebeurtenis activeren, het een klasse zal nemen als de andere in de lijst al is toegepast.
NutDit is erg handig als we aan statuswijzigingen willen werken, het is een soort snelkoppeling om te voorkomen dat we een voorwaardelijke structuur moeten schrijven met de methode heeftKlasse (). De toepassing lijkt erg op de methoden die we tot nu toe hebben gezien, het enige verschil is dat we in plaats van een klasse twee door een spatie gescheiden zullen passeren.
Laten we eens kijken hoe we alleen de functie zullen veranderen Javascript van ons testdocument om deze nieuwe methode op te nemen:
1- We gaan een eerste klasse toevoegen aan onze elementen, op deze manier hebben we een startpunt voor de wijzigingen.
2- Dan binnen onze functie Javascript we zullen gewoon de methode toepassen toggleClass () naar elk van de elementen via zijn selector.
Laten we eens kijken hoe onze code eruitziet met de aangebrachte wijzigingen:

 Klassen toevoegenOns eerste jQuery CSS-blok
Ons tweede jQuery CSS-blok
Klik om van klas te veranderen

Laten we nu eens kijken wat er gebeurt als we het document voor de eerste keer laden:

Laten we nu eens kijken wat er gebeurt als we opnieuw op de knop klikken:

VERGROTEN

Als we op de knop blijven klikken, blijven de lessen onbeperkt afwisselen.
Hiermee sluiten we deze tutorial af, we hebben geleerd hoe we de kunnen manipuleren CSS rechtstreeks met jQueryHiermee kunnen we betere ideeën krijgen om onze gebruikersinterfaces rijker te maken aan functionaliteiten.