web:jquery:css [WebGEPEM]

Ceci est une ancienne révision du document !

[Mise à jour le 30/3/2026]

Prérequis

- Algorithmique (affectation, tests, boucles)
- Base de HTML, de CSS et de JavaScript (jQuery).

La bibliothèque jQuery¹⁾ se fonde sur la puissance des sélecteurs CSS (Cascading Style Sheets) pour que nous puissions accéder rapidement t facilement ou à des groupes d'éléments du DOM.

1.1 La fonction $()

Quel que soit le type de sélecteur que nous voulons employer dans jQuery, l'instruction débute toujours par la fonction $(). Cette fonction prend généralement en seul paramètre un sélecteur CSS et retourne un nouvel objet jQuery qui pointe sur les éléments correspondant dans la page.

Utilisation des trois sélecteurs de base

Sélecteur	CSS	jQuery	Description
Nom de balise	p { }	$('p')	Sélectionne tous les paragraphes du document.
Identifiant	#un-id { }	$('#un-id'	Sélectionne l'élément unique du document dont l'identifiant est un-id.
Classe	.une-classe { }	$('.une-classe')	Sélectionne tous les éléments du document ayant une-classe comme nom de classe.

1.2 La méthode .html de la bibliothèque jQuery

Exemple

generic.html

  <div id="val1"></div> <!-- création d'un bloc val1 vide sur la page web -->

generic.js

  let data = 12;
  $("#val1").html(data); // $() sélectionne le bloc val1 et le rempli avec la valeur 12

1.3 La méthode .css de la bibliothèque jQuery

Applique des styles directement sur l'élément à l'aide d'une déclaration de style.

Exemple 1

*.html

  <!-- Fichier generique.html -->
  <div id="val1"></div> <!-- création d'un bloc val1 vide sur la page web -->

*.js

  // fichier generic.js
  let data = 12;
  $("#val1").html(data); // $() sélectionne le bloc val1 et le rempli avec la valeur 12
  $("#val1").css('color','red'); // la valeur 12 est réécrite en rouge

Exemple 2

*.html

  <!-- Fichier generique.html -->
  <div id="cel_a">Cel_a <br> A cliquer</div> <!-- création d'un bloc cel_a à cliquer -->

*.css

  /* fichier generic.css */
  /* Propriétés graphiques du bloc cel_a */
  #cel_a{
    width: 100px;
    height: 100px;
    background-color: grey;
    float: left;
    margin: 10px;
  }

*.js

  /* fichier generic.js */
 $('#cel_a').click(function () {
    $('#cel_a').css('background-color', 'yellow');
  }); // La couleur du bloc cel_a passe de grey à jaune

1.4 La méthode .addClass de la bibliothèque jQuery

Ajoute une classe CSS à l'élément, dont les styles sont définis dans une feuille de style externe.

Exemple

*.html

  <!-- Fichier generique.html -->
  <div id="cel_b">Cel_b</div> <!-- création d'un bloc cel_b -->

*.css

  /* fichier generic.css */
  /* Propriétés graphiques du bloc cel_b */
  .cel_b{ /* classe */
    width: 100px;
    height: 100px;
    background-color: grey;
    float: left;
    margin: 10px;
  }

*.js

  /* fichier generic.js */
  $("#cel_b").addClass('cel_b') // Affichage du bloc cel_b en gris

2.1 Changer la couleur d'un bloc en fonction d'un entier N

Objectif : changer la couleur d'un bloc en fonction d'un entier.

Algorithme partiel proposé

 Lire(N)
 si val0 <= N < val1 alors
   changer_couleur_bloc
 sinon si val1 <= N < val2
   changer_couleur_bloc
    ...
    ...
 sinon si valn-1 <= N < valn
   changer_couleur_bloc
 sinon
   changer_couleur_bloc
 fin si

¹⁾

jQuery- Simplifiez et enrichissez vos développements JavaScript - Pearson - J. Chaffer