I► jQuery est une formidable bibliothèque JavaScript développée initialement par John Resig sous licence GPL et MIT. Cette bibliothèque permet donc de ne pas tout reprogrammer, beaucoup de méthodes sont déjà disponibles lorsqu’on utilise ce Framework .

jQuery permet entres autres :

de parcourir et modifier le DOM (Document Object Model)
de manipuler les styles CSS (Cascading Style Sheets)
gérer les événements et les animations
échanger des données avec les serveurs Web en utilisant AJAX

jQuery est disponible sur le site officiel http://jquery.com/ . On peut y télécharger la version compressée (ultra légère), la version non compressée (production et développement pour y contribuer).

On peut donc la télécharger et l’installer en local sur son serveur. Pour appeler cette bibliothèque, on l’inclura dans l’entête de la page HTML.
Une autre solution consiste à utiliser les versions hébergées chez Google : https://developers.google.com/speed/libraries/devguide#jquery

L’avantage est que l’on bénéficiera des toutes dernières nouveautés et qui plus est, le temps de chargement chez le client (l’internaute) sera nettement amélioré puisque la bibliothèque aura de fortes chances d’avoir déjà été téléchargée par d’autres sites consultés par le client !

jQuery possède des méthodes pour parcourir les éléments du DOM :

dans le sens descendant : find(), children()
dans le sens remontant : parent(), closest()
de même niveau : next(), prev(), siblings()
des outils de manipulation : filter(), not(), add()

jQuery possède des méthodes pour modifier les éléments du DOM :

dans le sens descendant : append(), prepend(), appendTo(), prependTo(), html()
dans le sens remontant : wrap(), unWrap(), wrapInner()
de même niveau : after(), before(), insertAfter(), insertBefore()
des outils de manipulation : remove(), empty(), detach(), replaceWith()

Il est donc nécessaire que ce DOM soit bien chargé avant d’envoyer nos requêtes au document, d’ou l’encapsulation de tous les scripts dans un évènement chargé :

Voici un premier exemple :
$ est un alias de l’appel de la classe jQuery . Cela revient à instancier un objet jQuery, dont le constructeur sert principalement de sélecteur pour cibler les éléments du DOM
$(‘#bouton’) est par exemple un sélecteur qui permet de cibler l’élément associé à l’ID bouton
On aurait pu écrire jQuery(‘#bouton’)

$(document).ready(function() { ou son alias $(function) { permet d’exécuter les scripts uniquement lorsque le DOM en entier est chargé par le navigateur.

Le code est ainsi encapsulé dans une fonction anonyme liée à l’évènement jQuery(document).ready !

Ce qui donne :

Chapitre I : Les sélecteurs JQuery :

Voici une liste des principaux sélecteurs

Michel BOCCIOLESI