Javascript permet de manipuler le DOM, ça vous le savez puisque vous avez lu le chapitre 1 ^^. Du coup il est possible de modifier une page web sans la recharger : supprimer un paragraphe, ajouter une image, changer tout le contenu d'une div...

jQuery propose toute une série de fonctions qui permettent de manipuler facilement la structure DOM sans se prendre la tête avec du javascript natif dont la syntaxe est beaucoup plus complexe, tout en étant moins flexible !

Modifier les éléments

Chaque élément du DOM est caractérisé par plusieurs choses :

• son tag (<a>, <div>, <p>, <img>, <iframe>...)
• ses attributs (id, class, style, name, href, src...)
• son contenu : du texte ou d'autres éléments
  Par exemple un élément <strong> contient du texte, alors qu'une liste <ul> contiens des éléments <li>. Certains éléments n'ont pas de contenu, c'est le cas de <img>, <br> ou <hr> notamment.

Contenu

jQuery permet de modifier très facilement le contenu d'un élément avec la fonction .html() :

<a href="#" id="handle">Ajouter du texte</a>
<div id="mon_element">Texte par défaut</div>

jQuery(document).ready(function($){
	$('#handle').click(function(e){
		var texte = prompt("Entrez le texte à placer dans #mon_element");
		$('#mon_element').html(texte);
	});
});

Comme vous pouvez le voir, la fonction .html() efface tout le contenu de l'élément (<div>) et ensuite y ajoute ce qu'on lui a passé en paramètre.

C'est pratique, mais parfois on peut avoir besoin de simplement ajouter du contenu à un élément (à la fin de celui-ci, une sorte de concaténation quoi).

Pour obtenir cela, on pourrait simplement utiliser l'opérateur "+" qui sert à concaténer des chaines en Javascript :

$('#mon_element').html( $('#mon_element').html() + ' salut' );

Mais on ne va pas faire ça, parce qu'il y a mieux : .append().
La fonction append (to append = ajouter) sert justement à ajouter quelque chose dans l'élément sélectionné (avec le sélecteur $).

Et quelque chose, ça signifie :

• une chaîne de caractères (qui peut être du code HTML), exactement comme avec .html()
• ou un élément DOM !

Ah oui, je ne vous ai pas dit, jQuery permet de créer facilement des éléments avec une syntaxe très simple :
jQuery(<le code html de votre élément>) :

// On créé un nouvel élément (div)
var new_element = jQuery('<div>X</div>');

// On ajoute un peu de style avec la fonction .css()
new_element.css({
	background:	'red',
	width:		'30px',
	height:		'30px'
});
// Pour le moment, notre élément existe, il est simplement stocké dans la mémoire,
// mais il n'est pas encore affiché à l'écran

// On ajoute ce nouvel élément à un élément existant (ici : body, le corps du document HTML)
$('body').append(new_element);

// Et maintenant on peut le voir ! (comme le Luminou, ndlr)

Attributs

La fonction .attr() permet d'accéder ou de modifier la valeur de n'importe quel attribut d'un élément.

Pour illustrer ça, on va prendre un lien (<a>), un lien c'est bien parce qu'on peut lui refourguer pleins d'attributs !

<a href="http://www.finalclap.com" rel="internal" id="handle" target="_blank"
style="font: bolder 20pt Arial" title="Bookmark moi !">Finalclap</a>

jQuery(document).ready(function($){
	$('#handle').click(function(e){
		e.preventDefault();   // On désactive le lien
		
		$('#output').html('') // On lit quelques attributs de ce lien, et on les affiche
			.append( '<i>attribut target </i>: ' + $(this).attr('target')	+ '<br/>' )
			.append( '<i>attribut rel    </i>: ' + $(this).attr('rel')		+ '<br/>' )
			.append( '<i>attribut title  </i>: ' + $(this).attr('title')	+ '<br/>' )
			.append( '<i>attribut style  </i>: ' + $(this).attr('style')	+ '<br/>' )
	});
});

Comme vous pouvez le voir, pour lire un attribut avec la fonction .attr(), il suffit de lui passer en paramètre le nom de cet attribut, et la fonction retourne sa valeur.

C'est presque aussi simple, il suffit de passer un second paramètre à la fonction .attr(), et la valeur de l'attribut sera remplacée par ce second paramètre :

// Modification de l'attribut href de notre lien
$('#handle').attr('href', 'http://www.photoshoptuto.com');

Modifier les structures

Après les éléments, passons maintenant aux structures.

Ce que j'appelle structure c'est simplement des groupes d'éléments HTML, comme par exemple un <div> qui contiendrait plusieurs autres <div> correspondant à des films :

<a href="#" id="handle-liste-films">Ajouter</a>
<div id="liste-films">
	<div><span>Pulp fiction</span> - <b>supprimer cette ligne</b></div>
	<div><span>Fight club</span> - <b>supprimer cette ligne</b></div>
	<div><span>Toy Story</span> - <b>supprimer cette ligne</b></div>
	<div>
		<span>Star Wars</span> - <b>supprimer cette ligne</b> - <a class="vider">vider</a>
		
		<div><span>Star Wars - episode I</span> - <b>supprimer cette ligne</b></div>
		<div><span>Star Wars - episode II</span> - <b>supprimer cette ligne</b></div>
	</div>
</div>

Grâce à jQuery, on va pouvoir manipuler la structure de cet ensemble (modifier le DOM en fait) :

• supprimer des éléments
• déplacer des éléments (dans le DOM, pas à l'écran)
• créer de nouveaux éléments

Et pour cela, on utilise des fonctions qui permettent de naviguer dans la structure :

• .parent()
  Retourne l'élément qui contient l'élément sélectionné
  
  
• .children( [string: sélecteur] )
  Retourne la liste des éléments (dans un tableau).
  Si vous lui fournissez un paramètre une sélection (CSS, comme avec le sélecteur, ex: .content p), seuls les enfants correspondant à cette sélection seront retournés
  
  
• .siblings( [string: sélecteur] )
  Se mot signifie "Frères et soeurs" en Anglais. Son fonctionnement est identique à children, si ce n'est qu'elle ne s'applique pas aux enfants de l'éléments, mais aux autres éléments qui ont le même parent.
  $('#element').siblings('div') est donc équivalent à
  $('#element').parent().children('div').

Pour l'exemple, on va permettre de supprimer chaque ligne (<div>) et ajouter de nouvelles lignes :

jQuery(document).ready(function($){
	// -----------------------------------------------
	// Suppression de ligne lors du clic sur supprimer
	// -----------------------------------------------
	$('#liste-films div b').click(function(e){
		$(this).parent().remove();
	});
	
	// -------------------------
	// Ajout de nouvelles lignes
	// -------------------------
	$('#handle-liste-films').click(function(e){
		e.preventDefault();
		
		// On demande à l'utilisateur d'entrer du texte
		var texte = prompt("Entrez le texte à placer dans #liste-films");
		
		// Création de l'élément nouvelle_ligne
		var nouvelle_ligne = $('<div><span>'+texte+'</span> - <b>supprimer cette ligne</b></div>');
		
		// On ajoute (bind) la fonction qui supprime cette nouvelle ligne quand on clique sur supprimer
		nouvelle_ligne.children('b').click(function(e){
			nouvelle_ligne.remove();
		});
		
		// Ajout de ce nouvel élément à notre liste
		$('#liste-films').append(nouvelle_ligne);
	});
	
	// -----
	// Vider
	// -----
	$('#liste-films div .vider').click(function(e){
		$(this).siblings('div').remove();
	});
});

Bien entendu, jQuery propose beaucoup d'autres fonctions qui permettent de manipuler le DOM. Je vous ai montré uniquement les 3 fonctions les plus utiles, celles qui permettent d'arriver à faire ce qu'on veut dans la plupart des cas.

Mais si vous voulez en savoir plus, vous trouverez une liste de toutes ces fonctions d'exploration dans la catégorie Traversing > Tree Traversal de la documentation.

Prochain chapitre : AJAX !

Fini de lire cette page ? allez faire un tour ici : webdesign from scratch, ça peut vous intéresser.

Ce tutoriel fait partie d'un cours : aller au sommaire pour voir les autres chapitres.