jQuery la librairie JavaScript révolutionnaire

J’ai découvert il y a peu de temps cette libraire JS tout simplement époustouflante au niveau facilité d’utilisation et puissance.
jQuery va vous permettre de faire tout et n’importe quoi mais sans les habituels problemes de support des différents navigateurs et de leurs versions sur les différents OS.

jQuery va fonctionner de la même manière sur tous ces navigateurs :

  • Firefox 2+
  • IE 6+
  • Opera 9+
  • Chrome+
  • Safari 3+
  • WebKit

Je pourrais continuer en disant que jQuery est :

  • élégant
  • Permet de chainer les fonctions
  • prévu pour ne pas rentrer en conflit avec les autres librairies
  • très populaire (suffit de regarder le nombre de plugin)
  • très léger dans sa version compressé (24ko)
  • ajoute le support CSS 3
  • possède une bonne documentation
  • aide au respect des standards (la page HTML doit respecter les règles du W3C)
  • …etc


pour faire fonctionner jQuery, une des solutions est d’utiliser le CDN (Content Delivery Network):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Modele de test pour jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  alert("le DOM est chargé");
});
</script>
</head>
<body>
........
</body>
</html>

version mini : http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
version normal (lisible) : http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js


quelques exemples :

// ajouter une bordure pour tous les TABLE du document
jQuery('table').css({border:"2px outset #CFCFCF"});
// ou
$('table').css({border:"2px outset #CFCFCF"});
// $ est un alias de jQuery

Dans cet exemple on remarque que l’on peut chainer les fonctions jQuery tout simplement :

// Remplacer le contenu des DIV du document par le texte "test" et ajouter une bordure aux DIV
jQuery('div').text("test").css({border:"2px outset #C7C7C7"});

Si vous êtes obligé de mettre votre code Javascript dans l’entête (entre <head></head>) de la page, vous devez attendre que le DOM soit chargé avant de pouvoir le modifier, avec jQuery la solution est simple :

$(document).ready(function(){
  // cache les DIV
  $('div').hide();
});

Note : $(document).ready() est exécuté dés que le DOM est chargé mais avant que tous les éléments de la page soient complètement chargés (pub flash, images, …)


L’utilisation des sélecteurs dans jQuery suit le standard CSS 3

  • $('*') : sélectionne tous les éléments du document
  • $('div') : sélectionne tous les éléments « div » du document
  • $('div,span') : sélectionne tous les éléments « div » et « span » du document
  • $('div span') : sélectionne tous les éléments « span » contenu dans les « div »
  • $('div > span') : sélectionne les éléments « span » qui sont des enfants direct de « div »
  • $('div + span') : sélectionne les éléments « span » qui sont des frères de « div »
  • $('div - span') : sélectionne les éléments « span » qui ne sont pas précédés par « div »
  • $('div.class1') : sélectionne les éléments « div » qui possèdent l’attribut class à la valeur « class1 »
  • $('div#id1') : sélectionne les éléments « div » qui possèdent l’attribut id à la valeur « id1 »
  • $('div[align]') : sélectionne les éléments « div » qui possèdent l’attribut « align »
  • $('div[align=center]') : sélectionne les éléments « div » qui possèdent l’attribut « align » à la valeur de « center »
  • $('div[align!=center]') : sélectionne les éléments « div » qui possèdent l’attribut « align » avec une valeur différente de « center »
  • $('div[align|=center]') : sélectionne les éléments « div » qui possèdent l’attribut « align » avec une valeur différente de « center »
  • $('div[align^=cen]') : sélectionne les éléments « div » qui possèdent l’attribut « align » avec une valeur commençant par « cen »
  • $('div[align$=r]') : sélectionne les éléments « div » qui possèdent l’attribut « align » avec une valeur finissant par « r »
  • $('div[align*=n]') : sélectionne les éléments « div » qui possèdent l’attribut « align » avec une valeur contenant « n »
  • $(':first') : sélectionne le 1er élément
  • $(':last') : sélectionne le dernier élément
  • $(':even') : sélectionne les éléments pair
  • $(':odd') : sélectionne les éléments impair
  • $(':eq(2)') : sélectionne l’élément ayant l’index 2
  • $(':lt(2)') : sélectionne les élément ayant un index inférieur à 2
  • $(':gt(2)') : sélectionne les éléments ayant un index supérieur à 2
  • $(':first-child') : sélectionne le premier élément
  • $(':last-child') : sélectionne le dernier élément
  • $(':nth-child(3)') : sélectionne le 3eme élément de son parent (l’index commence à 1 mais c’est 0 pour les autres sélecteurs utilisant un index)
  • $(':only-child') : sélectionne les éléments qui sont le seul enfant de leurs parents
  • $(':animated') : sélectionne les éléments pour lesquels une animation est en cours
  • $(':enabled') : sélectionne les éléments qui n’ont pas l’attribut « disabled »
  • $(':disabled') : sélectionne les éléments qui ont l’attribut « disabled »
  • $(':visible') : sélectionne les éléments qui sont visibles
  • $(':hidden') : sélectionne les éléments invisibles
  • $(':button') : sélectionne les éléments « button » ou de type « button »
  • $(':checkbox') : sélectionne les éléments de type « checkbox »
  • $(':file') : sélectionne les éléments de type « file »
  • $(':input') : sélectionne les éléments de type « input »
  • $(':image') : sélectionne les éléments de type « image »
  • $(':password') : sélectionne les éléments de type « password »
  • $(':radio') : sélectionne les éléments qui sont de type « radio »
  • $(':reset') : sélectionne les éléments qui sont de type « reset »
  • $(':submit') : sélectionne les éléments de type « submit »
  • $(':text') : sélectionne les éléments de type « text »
  • $(':checked') : sélectionne les éléments ayant l’attribut « checked »
  • $(':selected') : sélectionne les éléments ayant l’attribut « selected »
  • $(':contains(texte)') : sélectionne les éléments contenant le texte « texte »
  • $(':empty') : sélectionne les éléments qui ne contiennent aucun enfant
  • $(':has(div)') : sélectionne les éléments qui contiennent au minimum un élément « div »
  • $(':header') : sélectionne les éléments « h1 », « h2 », « h3 », « h4 », « h5 », équivalent à $("h1,h2,h3,h4,h5")
  • $(':not(p)') : sélectionne les éléments qui ne sont pas des éléments « p »
  • $(':parent') : sélectionne les éléments qui sont parent d’un élément

On peut mixer les sélecteurs, la puissance et la facilité d’utilisation de ce systeme est impressionnante, un exemple :

<div class="liens">
 <a href="http://www.google.com/advanced_search?hl=fr">google recherche avancé</a>
 <a href="http://www.google.com/webhp?hl=fr">google recherche normal</a>
 <a href="http://www.bing.com/">bing recherche</a>
 </div>
 
<script type="text/javascript">
// 1- ce positionner dans les éléments "div" ayant l'attribut "class" à la valeur "liens"
// 2- récupérer la liste de tous les éléments "a" ayant l'attribut "href" qui contient la valeur "www.google"
// 3- ajouter à ces éléments l'attribut "target" à la valeur "_blank"
$("div.liens a[href*=www.google]").attr("target", "_blank");
</script>

J’espère que cet article vous donnera envie de découvrir cette librairie.


jQuery : le site
jQuery : la DOC
jQuery : Un site en Français

Laisser un commentaire

*