Accueil > Non classé > jQuery – présentation

jQuery – présentation

Je vais tenter de faire découvrir jQuery à ceux qui ne le connaissent pas encore.Jquery-logo
Il s’agit d’une librairie opensource qui simplifie l’emploi du JavaScript dans les pages html. Concretement, jQuery permet une approche simplifiée, intuitive et puissante du JavaScript en offrant un ensemble de fonctions de sélection et de manipulation d’éléments html et d’appels Ajax.

Pour l’utiliser il suffit d’importer le fichier jQuery-X.Y.Z.js dans votre page jsp ou html.

Les simplifications de jQuery portent sur :

  • la construction d’arbres DOM
  • le parcours d’arbres DOM
  • la sélection d’un élément précis dans l’arbre ou dans une page
  • la lecture ou la modification des attribut d’un élément html
  • la construction d’appels Ajax et le traitement de leurs retours

La syntaxe de base consiste en jQuery(element) qui permet la sélection d’un élément sous forme d’arbre DOM.
En fait, un raccourci prévu par la librairie permet de remplacer jQuery dans le code ci-dessus par $ afin d’obtenir $(element).
Ainsi, il est possible de “requêter” une page html pour en sélectionner des éléments de la même façon qu’on requêterait une base de données avec du SQL.

Par exemple :

  • $("#myField") permet de récupérer un et un seul élément de la page dont l’attribut “id” est égal à “myField”. L’équivalent en JavaScript classique aurait donné document.getElementById("myField").
  • $("div") retourne tous les éléments “div” de ma page html.
  • $("div:first") retourne le premier élément “div”de ma page html. Encore une fois, le JavaScript classique aurait donné document.getElementsByTagName("div")[0]
  • $(".myClass") retourne tous les éléments html de ma page sur lesquels on applique la classe css “myClass”.
  • $("div,a.myClass") retourne tous les éléments “div” et “a” tels que “a” aurait la classe css “myClass”.
  • $("div",document.form[0]) retourne tous les éléments “div” du premier formulaire de ma page.
  • $("#myDiv").children() retourne la liste des éléments fils de l’élément identifié par “myDiv”.

Une fois l’élément ou la collection d’éléments trouvée, il est possible d’en modifier les attributs ou de définir des “events” sur ces éléments :

$(".myclass").click(function(){...});

définit une fonction JavaScript qui sera appelée à chaque fois qu’un élément ayant  la classe css “myClass” sera cliqué.

Les lignes de code suivantes


1
2
3
$("div").filter(".theOtherClass").each(function(){
    $(this).css("color","red");
});

exécutent une fonction dans le contexte de chacun des éléments sélectionnés par la requête. Ici, on change la couleur de tous les élements “div” ayant la classe “theOtherClass”. Remarquez au passage le chaînage d’appels de méthodes.

De la même façon, observons le code javascript suivant :


1
2
3
4
5
6
7
8
9
10
11
var divs = document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
    divs[i].style.color = "red";
}

var aTags = document.getElementsByTagName("a");
for(var i=0;i<aTags.length;i++){
    if(aTags[i].className == "myClass"){
        aTags[i].style.color = "red";
    }
}

qui peut être avantageusement remplacé par :


1
2
3
$("div,a.myClass").each(function(){
    $(this).css("color","red");
});

Enfin, il est possible d’effectuer des appels Ajax à l’aide de la syntaxe simplifiée:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.ajax({
    type :"GET",
    url : "/myAjaxAction.do",
    data : {
        arg1 : firstArgument,
        arg2 : secondArgument
    },
    complete : function(response, status){
        if(status=="success"){
            alert("my Ajax call was a success and returned " + response + " (^_^°)");
        } else {
            alert("my Ajax call was a failure (-_-)");
        }
    }
});

Ce bout de code permet d’interroger le serveur à l’url myAjaxAction.do (hé oui… c’est du struts) et affiche une popup en fonction de ce qui est retourné.

L’exemple suivant :

$("#myDiv").load("/myOtherAjaxAction.do");

sélectionne l’élément identifié par “myDiv” et y injecte le code html retourné par l’appel de “/myOtherAjaxAction.do”.

D’autres librairies JavaScripts très puissantes s’appuient sur jQuery tels que jQGrid pour la construction et l’affichage de tableaux dynamiques et jsTree pour la construction d’arborescences.

Pour ceux qui souhaitent approfondir le sujet, je recommande le site officiel de jQuery où vous trouverez tout ce que vous voudrez savoir sur cette librairie.

Share
  1. Pierre-Yves RICAU
    02/11/2009 à 12:41 | #1

    Article intéressant, ça donne envie d’essayer !

  1. 19/03/2011 à 01:57 | #1