Présentation
jQuery est une bibliothèque qui permet d'agir sur le code HTML, CSS, JavaScript et AJAX en utilisant des instructions simples. La devise de jQuery est « Write less, do more ». Sachez qu'une seule instruction jQuery peut remplacer plusieurs dizaines d'instructions JavaScript !
Installation
jQuery est une bibliothèque JavaScript. Il s'agit d'un simple fichier .js à intégrer dans un document HTML.
- script local : <script src="jquery.js"></script>
- CDN : jquery ou Google
- Bower
Préférez la version minifiée (jquery.min.js) et indiquez la version dans le nom de fichier (jquery-1.9.2.min.js).
Insérez l'appel à jQuery en fin de document avant le </body>.
Insérez l'appel à jQuery en fin de document avant le </body>.
Mise en route
Le jargon de jQuery cumule HTML, CSS3 et JavaScript. Une connaissance de ces trois langages est indispensable.
L'ensemble de la librairie se base sur une fonction.... dont le nom est jQuery() ou son alias $(). L'alias réduit légèrement l'écriture.
jQuery est résolument orienté objet. $() retourne un objet JavaScript qui dispose de méthodes et de propriétés.
Syntaxe courante : $(sélecteur).méthode(paramètres);Attendre la disponibilité du DOM : $(function() { // Ici, le DOM est entièrement défini }); ou $(document).ready(function() { // Ici, le DOM est entièrement défini });
L'ensemble de la librairie se base sur une fonction.... dont le nom est jQuery() ou son alias $(). L'alias réduit légèrement l'écriture.
jQuery est résolument orienté objet. $() retourne un objet JavaScript qui dispose de méthodes et de propriétés.
Syntaxe courante : $(sélecteur).méthode(paramètres);Attendre la disponibilité du DOM : $(function() { // Ici, le DOM est entièrement défini }); ou $(document).ready(function() { // Ici, le DOM est entièrement défini });
Le langage jQuery est utilisé pour manipuler (en lecture et en écriture) le DOM, c'est-à-dire l'arborescence du document. Imaginez que ces manipulations commencent alors que l'arbre n'a pas encore été entièrement obtenu. Cette situation erratique pourrait désorganiser l'affichage, produire des erreurs, voire même… bloquer le navigateur !
Si vous avez fait référence à une feuille de styles entre les balises
Si vous avez fait référence à une feuille de styles entre les balises
<head> et </head>, l'instruction $(function() { s'assure également que la feuille de styles est chargée. Vous pouvez donc l'interroger et la manipuler comme bon vous semble.Sélecteurs en jQuery
Sélectionnez, modifiez et obtenez la valeur de la plupart des éléments qui peuvent être rencontrés dans un document HTML.
Une des grandes forces de jQuery est d’intégrer la syntaxe des sélecteurs CSS. Par cet intermédiaire, il est élémentaire de sélectionner les nœuds DOM qui nous intéressent, en utilisant la syntaxe
Comme en CSS, on peut utiliser les sélecteurs complexes : $("header nav>ul") ou encore $('img[src="produits/"].
Le résulat retourné par la fonction jQuery est un objet qui dispose de la propriété "length" égale au nombre d'éléments sélectionnés dans le DOM.
Outre les sélecteurs CSS, il existe des sélecteurs propres à jQuery.
Une des grandes forces de jQuery est d’intégrer la syntaxe des sélecteurs CSS. Par cet intermédiaire, il est élémentaire de sélectionner les nœuds DOM qui nous intéressent, en utilisant la syntaxe
$(sélection)où sélection représente un sélecteur CSS. $("header"), $("#sidebar"), $(.active")......Comme en CSS, on peut utiliser les sélecteurs complexes : $("header nav>ul") ou encore $('img[src="produits/"].
Le résulat retourné par la fonction jQuery est un objet qui dispose de la propriété "length" égale au nombre d'éléments sélectionnés dans le DOM.
Outre les sélecteurs CSS, il existe des sélecteurs propres à jQuery.
Appel d'une méthode jQuery
Comme dit plus haut, quand on appelle la fonction $() pour cibler un élément, elle nous retourne un objet JavaScript. Cet objet dispose de méthode qu'on appelle logiquement via son nom.
Ainsi : $("html").action(); appliquera la méthode "action" à notre élément <html>. Pour écrire un texte dans le footer de la page : $("#footer").html("Cepegra 2015"); La méthode "html()" permet de modifier le contenu d'un élément html.Il existe de nombreuses méthodes de type "setters" (permettant de modifier ou injecter des valeurs) ou "getters" (permettant de récupérer une valeur).jQuery permet de chaîner les méthodes....
Le résultat d'une méthode est également un objet.... dont je peut appeler une méthode, et ainsi de suite.
$(".rouge").css("background","red").show(); permet de sélectionner les éléments de classe "rouge" pour leur appliquer la méthode "css" et ensuite la méthode "show".
Ainsi : $("html").action(); appliquera la méthode "action" à notre élément <html>. Pour écrire un texte dans le footer de la page : $("#footer").html("Cepegra 2015"); La méthode "html()" permet de modifier le contenu d'un élément html.Il existe de nombreuses méthodes de type "setters" (permettant de modifier ou injecter des valeurs) ou "getters" (permettant de récupérer une valeur).jQuery permet de chaîner les méthodes....
Le résultat d'une méthode est également un objet.... dont je peut appeler une méthode, et ainsi de suite.
$(".rouge").css("background","red").show(); permet de sélectionner les éléments de classe "rouge" pour leur appliquer la méthode "css" et ensuite la méthode "show".
Sélecteurs avancés
- $(['nom*="valeur"']) -> attribut nom contenant la valeur (partiellement ou totalement)
- $(['nom~="valeur"']) -> attribut nom contenant la valeur délimité par des espaces
- $(['nom*="valeur"']) -> attribut nom qui se termine par la valeur
- $(['nom!="valeur"']) -> attribut nom qui ne possède pas l'attribut "nom" ou qui le possède mais avec une valeur différente
- $(['nom^="valeur"']) -> attribut nom qui comence par la valeur
Et encore....
et pour affiner, il y a les pseudo-sélecteurs d'éléments :
Ainsi $('aside :header:not(h1)').hide(); tous les niveaux de titre dans le <aside> sont masquées à l'exception des <h1>.
En ce qui concerne les formulaires :
Ainsi :
- $(':focus').css('background','yellow'); //met une couleur jaune à un élément qui a le focus.
- $('tr:last').css('color','red'); //met en rouge le texte de la dernière ligne d'un <table>
Conversions js <-> jQuery
Pour utiliser les riches méthodes de jQuery... il faut un élément jQuery. Imaginons un élément récupéré en JS que je souhaite masquer lentement.
monDiv = document querySelector("div"); //récupère un <div> en objet JS ;
et bien $(monDiv).hidde("slow); transforme l'objet JS en objet jQuery auquel je peux appliquer une méthode jQuery.
Inversément, je peux concertir un objet jQuery en objet JS :
var spans - $('span').get(); // retourne un array JS contenant les <span>.
monDiv = document querySelector("div"); //récupère un <div> en objet JS ;
et bien $(monDiv).hidde("slow); transforme l'objet JS en objet jQuery auquel je peux appliquer une méthode jQuery.
Inversément, je peux concertir un objet jQuery en objet JS :
var spans - $('span').get(); // retourne un array JS contenant les <span>.
Les Callbacks (fonctions de rappel)
Un callback est une fonction exécutée quand une autre fonction a terminé son exécution. Ainsi si je lance une animation je souhaiterai attendre sa fin avant de démarrer autre chose.
Souvent ça passe par une fonction anonyme mise à l'intérieure de la méthode appelée initialement.
Par exemple : Pour effacer les éléments rouges lentement PUIS afficher lentement les verts
$(".rouge").fadeOut("slow",function(){
$(".vert").fadeIn("slow");
});
Attention qu'on peut appeler une fonction standard comme ceci :
$("h1").on("click",myBox);
function myBox() { alert('Vous avez cliqué"); } // déclenche une alert au clic sur un <h1>.
Souvent ça passe par une fonction anonyme mise à l'intérieure de la méthode appelée initialement.
Par exemple : Pour effacer les éléments rouges lentement PUIS afficher lentement les verts
$(".rouge").fadeOut("slow",function(){
$(".vert").fadeIn("slow");
});
Attention qu'on peut appeler une fonction standard comme ceci :
$("h1").on("click",myBox);
function myBox() { alert('Vous avez cliqué"); } // déclenche une alert au clic sur un <h1>.
Agir sur les balises
Une fois un ou des éléments sélectionner on peut tout faire sur ceux-ci via les méthodes de jQuery.
Deux facettes : setters et getters
Une methode peut avoir les deux fonctions : lire ou modifier les valeurs HTML ou CSS des éléments. Ainsi :
$("h2").css('font-size'); getter qui récupère la valeur du corps de <h2>
$("h2").css('font-size','2em'); setter qui met le corps de <h2> à 2emSi on utilise un getter sur un élément inexistant jQuery retourne "undefined" sans générer d'erreur. Si plusieurs éléments sont sélectionnés, le getter renvoie la valeur du premier. Pour récupérer toutes les valeurs des éléments il faudra les parcourir à l'aide de "each()". (voir plus loin).
Deux facettes : setters et getters
Une methode peut avoir les deux fonctions : lire ou modifier les valeurs HTML ou CSS des éléments. Ainsi :
$("h2").css('font-size'); getter qui récupère la valeur du corps de <h2>
$("h2").css('font-size','2em'); setter qui met le corps de <h2> à 2emSi on utilise un getter sur un élément inexistant jQuery retourne "undefined" sans générer d'erreur. Si plusieurs éléments sont sélectionnés, le getter renvoie la valeur du premier. Pour récupérer toutes les valeurs des éléments il faudra les parcourir à l'aide de "each()". (voir plus loin).
Et les attributs ?
Pour atteindre un attribut : .attr()
alert($("header img").attr("alt")); affiche le texte alternatif de l'image.
$("header img").attr("alt",'logo Cepegra"); change ou ajoute l'attribut "alt" de l'image.
et $("header img").removeAttr("alt"); retire l'attribut.
alert($("header img").attr("alt")); affiche le texte alternatif de l'image.
$("header img").attr("alt",'logo Cepegra"); change ou ajoute l'attribut "alt" de l'image.
et $("header img").removeAttr("alt"); retire l'attribut.
Références
- La documentation officielle (http://docs.jquery.com/)
- Le forum de discussion en Anglais (http://forum.jquery.com/)
- Principales méthodes Getters/setters
- Livres : http://www.sitepoint.com/top-10-free-jquery-ebooks/
- Ressources : https://www.lynda.com/search?q=jquery