Jquery : du peps dans le web ?

Préambule

On parle ici de concept, d’idées plus que de véritable technologie. Qui plus est, agir sur un objet html en utilisant un peu de javascript s’est appelé un jour DHTML et ce brillant postulat date du siècle dernier …

Mais, reconnaissons que l’écriture de longs codes Javascript s’apparentant plus à un pensum qu’a une joyeuse distraction, ces morceaux de code réutilisables et paramétrables tombent à point nommé.

Srciptaculous, motools, jquery se sont auto-proclamés "framework", ce qui est peut-être un tantinet prétentieux, mais encore une fois, peu importe si ils nous rendent service.

Alors Jquery, comment ça marche ?

Est ce que c’est compatible avec tous les navigateurs ?

JQUERY est une librairie Javascript qui se veut cross-browser … Le doux rêve du webmaster de voir ses sites avoir un rendu correct sur tous les navigateurs serait il en passe de se réaliser ? Presque ! Mais méfiant que vous êtes, vous vérifierez tout de même ; On n’est jamais à l’abri d’un utilisateur sournois utilisant un navigateur hors d’âge, et ayant de surcroit échappé à toutes les mises à jour automatiques …

Combien ça pèse ?

Pas beaucoup ! On trouve en effet une version du fichier amoureusement nommée jquery-le numéro de version.min.js. Bien que le chiffre bouge sans cesse, on reste pour l’instant en deçà de 50 Ko, ce qui vous le conviendrez, semble raisonnable.

Est on trouve ce machin où ?

La, franchement, c’est de la mauvaise foi :-). La moindre recherche va forcément vous indiquez quelque chose comme : http://jquery.com/. Vous allez trouver un gros « Download » (et oui, le site est en VO …). Attention : il se peut que votre navigateur affiche le contenu du javascript au lieu de vous proposer de le télécharger. Réduisez à néant ses mauvaises intentions en vous rendant directement sur la page dédiée aux téléchargements : http://docs.jquery.com/Downloading_…

Le tuto commence ici

Préparation

Commencez par créer un fichier html et un fichier CSS, exactement comme suit. Si vous êtes puriste, de grâce, épargnez moi vos commentaires (désagéables) sur la DTD ou le fait qu’il serait tout de même préférable de créer des sous répertoires pour les css, les images, le javascript, etc… De toutes façons, ce tuto est destiné aux « padawan » et obi wan a foutu le camp depuis longtemps avec yoda pour aller au bistrot …

le html ….

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

        <title>Mes premiers pas avec JQUERY !</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <link rel="stylesheet" type="text/css" href="exo1.css" />

        <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>

</head>

<body>

        ......

</body>

</html>

le css ….

/*---------------------------------------------------------------------------*/

/*------------- feuille de style de mes exercices JQUERY --------------*/

/*---------------------------------------------------------------------------*/

Appeler JQUERY

Évidemment, il faut appelez cette belle librairie pour pouvoir s’en servir. Remarquez cette ligne, placée à la fin de l’entête, juste après l’appel de la feuille de style :

<script type="text/javascript" src="jquery/jquery-1.4.2.min.js">

Avertissement : après un magistral copier/coller, vous vérifierez que le nom du fichier javascript correspond bien à la version que vous venez de télécharger. C’est que cette petite bête change de nom ( de version) souvent, signe de bonne santé …

Codez les futures victimes de JQUERY

Deux div suffiront pour cela : une qui servira de déclencheur et une autre sur laquelle appliquer les mauvais traitements de JQUERY

<div id="bourreau">Cliques-moi si tu l'oses</div>

<div id="victime">Lorem ipsum dolor site amet consecutor ...</div>

et donnez leur un peu de volume avec la css

#bourreau { background-color:#a9dc4e; width: 200px; }

#victime { background-color: #f5ad1f; padding: 2em; width: 150px; }

Soit une merveille comme cela :

Cliques-moi si tu l’oses

Lorem ipsum dolor site amet consecutor …

L’essentiel expliqué

Nous allons détecter le « clic » , ce qui se traduit par le début de code suivant :

click(function(){ });

Ensuite, cette détection se fera sur la fameuse boite verte, qui à la bonne idée d’avoir un ID :

$("#bourreau").click(function(){ });

On va alors déclencher une fonction de jquery nommé slideUp. Le mot « normal » permet de transmettre à cette fonction la vitesse désirée pour l’animation :

$("#bourreau").click(function(){ .slideUp("normal"); });

Enfin, il ne nous restera plus qu’a désigner l’objet sur lequel cet effet va agir, en l’occurrence notre belle div orangée, que l’on désignera la aussi par son id :

$("#bourreau").click(function(){$("#victime").slideUp("normal"); });

Désignation de l’objet

Comme vous le voyez la syntaxe de désignation d’un objet est assez simple, puisqu’elle reprend la notation des css.

Attention : Cette liste n’est pas exhaustive :
Par id : $("#nom_de_l_id")
Par class :| $(".nom_de_la_class")
Par balise : $("nom_balise")
Selecteur enfant : $(”#titi > span”) ;
pseudo classe : $(”table#tutu > tr:even”) ;

Ce tuto n’ayant pas pour objectif de re-lister tous les sélecteurs et leurs imbrications, nous nous arrêterons là.

Agir sur les propriétés de style

Faisons une petite digression dans le déroulé de ce tuto pour voir quelques fonctions intéressantes… :

$(”p”).addClass(”bluebg”);

Ajoute la classe CSS nommée “bluebg” à tous les <p>



$(”p”).removeClass(”bluebg”);

Enlève la classe “bluebg” à tous les <p>.



$(”p”).toggleClass(”bluebg”);

Ajoute la class "bluebg" si elle n'y est pas, et l'enlève dans le cas contraire



$(”p:odd”).css(”border”, “5px solid black”);

Ajoute une bordure noire en trait continu à 1 paragraphe sur 2



$(”a[href=http://www.google.fr]“).css(”fontweight”,“bold”).css(”color”,“red”).css(”background-color”, “green”);

Modifie tous les liens pointant vers le site http://www.google.fr



$(”p#testAppend > span”).append(”Hello

World !”);

Ajoute du texte a la balise SPAN contenu dans l’élément P dont l’id est “testAppend”.

Ici s’achève cette parenthèse … :-)

Chargement (fonction ready)

Au lieu d’utiliser une fonction appelée sur la balise body ( body onload="…. ;") il existe une fonction spécifique plus performante, puisque opérationnelle dès que le DOM est entièrement chargé.
Assurez vous que vous n’avez pas de code pour le gestionnaire d’évènement onload de la balise , sinon $(document).ready() ne se lancera pas.

syntaxe : $(document).ready(function() vos fonctions ici … ) ;

Pour notre exemple des deux boites du présent tuto cela donnerai :

<script type="text/javascript">

    $(document).ready(function(){

       $("#bourreau").click(function(){$("#victime").slideUp("normal");  });

    });

</script>

A partir de là, supposant que vous n’avez pas décroché, vous êtes arrivé au bout de ce tuto d’initiation. Félicitations !

une autre informatique

formations et conseils sur les logiciels libres