Exercices jQuery

Voici une série d'exercices d'initiation à JavaScript/jQuery.

Chaque exercice doit traiter des éléments html de cette page web.

Vous devrez créer un fichier javascript que vous lierez à cette page.

Le programme principal fera appel au sous-programme exercice1_1 qui résoudra le problème du premier exercice ...

1. Sélection d'éléments de la page web et utilisation de méthodes

Vous devrez savoir :

Exercice 1

Appliquez la classe relief à tous les span de ce paragraphe.

Exercice 2

Faites disparaître lentement (avec la méthode hide ou la méthode fadeOut) les éléments de ce paragraphe situés dans des balises span de la classe option.

2. Gestion d'évènements et sélections

Vous devez savoir :

Exercice 1 : masquage d'un élément

Lorsqu'on clique sur la liste, masquer son premier élément, réafficher l'élément lorsqu'on clique surtout réafficher.

Exercice 2 : masquage de l'élément récepteur de l'évènement

Lorsqu'on clique sur un élément de la liste, masquer cet élément, réafficher tous les éléments lorsqu'on clique surtout réafficher.

Exercice 3 : masquage d'un ensemble d'éléments

Lorsqu'on clique sur un élément, masquer tous ceux qui appartiennent à la même classe, réafficher tous les éléments lorsqu'on clique surtout réafficher.

Exercice 4 : ajout d'une classe à d'un ensemble d'éléments

Lorsqu'on clique sur un élément, ajouter la classe "relief" à tous ceux qui appartiennent à la même classe, réafficher normalement tous les éléments lorsqu'on clique surtout réafficher.

3. Gestion d'évènement et manipulation du DOM

Vous devez savoir :

Exercice 1 : déplacement d'un élément

Cliquer sur la liste provoque la modification suivante : le premier élément est déplacé en dernière position.

Exercice 2 : déplacement de l'élément ciblé, parmi des frères

Cliquer sur un élément de la liste provoque la modification suivante : l'élément est déplacé en dernière position.

Exercice 3 : déplacement de l'élément ciblé, parmi des frères

Cliquer sur un élément de la liste provoque la modification suivante : l'élément est déplacé d'un cran vers le haut de la liste.

  1. A
  2. B
  3. C
  4. D

Exercice 4 : insertion d'éléments de contrôles

Ajouter un ↑ et un ↓ après chaque élément. ↑ aura pour classes control et monte ; ↓ aura pour classes control et descend. Cliquer sur ↑ déplace l'élément d'un cran vers le haut de la liste, cliquer sur ↓ le déplace vers le bas.

  1. A
  2. B
  3. C
  4. D

Bonus : Il est inutile d'avoir un ↑ pour déplacer le premier élément ...

Exercice 5 : capture d'évènements

Cliquer sur un élément de la liste non numérotée provoque la modification suivante : l'élément est déplacé en dernière position de la liste numérotée.

Dans cette liste numérotée, cliquer sur un élément le met en relief (utilisez la classe "relief"), ôte le relief des autres éléments et fait apparaitre un 'x' à la droite de l'élément. Le 'x' aura pour classes control et supprime, cliquer sur le 'x' supprime l'élément.

Remarque 1 : lorsque un élément est déplacé, il continue à avoir son gestionnaire d'évènement, il peut être utile de le supprimer

Remarque 2 : lorsque un élément est inséré dynamiquement (par programme), il ne possède pas les gestionnaires d'évènement donnés à ses frères statiques. Il faut donc lui associer dynamiquement un gestionnaire d'évènement.