Pourquoi jQuery

jQuery est une librairie JavaScript qui permet de manipuler le DOM, d'utiliser AJAX, de créer des animations...

• Simplifier le code
• Cross browser
• HTML / DOM manipulation
• CSS manipulation
• Gestionnaire d'évènements
• Effets / Animations
• Facilite les requêtes Ajax

Installation

Utilisation d'un CDN avec fallback

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<script>
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/js/jquery-2.0.0.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
						

La fonction jquery()

jQuery repose sur une seule fonction : jQuery() ou $(). Comme toutes les fonctions JavaScript elle accepte des paramètres, et retourne un objet, que nous appellons "objet jQuery".

Pour s'assurer que la fonction jQuery s'exécute une fois la page chargée et pouvoir manipuler le DOM sans erreur, on en-capsule l’ensemble du code jQuery dans le code ci-dessous. (Contrairement à l’évènement window.onload, le chargement complet des images de la page n’est pas nécessaire.)

$(function(){
   // Traitement à effectuer lorsque le DOM est prêt
});

Moins de code

var objs = document.getElementByTagName("div");
for ( i = 0; i < objs.length; i++ ){
	obj[i].style.display = 'none';
}
						

$("div").hide();
						

Présentation des sélecteurs

jQuery propose deux approches pour sélectionner des éléments. La première utilise une combinaison de sélecteurs CSS et XPath passés comme chaîne de caractères au constructeur jQuery (comme par exemple $("div > ul a")). La seconde se sert de différentes méthodes de l’objet jQuery. Les deux approches peuvent être combinées.

Les sélecteurs de base

Les sélecteurs de base correspondent aux fonctions getElementById et getElementsByTagName.

$(document) // Extension de l'objet document à la classe jQuery.
$('*') // Sélectionne tous les éléments.
$(this) // Sélectionne l'élement en cours.
$('#box') // Sélectionne l'élément ayant l'ID "box".
$('div') // Sélectionne tous les éléments de type <div>.
$('p.first') // Sélectionne les éléments <p> ayant la classe "first".
						

Les sélecteurs de base

Séléction hiérarchiques

$('#box p') // Sélectionne tous les descendants <p> de l'élément identifié par box
$('#box > p') // Sélectionne tous les <p> immédiats contenus dans l'élément identifié par box
$('#box ~ p') // Sélectionne tous les <p> frères de l'élément identifié par box
$('#box + p') // Sélectionne tous les <p> dont l'élément précédent (dans le DOM) est l'élément identifié par box
						

Séléction par filtres

$('li:first') // Sélectionne le premier élément de la liste <li>.
$('li:last') // Sélectionne le dernier élément de la liste <li>.
$('li:[even|odd]') // Sélectionne les éléments <li> de rang [pair|impair] (le premier rang est 0).
$('li:[eq|lt|gt](n)')// Sélectionne le ou les éléments <li> de rang [égal|inférieur|supérieur] à n.
$(':header') // Sélectionne toutes les balises <h>.
$(':animated') // Sélectionne les éléments actuellement animés.
$('div:not(.ok)') // Sélectionne les <div> n'ayant pas la classe "ok".
						

Séléction par filtres enfants

$('ul:[first-child|last-child]') // Sélectionne les [premiers|derniers] éléments fils <li>de tout les <ul>.
$('ul:nth-child([n|even|odd|equation])') // Séléctionne les enfants de <ul> [de rang n|pairs|impairs|résultat de].
$('div:only-child') // Sélectionne les éléments qui sont les seuls enfants d'un élément <div>.
						

Séléction par filtres de contenu

$("div:contains('toto')") // Sélectionne les éléments <div> contenant le texte "toto" (sensible à la casse !)
$('div:empty') // Sélectionne les éléments <div> vides.
$('div:parent') // Sélectionne les éléments <div> ayant des enfants (y compris les noeuds texte).
$('div:has(p)') // Sélectionne les éléments <div> ayant un descendant <p>.
						

Séléction par filtres de visibilité

$("div:[visible|hidden]") // Sélectionne les <div> qui sont [visibles|cachés].
						

Séléction par filtres d'attribut

$('p[title]') //Sélectionne les éléments <p> ayant un attribut "title".
$('p[title="Bonjour"]') // Sélectionne les éléments <p> dont l'attribut title est "Bonjour".
$('p[title!="Bonjour"]') // Sélectionne les éléments <p> dont l'attribut title n'est pas "Bonjour".
$('p[title^="H"]') // Sélectionne les éléments dont l'attribut title commence par "H".
$('p[title$="H"]') // Sélectionne les éléments dont l'attribut title fini par "H".
$('p[title*="H"]') // Sélectionne les éléments dont l'attribut title contient "H".
						

Les éléments de formulaire

$(':input') // Tous les éléments <input>, <textarea>, <select> et <button>.
$(':[text|password|radio|checkbox|submit|image|reset|button|file|hidden]') // Les <input> du type choisi.
$(':[enabled|disabled|checked|selected]') // Les <input> possédant l'attibut indiqué.
						

Les Méthodes

Méthodes utilitaires

• $.each(collection, callback(index,value)) : applique une fonction sur chaque éLément de la selection.
• data(key,value) : associe une paire clé/valeur à un élément sélectionné.
• data(key) : lit une valeur par sa clé sur l'élement sélectionné.

Gestion des attibuts

attr() possède plusieurs signature permettant :

$(this).attr('name'); // Connaître la valeur d'un attibut
$(this).attr('name', 'toto'); // Changer la valeur d'un attribut
$(this).attr({name: 'toto', value: 'tutu'); // Changer la valeur de plusieurs attributs (Format JSON)
$(this).attr('value', function(index,value){ // Changer l'attribut à l'aide de fonction
	if(index > 1)
		return "item" + index;
});					
						

Il existe également removeAttr() pour supprimer et val() qui retourne la valeur de l'attribut "value".

Conenu d'un élément

La méthode text() permet de lire et modifier le contenu d'un élément sous forme textuelle.

La méthode html() permet de lire et modifier le contenu HTML d'un élément. (Cette méthode utilise innerHTML)

Gestion des CSS (Classes)

• addClass : ajout d'une ou plusieurs classes
• removeClass : suppression d'une ou plusieurs classes
• hasClass : vérifie la présence d'une classe
• toggleClass : ajoute ou supprime une classe

Gestion des CSS (Styles)

• css() : permet de mettre à jour ou de récupérer un style
• height(), width() : Retourne la hauteur et la largeur
• innerHeight(), innerWidth() : dimension interne
• outerHeight(), outerWidth() : dimension externe
• position() : retourne sous forme d'objet {top,left} la position par rapport au parent
• offset() : retourne sous forme d'objet {top,left} la position relative par rapport au document
• scrollTop(), scrollLeft() : Modifie le décalage entre le bord du document et l'élément sélectionné

Les événements

• Evénements du navigateur : error(), resize() et scroll()
• Chargement du document : load(), ready(), unload()
• Evénements du formulaire : blur(), change(), focus(), select(), submit()
• Evénements clavier : focusin(), focusout(), keydown(), keypressed(), keyup()
• Evénements souris
  • Click : click(), dbclick()
  • Mouvements : mousedown(), mouseup(), mousemove(),mouseover()
  • hover() et toggle()

Les événements

bind() permet de lier un (ou plusieurs) événement, des données et un gestionnaire d'événement à une sélection d'élément

Les effets

Les effets

La plupart des fonctions sur les effets utilise des parmètres optionnels :

• speed : 'slow', 'normal' ou 'fast' - ou un nombre en millisecondes
• easing : effet prédéfini personnalisé par plugin
• function : une fonction callback qui sera invoquée à la fin de l'effet

Les effets

• Effets de base : hide(), show()
• Glissements : slideDown(), slideUp()
• Effets de fondu : fadeIn(), fadeOut(), fadeTo()
• Différer un effet : delay()
• Passer d'un effet à l'autre : toggle(), slideToggle(), fadeToggle()

Les effets avec animate()

animate() permet de créer une animation.

• un paramètre obligatoire sous forme d'objet JSON fournit les styles à animer
• des paramètres optionnels : vitesse, easing et une fonction callback

$(this).animate(
	{ left:300, width:"200px", opacity:0.5 },
	1000,
	function(){ alert("Animation terminée !"); }
);					
						

Le DOM

Parcourir le DOM

L'ensemble des méthodes jQuery de parcours du DOM renvoie un objet jQuery, ce qui permet de chaîner les appels

children() // renvoie les enfants immédiats de chaque élément sélectionné
parent() // renvoie le parent immédiat de chaque élément sélectionné
parents() // renvoie une collection d'éléments ancêtres de chaque élément sélectionné
parentUntil() // renvoie une collection d'éléments ancêtres de chaque élément sélectionné, jusqu'à un élément ou sélecteur
siblings() // renvoie les frères de chaque élément de la sélection
prev(), prevAll() // renvoie le frère immédiatement précédent / les frères précédents de chaque élément de la sélection
next(), nextAll() // renvoie le frère immédiatement suivrant / les frères suivants de chaque élément de la sélection
content() // renvoie tous les noeuds enfants de chaque élément de la sélection
closest() // renvoie le parent le plus proche de chaque élément sélectionné
find() // renvoie les descendants de chaque élément sélectionné
						

Manipuler le DOM

text() et html() // modification du contenu
append() // ajout à l'intérieur de l'élément sélectionné
after() // ajout après l'élément sélectionné
before() // ajout avant l'élément sélectionné
wrap() // ajout autour de l'élément sélectionné
wrapAll() // ajout autour de tous les éléments de la sélection
wrapInner() // ajout autour des enfants de l'élément sélectionné
unwrap() // annule l'action de wrap()
replaceWith() // remplace l'élément sélectionné par le contenu spécifié
remove() // supprime du DOM tous les éléments répondant aux critères de sélection
detach() // comme remove(), mais en conservant les données associées
clone() // copie les éléments
						

Filtrer le DOM

filter(expression) // réduit l'ensemble des éléments sélectionnés à ceux qui passe le filtre
eq(index) // reduit l'ensemble des éléments sélectionnés à celui correspondant à la position
is(expression) // indique si la sélection répond à un critère (retourne true ou false)
first() et last() // reduit l'ensemble des éléments sélectionnés au premier ou dernier item
has(selecteur) // reduit l'ensemble des éléments sélectionnés à ceux qui ont un descendant correspondant au sélecteur					
						

AJAX

AJAX

jQuery facilite l'écriture du code AJAX et il est possible de définir un certain nombre de paramèters (Voir la méthode $.ajax).

• url : ressource à charger
• datas : paires clé/valeurs envoyées au serveur
• function : fonction à exécuter en cas de réussite de la requête
• type : type de la réponse fournie à la fonction callback (xml, html, script, json, text)

load(url [, datas] [,function]) // retourne un objet jQuery
$.get(url [, datas] [,function] [,type]) // Requète HTTP de type GET et renvoie un objet XMLHttpRequest
$.post(url [, datas] [,function] [,type]) // Requète HTTP de type POST et renvoie un objet XMLHttpRequest
$.getScript(url [,function]) // Charge un script via la méthode HTTP GET et l'exécute		
						

Astuces et bonnes pratiques

Chainage

$('div').hide();
$('div').addClass('newclass');
$('div').html();

// Méthode de chainage
$('div').hide().addClass('newclass').html();
					    

Bonnes pratiques

• Charger jQuery d'un CDN avec fallback
• S'assurer de la compatibilité avec d'autres librairies
• Utiliser les sélecteurs les plus rapides
• Utiliser for plutôt que each()
• Limiter les manipulations direct du DOM
• Utiliser la délégation d'événements
• Utiliser la mise en cache jQuery avec data()

Liens utiles

jQuery : http://jquery.com/
jQuery UI : http://jqueryui.com/
jQuery Mobile : http://jquerymobile.com/
jQUery Form validation : http://jqueryvalidation.org/