• Une bibliothèque javascript open-source et cross-browser
• Elle permet de traverser et manipuler très facilement l’arbre DOM des pages web à l’aide d’une syntaxe fortement similaire à celle d’XPath.
• JQuery permet par exemple de changer/ajouter une classe CSS, créer des animations, modifier des attributs, etc.
• Gérer les événements javascript
• Faire des requêtes AJAX simplement

Utiliser jQuery va donc pouvoir être très avantageux pour nous à deux niveaux différents : on va d’une part gagner beaucoup de temps de développement en utilisant les outils mis à notre disposition par cette librairie et d’autre part être assuré de la validité de notre code. En effet, les créateurs de jQuery s’occupent de la validité parfaite de leur code pour l’ensemble des navigateurs les plus utilisés. En utilisant jQuery, nous n’avons donc plus à nous soucier de la compatibilité inter-navigateurs et interversions de notre code puisque les créateurs de jQuery ont déjà réfléchi à ce problème à notre place.

jQuery ne doit pas être vu comme une alternative au JavaScript mais plutôt comme un ajout : nous allons utiliser jQuery au côté du JavaScript classique dans nos scripts. Par ailleurs, jQuery ne dispense pas et ne doit pas remplacer l’apprentissage du JavaScript ni être vu comme un « raccourci » pour apprendre le JavaScript.

Télécharger et inclure jQuery

jQuery est une librairie JavaScript, c’est-à-dire un ensemble de code prêts à l’emploi. Pour pouvoir utiliser ces codes, il va falloir les inclure d’une façon ou d’une autre dans nos pages. La première manière de faire cela va être d’aller sur le site officiel de jQuery et de télécharger la dernière version jQuery disponible en date. Sur la page de téléchargement, deux types de fichiers vont vous être proposés : des fichiers compressés et des fichiers non compressés.

La copie de jQuery compressée ne contient aucun espace entre les codes. Le but est de réduire le poids total de la librairie afin d’améliorer les performances de votre site. C’est la version que nous placerons généralement sur notre site « live » (en production).

• Disponible sur le site de Jquery

http://jquery.com/

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

• Ou directement sur Google code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

</script>

La syntaxe de base est: $ ( sélecteur ). action ()

• Un signe $ pour définir / accéder à jQuery
• Un ( sélecteur ) pour “interroger (ou rechercher)” des éléments HTML
• Une action jQuery () à effectuer sur le ou les éléments

Exemples:

$(this).hide() – masque l’élément courant.

$("p").hide() – masque tous les éléments <p>.

$(".test").hide() – masque tous les éléments avec class = “test”.

$("#test").hide() – masque l’élément avec id = “test”.

On va notamment pouvoir sélectionner des éléments input en fonction de la valeur de leur attribut type grâce aux pseudo-sélecteurs jQuery :text, :password, :checkbox, :radio, :submit, :file, :image, :button et :reset.

jQuery nous permet également de sélectionner certains éléments de formulaire en fonction de leur état. Pour cela, on utilisera les pseudo-sélecteurs :

• :input pour cibler tous les éléments input, textarea, select et button ;
• :checked pour cibler les éléments cochés ou sélectionnés pour des input type="checkbox", input type="radio" et des éléments de liste select ;
• :selected pour cibler les éléments option sélectionnés dans une liste select ;
• :disabled pour cibler les éléments input qui possèdent un attribut disabled ;
• :enabled pour cibler tous les éléments qui ne possèdent pas d’attribut disabled.

Le sélecteur d’élément jQuery sélectionne les éléments en fonction du nom de l’élément. Vous pouvez sélectionner tous les <p>éléments sur une page comme celle-ci: $(“p”)

Les ID (#id)

Le sélecteur jQuery utilise l’attribut id d’une balise HTML pour trouver l’élément spécifique#id. Un identifiant doit être unique dans une page, vous devez donc utiliser le sélecteur #id lorsque vous souhaitez rechercher un élément unique et unique. Pour trouver un élément avec un identifiant spécifique, écrivez un caractère de hachage, suivi de l’identifiant de l’élément HTML:

$ (document) .ready ()

La $(document).ready()méthode nous permet d’exécuter une fonction lorsque le document est complètement chargé.

click()

La click()méthode attache une fonction de gestionnaire d’événements à un élément HTML. La fonction est exécutée lorsque l’utilisateur clique sur l’élément HTML. L’exemple suivant indique: Lorsqu’un événement de clic se déclenche sur un élément <p>; masquer l’élément <p> courant :

$("p").click(function(){
  $(this).hide();
});

jQuery nous permet également de sélectionner certains éléments de formulaire en fonction de leur état. Pour cela, on utilisera les pseudo-sélecteurs :

• :input pour cibler tous les éléments input, textarea, select et button ;
• :checked pour cibler les éléments cochés ou sélectionnés pour des input type="checkbox", input type="radio" et des éléments de liste select ;
• :selected pour cibler les éléments option sélectionnés dans une liste select ;
• :disabled pour cibler les éléments input qui possèdent un attribut disabled ;
• :enabled pour cibler tous les éléments qui ne possèdent pas d’attribut disabled.

Enfin, jQuery nous fournit également quelques méthodes qui vont nous permettre d’affiner nos sélections. On peut notamment ici citer les méthodes has(), filter(), not(), first(), last() et eq().

Créer des effets de fondu en jQuery

Un “fondu” est une disparition ou apparition progressive d’un élément. C’est donc un effet de transition d’un état à un autre. jQuery nous fournit quatre méthodes pour créer des effets de fondu :

• La méthode fadeOut() ;
• La méthode fadeIn() ;
• La méthode fadeTo() ;
• La méthode fadeToggle().

Ces méthodes vont en fait jouer sur la valeur de la propriété opacity de l’élément ciblé, en faisant passer cette valeur progressivement de 1 à 0 (totalement opaque à totalement transparent) ou inversement. Dès que l’opacité atteint 0, un display: none est appliqué à l’élément pour le faire disparaitre totalement de la page.

Créer des effets de slide en jQuery

jQuery nous fournit également des méthodes qui vont nous permettre de créer des effets de slide. Par “slide”, on entend ici le fait qu’un élément se déplie ou se replie progressivement. Cet effet va être intéressant dans la création d’un menu déroulant par exemple. Pour créer ce genre d’effet, nous allons pouvoir choisir parmi trois méthodes :

• La méthode slideDown() ;
• La méthode slideUp() ;
• La méthode slideToggle().

Afficher ou cacher un contenu instantanément avec show() et hide()

Les méthodes show() et hide() vont respectivement nous permettre d’afficher un contenu HTML caché ou de cacher un contenu HTML visible. On va déjà pouvoir utiliser les méthodes show() et hide() sans argument, pour afficher ou cacher un élément instantanément très simplement. Dans cette première utilisation qui est la plus basique les deux méthodes show() et hide() vont se contenter de jouer sur l’état de la propriété CSS display de l’élément HTML ciblé.

jQuery fournit ici un support Ajax censé harmoniser ces différences et faire en sorte que nos requêtes s’exécutent de la même manière avec tous les navigateurs. jQuery met notamment à notre disposition une méthode globale $.ajax() et des méthodes comme $.get(),  $.getScript(), $.getJSON() ou $.post() pour effectuer nos différentes opérations.

Méthodes d’envoi et format de données

Les deux méthodes les plus courantes pour envoyer une demande à un serveur sont GET et POST. On utilisera GET pour effectuer des opérations non destructives, c’est-à-dire pour des requêtes où on se contente de récupérer des données du serveur sans les modifier. A l’inverse, on utilisera POST pour effectuer des opérations destructives, c’est-à-dire pour des requêtes dont le but est de modifier des données stockées sur le serveur. Lorsqu’on envoie une requête, il faut généralement préciser dans quel format on souhaite recevoir la réponse du serveur. On va pouvoir faire notre choix parmi les formats suivants :

• text = permet de transporter des chaines de caractères ;
• html = permet de transporter des blocs de code HTML qui vont être placés dans la page ;
• script = permet d’ajouter des scripts à la page ;
• json = permet de transporter des données au format JSON (des chaines, des tableaux ou des objets) ;
• jsonp = permet de transporter des données au format JSON provenant d’un autre domaine ;
• xml = permet de transporter des données au format XML.

On utilisera généralement du JSON (JavaScript Object Notation) car c’est le format le plus flexible. Le JSON est particulièrement utile lorsqu’on souhaite envoyer du HTML et d’autres données en même temps.

La sérialisation des données des formulaires

En informatique, la sérialisation se définit comme un processus de transformation de structures de données dans un format pouvant être stocké ou transmis et reconstruit ultérieurement.

jQuery met deux méthodes à notre disposition pour sérialiser les données de formulaire : les méthodes serialize() et serializeArray(). Ces méthodes vont nous permettre de modifier le format des données de formulaire avant leur envoi.

La méthode serialize() sérialise les données d’un formulaire en les changeant en une chaîne de requête. Pour que la valeur de l’élément soit sérialisée, il doit avoir un attribut name. Notez également que les valeurs des input type="checkbox" et input type="radio" ne sont incluses que si elles sont cochées.