Mise en forme avec jQuery
Mise en forme avec jQuery
Mise en forme avec jQuery est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 1. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 1 leçons au total.
Introduction
Bonjour,
Dans tous les exemples présentés jusqu’à présent, nous avons travaillé avec des objets du DOM HTML.
Avec jQuery, nous pouvons également manipuler les styles des éléments HTML.
jQuery fournit plusieurs méthodes pour y parvenir.
classe
Dans les premiers exemples que nous allons réaliser, nous verrons comment utiliser les classes avec jQuery.
Dans l’exemple ci-dessous, nous intégrons notre bibliothèque jQuery dans HTML et définissons deux classes nommées pink et yellow, qui rendent le texte rose et jaune.
Commençons 🚀
Exemple
Nous avons ajouté un élément <p> entre les balises <body>.
Pour le moment, cet élément n’a encore aucune classe.
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>Exemple 2
Ajoutons maintenant la classe pink à l’élément paragraphe en utilisant la méthode addClass().
Sur l’écran d’aperçu, nous constaterons que la couleur du texte Lorem ipsum devient rose.
<style>
.pink{
color:pink;
}
</style>
<p>lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//adding pink class to p element
$('p').addClass('pink');
});
</script>removeClass
Méthode removeClass()
Si nous voulons supprimer les classes des éléments HTML, nous utilisons la méthode removeClass().
Nous avons modifié l’exemple ci-dessous et défini initialement la classe pink dans notre élément HTML. Dès que le DOM sera chargé, la classe pink de notre élément p sera supprimée.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum </p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//removing pink class to p element
$('p').removeClass('pink');
});
</script>Classe basculante
Méthode toggleClass()
Comme son nom l’indique, avec cette méthode,
si une classe existe dans l’élément cible, elle est supprimée ; sinon, elle est ajoutée.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
/*
Since p element hasn't pink class,
pink class will be added.
*/
$('p').toggleClass('pink');
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
});
</script>Méthode css
Méthode css()
Nous avons vu les méthodes permettant d’ajouter et de supprimer des classes.
Apprenons maintenant la méthode CSS utilisée pour définir des styles en ligne pour nos nœuds HTML.
La méthode CSS prend deux paramètres.
- Le premier paramètre est le nom de la propriété à attribuer.
- Le second paramètre est la valeur de la propriété à attribuer.
L’exemple suivant présente différentes utilisations de la méthode CSS.
<button>My Button</button>
<script>
/*
Below, the button element's color style
has been read and written
to the color variable.
*/
let color = $('button').css('color');
/*
Now let's change the button color by assigning
the red value to the second argument=
*/
$('button').css('color', 'red')
/*
If we want to change more than one style of
an element at the same time, we pass JSON type arguments.
*/
$("button").css({"color": "red", "padding": "20px"});
</script>
API jQuery
Nous avons appris de nombreuses opérations de manipulation du DOM avec jQuery.
En plus des méthodes étudiées, jQuery propose de nombreuses autres méthodes de manipulation.
Vous pouvez consulter l’intégralité de l’API en cliquant sur le lien ci-dessous.
Félicitations
Félicitations 🎉
Nous avons appris à mettre en forme avec jQuery.
Dans la section suivante, nous apprendrons la gestion des événements avec jQuery.
Questions Fréquemment Posées
La leçon « Mise en forme avec jQuery » est-elle gratuite ?
Oui — le texte complet de « Mise en forme avec jQuery » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 1 leçons au total.
Qu'est-ce que j'apprendrai dans « Mise en forme avec jQuery » ?
Mise en forme avec jQuery Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer jQuery Academy ?
Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 1.
Combien de temps prend la leçon « Mise en forme avec jQuery » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?
Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.