La puissance jQuery

On en avait besoin

Peu de personnes sont capables de développer uniquement en Javascript. Il faut faire fonctionner le code sur tous les différents navigateurs, ce qui s'avère très compliqué. Heureusement, il existe des frameworks (que l'on peut traduire en bibliothèque) tels que Mootools, Prototype et jQuery qui est la plus connue & la plus appréciée. Ils permettent de faire un code beaucoup plus court, plus clair, plus rapide et qui est compatible avec tous les navigateurs.

La vie du webdesigner est simplifée

Avec jQuery, même un designer qui n'aime pas le code peut faire des animations sur sa page HTML. Voici une fonction basique en Javascript qui ressemblerait à ça :

function avoirDefilementVertical(){
  if(typeof( window.pageYOffset ) == 'number'){
    // Netscape
    return window.pageYOffset;
  } else if( document.body && (document.body.scrollTop) || navigator.appName=="Microsoft Internet Explorer") {
    // DOM
    return document.body.scrollTop;
  } else if( document.documentElement && (document.documentElement.scrollTop) ) {
    // Internet Explorer 6
    return document.documentElement.scrollTop;
  }
}

devient simplement :

function avoirDefilementVertical(){
    return $(document).scrollTop();
}

Le long "document.getElementById()" est remplacé par un petit $() qui donne accès à de nombreuses fonctions puissantes.


C'est parti

Installer jQuery

jQuery est tout simplement du code javascript à insérer dans sa page. On peut récupérer le code sur la page officielle ou directement utiliser la version hébergée par Google code.

// on fait un lien vers jQuery hébergé par Google Code
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

ou

// on fait un lien vers jQuery qu'on héberge nous même dans le dossier "js"
<script type="text/javascript" src="js/jquery.min.js"></script>

Il faut insérer ce code de préférence juste avant la fermeture du <body>. Cela permet un chargement plus rapide de la page (comme c'est le cas dans cette page). Il faut également que ce code soit appelé avant le code que tu écriras.

Utiliser jQuery

La fonction jQuery(), qui est équivalente à $(), permet de sélectionner des éléments de ta page web. Le paramètre qu'il faut mettre entre les parenthèses est un sélecteur que l'on utilise également en CSS. Par exemple, "h1", "#un_id", ou encore ".une_classe". Quand c'est fait, on a accès à toutes sortes de fonctions très puissantes ! On va commencer avec la fonction css() qui permet de changer les propriétés CSS.

// mettre la taille des <h1> à 50px
$('h1').css('fontSize', '50px');

// mettre l'id #un_id en rouge
$('#un_id').css('color', 'red');

// cacher les classes .une_classe
$('.une_classe').css('display', 'none');

Petit exercice d'application en partant de ce code HTML :

<p>
La vie est très belle.
<span>Oui, oui, c'est vrai</span>
</p>
<span id="a_transformer">Moi aussi, j'ai envie de transformation</span>

Document Ready ?

En jQuery, tu vas modifier des éléments de la page et cela marchera seulement s'ils sont déjà chargés. La fonction ready() nous permet d'attendre que ce soit le cas avant d'executer le code.

$(document).ready(function() {
  // code lu uniquement une fois le document chargé
});

On peut également l'écrire de cette manière :

$(function() {
  // code lu uniquement une fois le document chargé
});


Les évènements

Avec jQuery, c'est très simple de lancer une action à partir d'un évènement qui peut être un survol, un clic, le fait de scroller, ou encore le fait d'appuyer sur une touche du clavier.

// lancement d'une fonction au clic sur les élements qui comportent la classe ".button"
$('.button').click(function(){
  // $(this) est l'équivalent de refaire $('.button') :
  // en gros, il reprend l'élément sur lequel on applique une fonction
  $(this).css('font-size', '1000px');
});

Petit exercice d'application

Faire un bouton avec une version "On" et "Off". La version "On" est noire avec un fond gris clair comportant une ombre portée, et la version "Off" est grise avec un fond gris foncé sans ombre portée. Au clic, on passe à "On" si c'est "Off" et inversement.

Petit exercice d'application 2

Faire un menu déroulant : au clic sur un bouton, un bloc de texte se déplie. Et quand on reclique dessus, il se referme. Pour l'animer, il faut utiliser la fonction animate() ou slideToggle().


Tu veux en savoir plus, voici la liste complète des différents évènements.


Bonus

Inspecteur

Je te conseille d'utiliser l'inspecteur Chrome ou Firebug si tu es sur Firefox pour vérifier s'il y a des erreurs dans ton code et pour écrire directement du code dans ton navigateur.


console.log()

A l'aide de la fonction console.log(), on peut afficher des informations dans la console (firebug ou inspecteur de Chrome). Elle facilite la compréhension de son code surtout quand il y a des erreurs.

$('un_id').click(function(){
  // j'affiche la hauteur pour savoir si cela s'affiche avec ou sans "px" à la fin
  console.log( $(this).height() );
  if( $(this).height() == "40px" ) {
    $(this).css('height', '70px');
  }
});

La documentation

Pour maîtriser un minimum jQuery, il n'y a pas 3600 solutions. Il est nécessaire de prendre le temps de lire la documentation. Pour commencer, prend 10min pour faire le tour, et n'hésite pas à me poser des questions. Si tu as du mal avec l'anglais, utilise Google Translate. Voici quelques fonctions essentielles pour un webdesigner :


Parcourir le DOM

Un document HTML ressemble un peu à un arbre généalogique. La balise <html> serait l'Adam, l'ancêtre de tous les éléments. Il y a des mères, des filles et des frères et coeurs, petit exemple :

<ul id="menu">
  <li>
    <a href="#">Titre</a>
    <p>Contenu</p>
  </li>
</ul>
  1. <li> est l'enfant du <ul>
  2. <li> est la mère de <a> et <p>
  3. <a> est le frère de <p>

En jQuery, il existe plusieurs fonctions qui nous permettent de passer d'un élément à un autre, et pour ce faire, il est important de considérer cet arbre généaligique. Voici quelques unes :

  1. next() : permet de passer au frère suivant. Si on fait $('a').next(), on attrape le <p>
  2. parent() : permet d'attraper la maman. Si on fait $('li').parent(), on attrape <li>
  3. find() : un peu plus compliqué, find() permet d'attraper un enfant, petit enfant, ou encore un arrière petit enfant mais en mettant en paramêtre l'élément que l'on souhaite attraper. Si on fait $('li').find('a'), on attrape les <a> contenu dans un <li>