JQuery: Demonstration

Manipulation aisée de la DOM et des évènements

jQuery permet une sélection aisée d'éléments de la DOM en utilisant les selecteurs, répondant à la syntaxe CSS et XPath. Pour plus d'information, rendez-vous sur la partie de la documentation consacrée aux sélecteurs.
L'utilisation des évènements est également facile, avec des fonctions permettant d'assigner des fonctions à un évènement donné sur des élements.

Exemple: Assignation d'une action sur un lien. Cliquez sur le lien pour déclencher l'action qui lui est associée.

Lien de test

	//code HTML
	<a title="lien de test" id="lien_test">Lien de test</a>
	
	//code javascript
	$("#lien_test").click(
	function(){alert('bonjour !');}
	);

Exemple: Assignation d'une fonction permettant de changer le style des élements de la liste d'id 'liste'.

  • texte1
  • texte2
  • texte3

	//code HTML
	<ul id="liste">
		<li>texte1</li>
		<li>texte2</li>
		<li>texte3</li>
	</ul>
	
	//code javascript
	$("#liste li").hover(
		function(){$(this).addClass('li_hover');},
		function(){$(this).removeClass('li_hover');}
	);

Les effets

Test montrant l'effet 'FadeOut' / 'FadeIn' qui fait disparaitre un calque, avec la vitesse voulue.

function testFade()
{
	$('#effet).fadeOut("slow");
	$('#effet).fadeIn("fast");
}

Test montrant l'effet 'FadeTo' permettant de définir l'opacité et la vitesse.

function testFadeTo()
{
	$('#effet).fadeTo("slow", 0.3);
	$('#effet).fadeTo("slow", 1);
}

Test montrant l'effet 'Hide' et 'show' permettant de cacher et rendre un élement visible.

function testHideShow()
{
	$('#effet).hide("slow");
	$('#effet).show("slow");
}

Test montrant l'effet 'Slide'.

function testSlide()
{
	$('#effet).slideUp("normal");
	$('#effet).slideDown("normal");
}

Pour en savoir plus sur les différents effets disponibles, rendez-vous dans la section des effets de la documentation.

Utilisation très simple d'AJAX

jQuery propose une ensemble de fonctions qui permettent une utilisation très aisée d'AJAX. Voici un exemple. On souhaite afficher le contenu d'un fichier externe dans un conteneur, ici un fichier test.

Contenu du fichier:

//code javascript

$.ajax({
   type: "GET",
   url: "test.htm",
   error:function(msg){
     alert( "Error !: " + msg );
   },
   success:function(data){
   	//affiche le contenu du fichier dans le conteneur dédié
	$('#contenu_fichier_ajax').text(data);
}});

Création de plugins

Les plugins permettent d'étendre les possibilités du framework JQuery de manière très simple.
C'est à mon sens une des force de ce framework, puisque les fonctions de bases que propose le framework peuvent être étendues de manières très intéressantes, comme en témoigne la liste des plugins officiels. Leur mise en place est très simple, il suffit de télécharger le ficher correspondant et l'inclure dans le document HTML de la même facon que jQuery. En voici quelques exemples:

Interface

Ce plugin permet de réaliser des effets très intéressants en utilisant les effets de base proposé par jQuery, et dont les fonctionnalités sont similaires au framework scriptaculos. Une démonstration très complète montre les nombreuses possibilités de cette extension. Il provient de http://interface.eyecon.ro/, et a été réalisé par Stefan Petre et Paul Bakaus.

Calendrier

Ce plugin permettant d'afficher un calendrier a été trouvé ici: http://marcgrabanski.com/code/jquery-calendar/, et a été réalisé par Marc Grabanski a a été étendu par Keith Wood.

Beaucoup d'autres plugins tout aussi intéressants sont disponibles, n'hésitez pas à les consulter.