Manipulation CSS avec jQuery

Avec jQuery Nous pouvons réaliser beaucoup de choses au niveau de l'interaction avec l'utilisateur, y compris la manipulation du arbre DOMCependant, l'une des choses qui ne vient peut-être pas à l'esprit est la Manipulation CSS.
En manipulant le CSS nous pouvons réaliser des changements dans les éléments que nous voyons à l'écran d'une manière très naturelle et fluide sans recourir à des fonctions complexes dans Javascript pur comme nous devions le faire il y a quelques années.
Le SOLEIL est la façon dont notre document est organisé HTML, nous permet de donner une structure prévisible et hiérarchique à ce que nous voulons montrer à l'écran. C'est très important car c'est la manière dont le navigateur interprète les documents, cependant il y a un autre aspect que nous pouvons utiliser à notre avantage; il s'agit de pouvoir localiser les éléments pour agir sur eux.
Ainsi, lorsque nous devons apporter une modification sur un élément particulier, grâce à la SOLEIL On peut utiliser différents moyens pour le localiser et ainsi manipuler son contenu, son style ou même le retirer du document en temps réel.
C'est très pratique dans les moments où nous devons mettre en évidence un élément lors d'une action dans le document ou lors de la réception d'une réponse et ainsi ne pas avoir à changer la page ou à la rafraîchir complètement.
L'une des meilleures pratiques lors de la création de styles CSS est d'utiliser des classes, avec cela, nous pouvons créer des aspects que nous pouvons ensuite appliquer indépendamment à différents éléments sans avoir à réécrire le code encore et encore.
Attribut de classePour qu'un élément prenne ces styles, il suffit de placer dans son attribut classe = "" le nom de la classe correspondante et si le style que nous y écrivons convient à l'élément, il le reflétera.
LimitationTout sonne bien mais il y a une limitation, le style est chargé lors du levage de la page et si nous devons inclure un nouveau style, normalement la page devrait être rechargée, provoquant ainsi une interruption de la navigation pour l'utilisateur.
jQuery permet de contourner ces limites en nous donnant la possibilité d'incorporer lesdites classes en temps réel dans le document sans avoir à recharger toute la page, pour cela il faut simplement utiliser la méthode addClass () et lui passer le nom de la classe CSS que nous voulons ajouter au moment.
Voyons un petit exemple pratique pas à pas puis nous verrons le code complet de ce qui est décrit :
1- Nous créons d'abord notre fichier appelé add-classes.html et nous allons inclure la bibliothèque de jQuery, pour des raisons pratiques, nous appelons directement le CDN adéquat, cela nécessite une connexion Internet, mais nous pouvons enregistrer le fichier et le servir localement.
2- Ensuite, nous allons créer nos classes CSSPour mieux voir le changement, nous avons créé deux classes, chacune change la couleur du fond de l'élément auquel elle est appliquée, et chaque classe aura une couleur différente.
3- Dans le corps de notre document, nous créons deux et à chacun nous attribuons un identifiant avec lequel nous pouvons les identifier dans le SOLEIL facilement avec les sélecteurs jQuery.
4- Ensuite, nous créons un élément auquel dans l'événement sur clic on lui dit d'appeler une fonction Javascript.
5- Enfin nous construisons notre fonction Javascript, cela appellera simplement chaque élément par son sélecteur et avec la méthode addClass () Il va ajouter une classe de celles que nous avons créées initialement, lorsque nous ferons cela, nous verrons immédiatement le changement.
Puisque nous avons décrit ce que nous devons faire, nous allons voir le code tel qu'il a été :

 Ajouter des coursNotre premier bloc CSS jQuery
Notre deuxième bloc CSS jQuery
Cliquez pour changer de classe

Comme nous le voyons, c'est assez simple et lorsque nous l'exécuterons dans notre navigateur, nous verrons comment, avant de cliquer sur le bouton, les éléments sont normaux et après avoir cliqué, ils changent de couleur et les classes correspondantes sont ajoutées. Voyons dans l'image suivante à quoi nous nous référons :

AGRANDIR

Après avoir cliqué sur le bouton, nous pouvons visualiser la transition sur notre page :

Si on peut ajouter une classe, il faut aussi pouvoir faire l'inverse, c'est-à-dire la supprimer, pour cela jQuery nous donne la méthode removeClass (), et cela fonctionne avec un principe très similaire à l'exemple précédent, nous plaçons simplement un élément et lui disons via la méthode qu'il doit supprimer la classe indiquée, si elle l'a, elle sera supprimée, sinon rien ne se passe.
Pour rendre les choses un peu plus intéressantes, nous allons ajouter l'utilisation d'une autre méthode et c'est la méthode de vérification de classe, c'est la aClasse () cela nous permet de vérifier si un élément a une classe particulière, avec cela nous pouvons utiliser des conditions et faire différentes expériences que notre logique dicte.
Pour cela nous allons faire une petite page dans laquelle nous allons avoir plusieurs fonctions, une fonction va vérifier si l'élément a une classe particulière, si c'est le cas elle sera supprimée, mais si la réponse est négative alors nous l'ajouterons .
Cela nous donne la possibilité de jouer un peu avec les styles de manière dynamique, puisque nous pouvons voir en temps réel si nous ajoutons ou supprimons certaines valeurs.
1- Sur la base de l'exemple précédent, nous allons nous concentrer uniquement sur la partie où nous avons écrit la fonction Javascript.
2- A l'intérieur de la fonction, nous allons créer deux conditions, dans la première nous allons travailler avec le premier élément, nous allons d'abord demander avec un bloc conditionnel si () si vous avez la classe appelée première classeSi la réponse est positive, nous appliquerons la méthode remove class, cependant si nous n'avons pas la classe nous l'ajouterons, cela nous donnera un effet de changer.
3- On répète l'étape précédente pour le deuxième élément et on obtient ainsi qu'il se comporte de la même manière.
Voyons le nouveau code que nous avons créé ci-dessous :

 Ajouter des coursNotre premier bloc CSS jQuery
Notre deuxième bloc CSS jQuery
Cliquez pour changer de classe

Voyons maintenant comment se passe l'exécution de notre programme, dans cette première image nous allons voir à quoi ressemble notre document HTML Dans son état initial, nous avons inclus la console Chrome pour que nous remarquions comment les éléments changent :

AGRANDIR

Voyons maintenant ce qui se passe lorsque l'on clique sur le bouton et que la transition se fait :

AGRANDIR

À première vue, il peut sembler que ce document fonctionne exactement de la même manière que le premier que nous avons fait dans ce tutoriel, cependant si nous cliquons à nouveau, nous verrons comment la méthode fonctionnera. removeClass ().
Nous avons également vérifié comment la méthode aClasse () a fonctionné, peut-être que cela ne fait rien que l'utilisateur voit, mais cela nous donne la possibilité d'exécuter des conditions sur notre HTML.
Il y a quelque chose qui nous permet jQuery et c'est pour basculer entre les classes, pour cela nous utilisons la méthode toggleClass (), avec lui, nous pouvons spécifier à notre élément que lorsque nous déclenchons un événement, il prendra une classe si l'autre dans la liste est déjà appliquée.
UtilitaireC'est vraiment utile quand on veut travailler sur des changements d'état, c'est une sorte de raccourci pour éviter d'avoir à écrire une structure conditionnelle avec la méthode aClasse (). Son application est très similaire aux méthodes que nous avons vues jusqu'à présent, la seule différence est qu'au lieu d'une classe nous en passerons deux séparés par un espace.
Voyons comment nous allons changer uniquement la fonction Javascript de notre document de test pour intégrer cette nouvelle méthode :
1- Nous allons ajouter une classe initiale à nos éléments, de cette façon nous aurons un point de départ pour les changements.
2- Puis au sein de notre fonction Javascript nous appliquerons simplement la méthode toggleClass () à chacun des éléments via son sélecteur.
Voyons à quoi ressemble notre code avec les modifications appliquées :

 Ajouter des coursNotre premier bloc CSS jQuery
Notre deuxième bloc CSS jQuery
Cliquez pour changer de classe

Voyons maintenant ce qui se passe lorsque nous chargeons le document pour la première fois :

Voyons maintenant ce qui se passe lorsque nous cliquons à nouveau sur le bouton :

AGRANDIR

Si nous continuons à cliquer sur le bouton, les cours continueront à s'alterner sans limite.
Avec cela, nous terminons ce tutoriel, nous avons appris comment nous pouvons manipuler le CSS directement avec jQueryAvec cela, nous pouvons commencer à avoir de meilleures idées pour rendre nos interfaces utilisateur plus riches en fonctionnalités.