Le principe
jQuery est une librairie(ou bibliothèque) Javascript libre qui fait interagir javascript et HTML.
L'intérêt est de simplifier les commandes les plus utilisées.
Elle fournit ainsi des effets classiques « clef en main » et assure la compatibilité inter-navigateurs.
Sortie en 2006, elle est depuis utilisée sur de nombreux sites comme Google, Mozilla, Amazon, etc.

jQuery permet notamment de
» parcourir et de modifier le DOM*,
» d'attribuer des actions à des évènements,
» d'implémenter des effets visuels / animations,
» de manipuler le CSS, d'implémenter Ajax facilement, etc.

Comme le slogan l'indique, JQUERY permet finalement de faire plus en codant moins.

* Document Object Model : ou modèle objet de document, est une API pour les documents HTML et XML.
Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée, en termes de style et de contenu.
Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes.
Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation(jquery).

On distingue l'objet jQuery et la fonction jQuery, nous nous interesserons à la fonction uniquement, elle nous servira à manipuler le DOM, c'est à dire l'arborescence HTML du document.
On pourra par exemple, changer le style de certains éléments, leurs dimensions, gérer des évenements, produire des effets de translation...

La fonction incontournable de cette bibliothèque est la fonction $.
Il faut préciser dans $() un sélecteur avec une syntaxe adaptée qui reprend celle des CSS.
$() permet de sélectionner efficacement un élément ou un ensemble d'éléments du DOM.
L'opérateur $() renvoie un objet jQuery auquel on peut ensuite envoyer des méthodes JQuery.
Vous trouverez une liste détaillée de toutes les propriétés et méthodes définies par cette bibliothèque sur le site officiel de jQuery
Nous allons voir les bases permettant de saisir le principe de fonctionnement de la bibliothèque jQuery à travers des exemples précis.

Utilisation : Chargement de la bibliothèque

La première étape est de télécharger jQuery sur le site officiel, pour être certain d'avoir la dernière version. Vous y trouverez sur la droite un bloc où sont disponibles deux compressions possibles :

Production : le code est compressé au maximum et optimisé pour l'utilisation en production (Lien direct de téléchargement : http://code.jquery.com/jquery.min.js)

Développement : le code n'est pas compressé et est prévu pour être lu et/ou pour développer avec pour contribuer au projet notamment (Lien direct de téléchargement : http://code.jquery.com/jquery.js)

Choisissez la version « Production », car nous n'allons pas toucher au fichier, simplement l'utiliser.

Copiez le fichier vers votre projet. Je vous suggère l'adresse "/js/libs/jquery.min.js" pour une organisation optimale de vos scripts.
En effet, si vous utilisez plusieurs bibliothèques (library en anglais, d'où « libs ») vous pourrez les séparer de vos propres scripts en les rangeant dans un dossier distinct.

Il suffit ensuite de l'incorporer à l'aide d'un élément script dans votre document HTML :

Pour des questions de performance, Google Code et Yahoo Developer Network recommandent de placer les appels aux librairies en fin de page avant </body>

Le script doit être présent sur le serveur afin de limiter les risques, mais il est possible de faire appel à l'API de Google en allant chercher le fichier sur les serveurs de Google à l'adresse //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js, afin :
- d'alléger la bande passante de votre site; en faisant référence à un fichier externe à votre site

- d'accélérer le chargement des pages; le fichier jquery.min.js issu du serveur google est bien souvent déjà présent dans la mémoire cache du navigateur.

les serveurs de Google soient indisponibles ou qu'ils changent leur API : il faut prévoir une solution de secours. Nous alors donc nous resservir de notre fichier en local avec une petite touche de JavaScript. Nous obtenons alors quelque chose comme cela :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titre</title>
    </head>
    <body>
        <p>
            Un paragraphe ici
        </p>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="/js/libs/jquery.min.js"><\/script>')</script>
    </body>

La ligne de JavaScript signifie que s'il n'y a pas jQuery, c'est que l'import juste au dessus n'a pas fonctionné. Nous ajoutons donc à la page, via JavaScript, un import de jQuery depuis notre fichier local. Ainsi, nous profitons de la bande passante de Google et du cache du navigateur tout en étant certains de la disponibilité de jQuery.

Par contre, en phase de développement, c'est-à-dire lorsque vous mettez au point votre code jQuery sur votre ordinateur local, il est conseillé de télécharger le fichier jquery.js et d'y faire référence localement, l'utilisation de ce fichier local sera bien plus rapide et vous pourrez travailler sans connexion web.

Bien entendu il vous faudra placer votre propre fichier JQuery ou vos déclarations à la suite de l'appel de la librairie.
Pour ceci vous avez deux possibilités :
- Placer une fonction directement dans le code de la page à l'aide de la balise <script> mais sans fichier externe (sans attribut src).
Le seul avantage de cette méthode est de supprimer une requête HTTP, mais cela ajoute du contenu à votre code HTML qui ne sera que rarement mis en cache.

- Placer vos instructions dans un fichier externe (*.js), plus facile à maintenir et à inclure sur un groupe de pages de votre site, avec le petit inconvénient d'effectuer une requête HTTP en plus.

Nous Utiliserons la deuxième solution pour placer notre script jQuery dans "mon_script.js".

Lancement au chargement de la page
Dans la majorité des cas, nous souhaiterons exécuter le code après chargement de la page, lorsque l'on est sûr que l'intégralité du DOM a été chargée.
jQuery offre une méthode souple pour lancer un script grâce à la fonction ready() appliquée à l'objet document. C'est-à-dire lorsque les objets de la page seront prêts à être manipulés par JavaScript.

            
            $(document).ready(function() {
            // Votre code ici
            });

Il suffit de placer cette ligne de code entre les balises <script> et </script> après bien sur l'appel de la bibliothèque jQuery dans votre document HTML.

Exemple:
On va masquer un élément <div id="masque">, puis de le révéler au clic sur un lien <a id="afficher">Afficher l'élément</a>.

$(document).ready(function() {

  // Dès le chargement on masque l'élément portant l'id #masque
  // grâce à la fonction hide() de jQuery
  $("#masque").hide();
  
  // On déclare un gestionnaire d'événement 'click' sur un lien
  // pour afficher l'élément précédemment masqué
  $("a#afficher").click(function() {
  
  // La fonction click() appliquée à notre sélecteur $("a#afficher")
  // prend en argument une fonction anonyme (sans nom) contenant
  // le reste des instructions :
  
  $("#masque").show("fast");
  
  // L'argument "fast" est facultatif mais nous permet
  // d'afficher l'élément avec une petite animation
  
  return false;
  
  // On retourne 'false' pour prévenir l'exécution du lien
  // c'est à dire pour éviter au navigateur de changer de
  // page en suivant son attribut href
  
  });
  
  // Faites bien attention à la syntaxe et à l'imbrication des
  // parenthèses et accolades

});

Oui mais concrètement !!

Afficher l'élément masqué

Un bon moyen de débuter avec jQuery est d’utiliser l’un des nombreux plugins mis à disposition par la communauté.
Il en existe de toutes sortes.

Où trouver un plugin ?

Le site officiel
Le site officiel a été victime de la maladresse d’un employé qui a malheureusement, supprimé purement et simplement toutes les données…

Le site UI
UI signifie « User Interface ».
Cette variante de la libraire jQuery dépend de la librairie de base, comme tout autre plugin, elle contient quelques plugins bien utiles pour rendre votre site interactif pour vos utilisateurs.

Un annuaire de plugins
« The jQuery List » : une interface ergonomique et un classement d'un grand nombre de plugins.

Sur le Web
il suffit de chercher le type de plugins souhaités (slider / accordéon...)
Certains plugins très connus ont leur propre site dédié.

Utiliser un plugin: les 3 fichiers nécessaires

Outre le fichier principal où se trouve le code HTML sur lequel agira le plugin, 3 fichiers sont nécessaires pour utiliser proprement un plugin jQuery :

(1) Un fichier JavaScript contenant la librairie jQuery
(2) Un fichier JavaScript contenant le plugin
(3) Un fichier JavaScript contenant l’appel au plugin

Personnalisez votre plugin
Consultez la documentation de votre plugin pour connaître les différentes options de configurations possibles.

Débugger jQuery
Firebug vous sera d’un grand secours en cas de problème. L’onglet « Console » vous donne les erreurs : n’oubliez pas de les lire !

Sélecteurs de base

La fonction $ permet de sélectionner directement des éléments à l'aide de la syntaxe CSS :
$("#section_01") sélectionne la balise avec l'identifiant section_01
En javascript pur : document.getElementById("section_01")
$("p") sélectionne toutes les balises p.
$(".classTruc") sélectionne toutes les balises avec la class "classTruc".
Il est possible d'indiquer plusieurs sélecteurs : $(".truc, div, #machin") sélectionne tous les éléments de classe truc, tous les éléments div et l'élément d'identifiant machin.

$('.menu > div') sélectionne les éléments div directement enfant de .menu
$('.menu div') sélectionne les éléments div enfant de .menu
$('.menu + div') sélectionne les éléments div qui suivent .menu

Filtrage : Pseudos classes

Filtres sur l'arborescence
:first sélectionne le premier élément d'une collection, :last le dernier. Par exemple, $(".truc:last") sélectionne le dernier élément de classe truc dans le document.

:first-child sélectionne les éléments qui sont le premier enfant d'un parent et :last-child le dernier enfant.
Par ex : li:first-child sélectionne les premiers li de leurs parents , donc le premier li de chaque liste.

:even sélectionne les éléments dont l'indice est pair et :odd les éléments dont l'indice est impair.
Par ex: li:even séléectionne tous les éléments li dont l'indice est pair.

:not(selecteur) permet de retirer de la sélection tous les éléments spécifiés.
Par exemple, $(".truc:not(.machin)") sélectionne tous les éléments de classe truc ne possédant pas la classe machin.

:header sélectionne tous les titres (h1, h2, etc.)

Filtres de contenu :
:contains(texte) sélectionne tous les éléments contenant un texte donné. Par exemple $("p:contains('test')") cible tous les paragraphes contenant le texte "test".

:has(sélecteur) sélectionne les éléments contenant au moins un élément sélectionné par sélecteur. Par exemple, $("li:has(ul)") sélectionne les éléments d'item de liste (li) contenant au moins une liste.

:empty sélectionne les éléments vides.

Filtres de visibilité :
:visible sélectionne les éléments qui sont visibles
:hidden sélectionne les éléments qui ont été cachés (voir ci-après)

Filtres d'attributs :
[attribut] sélectionne les éléments possédant l'attribut attribut. Par exemple, $("img[title]") sélectionne les éléments img possédant un attribut title.
[attribut=valeur] sélectionne les éléments possédant un attribut attribut valant valeur. Par exemple, $("img[title='titre']") sélectionne les images dont le title est égal à titre.
p[name^="to"] (tous les p ayant un attribut name commençant par "to")
p[name$="to"] (tous les p ayant un attribut name finissant par "to")

Filtres de formulaires :
:input sélectionne tous les éléments de formulaires : <input>, <select>, <textarea> et <button>.

:text sélectionne tous les éléments <input type="text">

:password sélectionne tous les éléments <input type="password">
...

Parcourir les éléments du DOM

Le Document Object Model, beaucoup plus couramment appelé DOM, permet littéralement de naviguer entre les éléments HTML. Il s'agit d'une interface de programmation, utilisée exclusivement pour les documents XML et HTML, qui se base sur la structure. C'est grâce à ce concept qu'il est possible d'agir sur une page web avec JavaScript, et plus précisément ses fonctions ; sans cela, nous ne pourrions pas désigner les éléments !

Positionnement des éléments : Parents, enfants et ancêtres
parent() va nous permettre d'accéder au bloc parent de l'élément actuellement ciblé.
Lorsque nous agirons sur notre objet jQuery, ce ne sera donc plus ce dernier qui sera influencé, mais bien le bloc parent qui l'entoure.

$('a').css('color', 'blue'); // rend le lien ciblé seulement de couleur bleue
$('a').parent().css('color', 'blue');
// ici, c'est le parent de l'enfant (un paragraphe, si l'on respecte la sémantique) qui verra son texte devenir bleu

Il est possible de préciser la requête, en sélectionnant la classe, l'identifiant et le type de l'élément à récupérer en tant qu'argument :

$('a').parent('.texte'); // retourne seulement l'ensemble des blocs parents ayant la classe .texte

Inversement, la fonction children() permet de cibler l'élément enfant descendant directement de l'élément sélectionné. Cette méthode équivaut donc au sélecteur >, mais permet, comme la fonction parent(), de préciser la recherche avec un argument.

$('div').children(); // cible l'élément enfant direct du bloc div
$('div').children('p'); // cible seulement l'ensemble des paragraphes enfants du bloc div

La fonction find() va se charger de trouver tous les enfants d'un élément, quelle que soit leur position par rapport à ce dernier ! Il suffit alors de donner le type d'élément à trouver, et find() se charge du reste :

$('body').find('p'); // cible l'ensemble des paragraphes contenus dans le corps du document, quelle que soit leur position !

La dernière méthode usant de ce principe de descendance est parents().
Légèrement différente de la fonction parent(), cette dernière retourne tous les parents d'un élément en même temps.
On ne parle plus de parents, mais d'ancêtres.

$('a').parents(); // cible tous les éléments ancêtres du lien : paragraphe, bloc(s), balise <body>...

La fraternité d'éléments Après le père et le grand-père, nous demandons le frère ! :lol: Eh oui, comme pour les méthodes développées précédemment, nous sommes dans l'obligation d'étudier les fonctions ciblant les élément frères de la sélection. Le frère d'un élément, c'est tout simplement la balise présente directement à côté de celui-ci. Image utilisateur Il y a quatre façons de faire appel à ce concept :

prev(), qui sélectionne l'élément frère précédant directement l'objet ciblé ;

next(), qui sélectionne l'élément frère suivant directement l'objet ciblé ;

prevAll(), qui sélectionne tous les éléments frères précédant l'objet ciblé ;

nextAll(), qui sélectionne tous les éléments frères suivant l'objet ciblé.

gestionnaire d'événement

Un gestionnaire d'événement est une fonction destinée à être lancée en réponse à une action de l'utilisateur (par exemple un clic de souris sur un élément donné.
Définir un gestionnaire d'événement :

$('p').click(function(){
  alert("Ceci est un paragraphe");
}) ;

click est lancé quand l'élément est cliqué.
mouseover est lancé quand la souris survole l'élément.
Il est associé à mouseleave, qui est son pendant quand la souris quitte l'élément.

Liste des évènements les plus utiles:

blur	Lorsque l'on perd le focus
change	Changement de valeur
click	Click de la souris
dblclick	Double click
focus	Lorsque l'on focalise un élément
hover	Survol de la souris
keydown	Pression sur une touche
keyup	Lorsqu'on relache la pression d'une touche
mousedown	Lorsque l'on presse sur un bouton de la souris
mouseup	Lorsque l'on relache la pression du click
ready	Lorsque la page est chargée entièrement
resize	Lorsque l'on modifie la taille du navigateur
scroll	Scroll de l'élement
submit	Envoi du formulaire

Nouvelle syntaxe du gestionnaire d'évènements : Avec l'ajax de plus en plus présents dans les projets web, il est nécessaire de gérer les évenements à la volée.
.on est un écouteur constant alors que .click ne peut s'appliquer qu'aux éléments du DOM présents au chargement de la page.

$('p.blabla').on('click', function() { 
	alert("Ceci est un paragraphe");
});

Tout comme avec le CSS3, jQuery permet de produire des effets visuels dans un document HTML.
On modifie le style initial d'un élément.
Toutes les propriétés CSS numériques peuvent donc être modifiées dans un laps de temps déterminé (opacité, translation).
JQuery propose quelques effets standards et un ensemble d'outils permettant de créer ses propres effets visuels.

Ces effets standards manipulent les propriétés "height" et "opacity" séparémént ou simultanément.

Apparition, disparition

Manipulation de la hauteur et de l'opacité :
show() et hide() permettent respectivement de montrer et cacher des éléments.
Par exemple, $("p").hide() cache tous les paragraphes du document.

show(vitesse) et hide(vitesse) permettent respectivement de montrer et cacher des éléments avec une certaine vitesse.
Cette vitesse est indiquée par des mots-clefs ("slow", "normal" ou "fast") ou le nombre de millisecondes que doit durer l'animation.
$(".content p").show(3000);

toggle() et toggle(vitesse) permettent de basculer d'un mode d'affichage à un autre (un élément caché devient visible, ou un élément visible devient caché).

$(".content p").toggle(3000);

Manipulation de la hauteur :
slideDown() et slideUp() permettent de faire apparaître et disparaître un élément à la manière d'un store se déroulant ou s'enroulant.
$(".content p").slideUp(2000);

slideToggle() permet de basculer d'un mode d'affichage à un autre.
$(".content p").slideToggle(1000);

Manipulation de l'opacité :
fadeIn(vitesse), fadeOut(vitesse) et fadeTo(vitesse, opacity) permettent de faire progressivement apparaître (ou disparaître) un élément en jouant sur sa transparence.
$(".content p").fadeIn(1000);

Enchaînements d'effets standards

Jquery gère une file d'attente des effets pour chacun des éléments HTML. Ce qui veut dire que les effets seront gérés dans l'ordre de déclaration, les uns après les autres et non simultanément pour un élément HTML.
$(".content p").slideUp(2000).fadeIn(1000);

Effets personnalisés avec "animate"

.animate{(paramètres)} permet de contrôler une animation, via les propriétés CSS autres que "height" et "opacity"(ne fonctionne que pour des valeurs numériques).
$(".logo").animate({left : "50px", top : "+=10px"},3000);
On peut définir numériquement la nouvelle valeur de la position du logo ou l'incrémenter relativement à sa position initiale.

easing indique la façon de progresser dans l'effet.
delay() diffère l'exécution d'un effet.
stop() arrête l'animation en cours sur le document.

Effets personnalisés avec "css"

.css{(paramètres)} permet de changer le style d'une balise, via les propriétés CSS.
$(".content p").css({"background-color" : "yellow"});