|
| |
| PRATIQUE CLIENTS WEB |
 |
|
|
| jQuery : simplifier l'utilisation du DOM et d'Ajax |
| |
| La bibliothèque ne cherche pas à ajouter d'innombrables fonctionnalités à JavaScript, mais à simplifier la création de tâches répétitives : modification du DOM, effets graphiques et Ajax...
(06/11/2006) |
  |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Comme de nombreuses autres bibliothèques JavaScript actuelles, jQuery ajoute ses propres fonctions à celles de JavaScript, parmi lesquelles la fameuse $(), que l'on retrouve dans quasiment tous les autres framework, sous diverses implémentations.
Dans jQuery, $() est un alias de l'appel à la classe jQuery : appeler cette fonction signifie instancier un objet jQuery, dont le constructeur sert principalement de sélecteur pour l'élément sur lequel on souhaite travailler. Ainsi, $('a'), $('#menu') ou $('.article') permettent de cibler rapidement un élément du DOM.
Fondamentalement, jQuery fonctionne en enregistrant des évènements. La première méthode pour le faire consiste à ajouter le code JavaScript sur la page :
<script type="text/javascript">$(document).ready(function(){ // le code jQuery });</script>
La méthode ready() permet de lier à jQuery une fonction ou un bout de code a exécuter une fois le DOM intégralement chargé, ce qui évite de se reposer sur window.onload(). Le $(document) ne cible pas un élément particulier (indiqué par l'utilisation d'une chaîne), mais un élément global, ici document, donc la page entière.
Le code jQuery lui-même se compose d'une combinaison de sélecteurs et de méthodes, la bibliothèque dispose, malgré sa petite taille (20 Ko en version compressée), d'un large panel de fonctionnalités. La première présentée par l'auteur simplifie l'ajout d'éléments au sein de blocs :
$(document).ready(function(){ $("pre.run").append('<input type="submit" value="» Run"/>').find("input").click(function(){ eval(this.parentNode.childNodes[0].nodeValue); $(this).remove(); }); });
Ce code s'exécute comme il se lit : trouver l'élément <pre> disposant d'un id "run", y adjoindre un bouton (élément <input>), puis trouver ce nouvel élément et y appliquer la fonction suivante, qui se lance au clic. La fonction procède comme suite : au clic, retrouver le contenu du premier enfant de l'élément parent de <input> - en somme, le texte que contenait l'élément avant l'inclusion du bouton - et l'exécuter, puis enlever le bouton.
eval() permet de faire une démonstration éloquente si l'élément <pre> contient du code JavaScript/jQuery : en cliquant sur le bouton mis en place dynamiquement, c'est le contenu du bloc qui est lancé, qui sur la page de présentation est comme suit :
<pre class="run">$("p.surprise").addClass("ohmy").show("slow");</pre>
Cela permet de découvrir deux autres méthodes bien différentes : addClass() et show(). La première modifie le DOM du document, la seconde fait partie des nombreuses méthodes graphiques disponibles, et fais s'afficher un élément caché par le biais d'une petite animation à vitesse configurable. Dans l'ordre de lecture, donc, le code contenu dans <pre> repère l'élément <p> ayant l'id "surprise", lui ajoute la classe CSS "ohmy", et affiche cet élément lentement.
jQuery dispose ainsi de nombreuses méthodes de manipulation du DOM, d'animations, de gestion d'événements (souris, clavier...), etc. Elles sont à découvrir sur le site Visual jQuery.
Mais cette bibliothèque ne se limite pas au DOM et aux effets graphiques. Ajax fait également partie de ses capacités, avec une quinzaine de méthodes dédiées, depuis le chargement direct d'un contenu externe dans un élément, jusqu'à des méthodes de gestion plus subtiles, en passant le support JSON. Ainsi, pour injecter un contenu HTML directement dans le DOM, on utilisera load() :
$("#news").load("news.html");
Ce morceau de code s'occupe de charger le fichier news.html, et de la placer tel quel au sein de l'élément disposant de l'id "news".
Les autres méthodes sont à découvrir au moyen du site Visual jQuery, déjà cité.
|
|
|
|
