Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js

Jquery et le DOM

Vous savez que l'interactivité repose sur la modification du DOM :

Nous avons déjà appris à modifier le DOM via jQuery :
• ajouter/modifier des attributs : méthode attr()
• modifier les dimensions d'un élément : méthodes width(), height()
• ajouter/modifier des propriétés CSS : méthode css()
• ajouter/retirer des classes : méthodes addClass(), removeClass(), toggleClass()
• remplacer le contenu des balises : méthode html() ou text()

Mais vous ne savez toujours pas :
• compléter le contenu d'un noeud : insérer du texte avant/après le contenu actuel
• se déplacer dans le DOM
• rajouter des noeuds
• supprimer des noeuds

Ce sont ces différents points qui seront évoqués dans ce chapitre.

Compléter le contenu d'un noeud

Vous savez déjà remplacer le contenu d'un noeud ; il suffit d'utiliser les méthodes text() et html() déjà évoquées.

Maintenant si vous voulez insérer du texte avant ou après le contenu actuel il faut utiliser d'autres méthodes.
Introduisons ces méthodes avec un exemple !

Exemple

En cliquant sur un bouton de commande du texte est ajouté avant et après le contenu actuel des titres H1 et H2.

Le code HTML

Le script

	$("button").click(function() 
	{
		$("h1").prepend("Chapitre ").append("↓");
		$("h2").prepend("Section ").append("↓");
	}
	);

Pour les titres de niveau 1 et 2 emploi des méthodes prepend() (ajout de contenu en début) et append() (ajout de contenu à la fin). Notez qu'à la fin on ajoute une flèche (orientée vers le bas) grâce à une entité de caractère.

Le rendu

Se déplacer dans le DOM avec Jquery

Autant en JS natif le déplacement à l'intérieur du DOM du document est délicat. Autant c'est d'une facilité déconcertante avec JQuery.

Exemple

Je présente avec cet exemple les principales méthodes pour se "promener" dans le DOM.

Le code CSS et HTML (extraits)

La page comprend : un tableau, une liste à puces, une liste numérotée, une boîte avec trois paragraphes, un bouton de commande.

Le script de l'exemple

	$("td").mouseover(function() 
		{$(this).next().css("background","green");$(this).prev().css("background","red");});
	$("td").mouseout(function() 
		{$(this).next().css("background","");$(this).prev().css("background","");});
	
	$("li").click(function() 
		{$(this).prevAll().css("color","red");$(this).nextAll().css("color","green");});
	$("li").mouseover(function() 
		{$(this).prevAll().css("color","");$(this).nextAll().css("color","");});
		
	$("ol,ul").click(function() 
		{$(this).children().css("fontWeight","bold");});
	$("ol,ul").mouseout(function() 
		{$(this).children().css("fontWeight","");});
	
	$("div p ").click(function() 
		{$(this).parent().css("background","purple");});
	$("div p ").mouseout(function() 
		{$(this).parent().css("background","");});
	
	$("button:eq(0)").click(function() 
		{$("body").find("p").css("fontWeight","bold");});

Dans le script on utilise différentes méthodes pour se déplacer dans le DOM :
• la méthode prev() appliquée à une cellule de tableau cible la cellule à sa gauche de la même ligne
• la méthode next() appliquée à une cellule de tableau cible la cellule à sa droite de la même ligne
• la méthode prevAll() appliquée à un item de liste cible les items au dessus de l'item sélectionné
• la méthode nextAll() appliquée à un item de liste cible les items en dessous de l'item sélectionné
• la méthode children() appliquée à OL ou UL cible tous les items de la liste
• la méthode parent() appliquée à une balise P contenue dans un DIV cible ce DIV
• la méthdoe find() argumentée avec P et précédée de $("body") cible toutes les balises P de la page

Le rendu

Ajouter / supprimer des noeuds

Exemple1

Objectif : supprimer l'image cliquée.

Le code

Notez comment on cible l'image cliquée : $("img").click
Emploi de la méthode remove() à l'élément courant pour supprimer l'image cliquée.

Testons !

Exemple 2

Dans ce deuxième exemple je vais introduire d'autres méthodes qui permettent cette fois d'insérer de nouveaux éléments dans le DOM.

Le code HTML (extraits)

La page contient une liste à puces, une liste numérotée, une boîte contenant trois paragraphes, cinq boutons de commande.

Le script

Analysons ce script :
• première instruction : utilisation de la méthode insertAfter() qui permet d'ajouter un item en fin de liste ; ajout du code HTML :<li>item - fin</li>
• deuxième instruction : utilisation de la méthode insertBefore() qui permet d'ajouter un item en début de liste ; ajout du code HTML : <li>item - début</li>
• troisième instruction : utilisation de la méthode remove() pour supprimer les balises P contenue dans la boîte DIV
• quatrième instruction : utilisation de la méthode empty() qui supprime tous les "enfants" de l'élément ciblé(UL) donc suppression des "li" correspondants
• cinquième instruction : toujours utilisation de la méthode empty() pour supprimer tous les items de la liste numérotée

Notez bien la syntaxe pour les méthodes insertAfter et insertBefore :
$("code HTML ajouté").insertAfter/insertBefore($("point d'insertion"))
Notez que les méthodes remove() et empty() n'ont pas besoin d'arguments.

Testons !

Ajoutez des items aux listes puis supprimez ces dernières et d'autres éléments de la page.
Pour testez le code n'hésitez pas à recharger la page afin qu'elle retrouve son état initial.