Version en ligne

Tutoriel : Un site web dynamique avec jQuery !

Table des matières

Un site web dynamique avec jQuery !
jQuery : l'histoire d'un framework !
Mais... c'est quoi jQuery ?
A quoi va nous servir jQuery ?
L'histoire du framework
Des sites qui utilisent jQuery
De quels outils a-t-on besoin ?
Le choix du navigateur web
Un incontournable : Firebug pour Firefox !
Un éditeur de texte efficace
Rappels généraux sur JavaScript
Où et quand utiliser JavaScript ?
Variables et fonctions
Vos premiers pas avec jQuery !
Inclure jQuery dans vos pages
La fonction de base : jQuery()
Le principe de fonctionnement
Les sélecteurs
Les sélecteurs de CSS
Une sélection plus poussée
Le cas des formulaires
Le sélecteur $(this)
Performance des sélecteurs
jQuery et les événements
Un évènement, des évènements...
Quelques évènements incontournables
Les gestionnaires d'évènements
Manipuler le code CSS avec jQuery
Une méthode puissante : css()
Positionner des éléments
Gérer les dimensions
TP : le formulaire interactif
Explications et pré-requis
Correction
Améliorations
Des effets sur votre site avec jQuery !
Animez vos éléments
Les effets natifs
Reprenez le contrôle des effets
Manier les attributs
Gestion générale des attributs
Gérer les classes proprement
Parcourir les éléments du DOM
Naviguer dans le DOM
La descendance
Filtrer et boucler les éléments
Manipuler le code HTML avec jQuery
Insertion de contenu
Manipulation des éléments HTML
Créer des éléments à la volée
TP : le carrousel
Explications et pré-requis
Correction
Améliorations
AJAX : les requêtes HTTP par l'objet XmlHttpRequest
AJAX : notre problématique
Rappel sur les requêtes HTTP
AJAX par JavaScript
XmlHttpRequest avec jQuery
Le fonctionnement de $.ajax()
$.ajax() et ses paramètres
Les paramètres success, error et complete !
Les raccourcis $.get() et $.post()
Sérialisez vos formulaires !
Cas concret : un formulaire de connexion avec AJAX
Préparons le terrain
Côté client : du HTML et un appel AJAX
Côté serveur : un script PHP de connexion
Les évènements AJAX
Les requêtes AJAX sur écoute
Cas d'utilisation des évènements : un loader
La méthode load() !
A quoi load() sert-elle ?
Exemple d'utilisation de load()
TP : le tchat en AJAX
Explications et pré-requis
Correction
Améliorations
La documentation de jQuery
Le site officiel : jQuery.com
Explorer la documentation
Lire la fiche d'une méthode
Les interfaces utilisateur : jQuery UI
Les interfaces utilisateurs
Les interactions et les widgets
Le framework mobile : jQuery Mobile
Une version mobile
Les bases de l'interface
Les évènements et les méthodes
Programmez vos jeux avec gameQuery
Du fonctionnement de la 2D
Mise en place d'un playground
Un arrière-plan en parallaxe
Création de personnage par spritesheet
Utiliser le modèle objet
Gestion des contrôles et des collisions
D'autres plugins utiles
Gérez vos cookies en jQuery
Stockez vos données avec jStorage
Canvas avec jQuery
Étendre le framework
La fonction d'extension
Accélération d'une animation
Créez vos sélecteurs
Réalisez vos propres méthodes
Mémento des principales fonctions
Méthodes de base
Les sélecteurs
Les évènements
Manipulation du CSS
Les effets
Les attributs
Méthodes de parcours
Manipulation du HTML
Méthodes AJAX
D'autres frameworks JavaScript
Le principal concurrent : MooTools !
Les autres frameworks JavaScript

Un site web dynamique avec jQuery !

Bien le bonjour à vous !

JavaScript est un langage devenu incontournable en l'espace de quelques années, principalement dans le paysage du web. Et pour cause ! C'est une technologie complète, qui regroupe un nombre impressionnant d'outils permettant de dynamiser vos pages web et de leur donner une toute autre dimension. Comme toutes les grandes technologies, JavaScript a une grande communauté. Et comme toutes les grandes communautés, celle de JavaScript a vite ressenti le besoin d'améliorer les possibilités du langage, notamment par des frameworks. jQuery est l'un d'eux.

jQuery, écrivez moins, faites plus.

La devise de jQuery résume à elle seule l'impact que cet outil, que vous apprendrez aujourd'hui, aura sur votre manière de coder de demain. Vous écrirez moins de code JavaScript, mais pour en faire toujours plus. C'est à ce besoin que jQuery cherche à répondre depuis 2006, et vous constaterez au cours de ce tutoriel que force est d'admettre qu'il y parvient formidablement bien.

Image utilisateur

jQuery est le framework JavaScript le plus utilisé de tous : même le Site du Zéro en fait usage ! Complet, puissant, élégant... beaucoup sont ses points forts, et rares sont ses points faibles. L'attrait pour cet outil est immense. Seulement voilà : comment se former à cette technologie, en France, où la documentation de qualité se fait rare ? Comment aborder jQuery lorsque l'on est débutant ? C'est à ces problématiques que nous allons chercher à répondre ensemble par le biais de ce tutoriel. Si vous ne savez pas ce qu'est jQuery ou ne savez pas ce qu'est un framework ou une librairie, ne fuyez pas ! Comme à l'accoutumée, nous partirons de Zéro. :ange:

Quelques prérequis nous semblent quand même indispensables pour aborder ce cours dans les meilleures conditions.

Les prérequis pour suivre ce cours :

jQuery : l'histoire d'un framework !

Mais... c'est quoi jQuery ?

Pour bien nous situer dans cet univers de développement web, il est bon de contextualiser un peu la chose. C'est également le choix que nous souhaitons faire pour ce tutoriel. Avant de chercher à aborder jQuery, commençons déjà par poser les bases de la philosophie du framework dans votre tête. Pas de code ici, juste de l'histoire et des réponses aux questions basiques qui vous trottent dans la tête.

Vous saurez notamment à la fin de ce chapire ce qu'est jQuery, qui l'utilise, à quoi sert-il... bref ! Une mise à niveau générale pour ceux qui souhaitent apprendre cette technologie, restée trop longtemps hors de portée des Zéros.

Tâchons de répondre dans ce premier chapitre à toutes ces questions. Vous êtes prêts ? C'est maintenant que cela commence ! :pirate:

Mais... c'est quoi jQuery ?

jQuery : l'histoire d'un framework ! A quoi va nous servir jQuery ?

Mais... c'est quoi jQuery ?

Pour bien commencer à introduire jQuery, commençons donc par le définir, ce sera déjà une bonne chose de faite, vous ne pensez pas ? ;)

jQuery, un framework JavaScript

Vous le savez certainement, vos pages web sont composées de beaucoup de technologies différentes.

Comme si ce n'était pas assez compliqué comme cela, ces satanés informaticiens ont eu en plus la bonne idée de nous compliquer encore plus la tâche, en faisant en sorte que ces technologies puissent interagir entre elles. Parmi ces technologies qui font le web, on retrouve les standards HTML(5) et CSS(3) mais aussi des langages plus "évolués" qui permettent de dynamiser les pages web. L'un d'eux, le plus connu et le plus utilisé, est JavaScript.

Image utilisateur

Un logo de JavaScript

JavaScript ou... jQuery ?
De JavaScript à jQuery

JavaScript est un excellent langage, qui a su au fil des années s'imposer comme une technologie vraiment incontournable dans le web. Le nombre de sites qui utilisent désormais JavaScript est tout simplement gigantesque. La cause ? L'avènement du web 2.0, un web communautaire où les Webmasters cherchent à faire interagir toujours plus l'utilisateur avec le site. JavaScript est un langage tout indiqué pour répondre à ce besoin, expliquant ainsi en partie son succès. Un beau paysage pour JavaScript... seulement voilà, comme on dit : on n'arrête pas le progrès.

Alors très rapidement, ses utilisateurs ont voulu faire évoluer JavaScript, le rendre toujours meilleur. On a voulu que le langage puisse faire toujours plus de choses, toujours plus proprement et toujours plus simplement. C'est dans cet esprit que la communauté de JavaScript a développé des frameworks pour le langage, des "cadres de travail". L'un d'eux est le plus utilisé de tous, celui que l'on retrouve un peu partout sur le web. Et c'est aussi celui que l'on va étudier tout au long de ce cours : jQuery !

jQuery, un framework JavaScript
Image utilisateur

Ci-contre, vous pouvez voir l'un des logos de jQuery où est indiquée sa devise : "jQuery. Write Less, Do More". Cette devise, on peut la traduire tout bêtement par : "jQuery. Ecrivez moins, faites plus". Cela résume vraiment ce que jQuery va vous permettre de faire. En l'utilisant dans votre code JavaScript : vous écrirez moins de code, et vous serez plus productif.

Cela paraît flou, et nous vous comprenons. Vous avez encore du mal à vous représenter ce qu'est jQuery objectivement. Dans notre éternelle bonté, nous allons vous donner une vision plus physique de la chose : jQuery n'est en fait qu'un seul et unique fichier JavaScript, téléchargeable sur le web et qui porte l'extension .js !

Image utilisateur

Et oui ! Ce petit fichier, c'est bien jQuery !

Euh... et c'est ce petit truc de rien du tout qui nécessite un cours entier ? Elle me paraît pas franchement crédible toute cette histoire...

Et pourtant ! :D

jQuery n'est pas n'importe quel fichier JavaScript. C'est une énorme bibliothèque de fonctions JavaScript qui ont été écrites et regroupées en un seul et unique fichier pour plus de simplicité.

Vous êtes intrigué par le contenu de ce fichier... et vous avez du mal à croire qu'il peut à lui seul être l'objet d'autant d'engouement. C'est normal. Cliquez plutôt sur ce lien pour voir le code de jQuery dans sa version 1.7. Plutôt impressionnant non ? Cela prend tout de suite une autre ampleur. :lol:

Ce qu'il faut vous dire, c'est que jQuery est vraiment une grosse boîte à outils, et pas "un petit fichier de rien du tout". Le nombre de fonctions qui sont contenues dans ce simple fichier est vraiment grand. Et ces outils n'ont qu'un seul but : vous permettre d'écrire moins de code JavaScript, pour être toujours plus productif et efficace dans vos développements !

jQuery, un framework ou une librairie ?

Pour cette petite question de vocabulaire, nous allons vous apporter un élément de réponse. Vous avez très certainement au cours de vos visites sur le web entendu parler du mot librairie.

Le cas le plus simple : une librairie

Une librairie, en programmation, est une bibliothèque de fonctions.
Elles sont composées généralement par d'autres personnes qui les ont mises à disposition de tous, pour gagner du temps dans le développement. Elles sont souvent constituées d'un ou de plusieurs fichiers qui contiennent les fonctions. Tout ce que le programmeur a à faire, c'est d'inclure la librairie dans son code. Il peut ainsi commencer à utiliser les fonctions qui s'y trouvent pour avancer dans son code.

Mais alors, jQuery c'est exactement ça non ? Pourquoi est-ce que vous parlez de frameworks depuis tout à l'heure ?

Il existe en fait une petite différence toute simple entre framework et librairie, et cette différence, nous nous proposons de vous l'expliquer dès maintenant pour mieux comprendre l'impact que jQuery va avoir sur votre manière de coder.

Un cas plus complexe : un framework

Un framework, c'est quelque chose de déjà plus complexe qu'une librairie. Les frameworks sont généralement beaucoup plus massifs que les librairies, et pour cause : ils proposent plus de choses.
En fait, lorsque l'on code avec une librairie, ce sont les fonctions qui la compose qui vont s'intégrer à notre code. Avec un framework, ce n'est pas du tout pareil.

Le framework pose les bases d'une application, et il va nous "forcer" à programmer selon les codes qu'il nous impose. Ainsi, on peut dire que c'est notre manière de coder qui s'intègre à la vision du framework. Pour jQuery, c'est exactement ça.

jQuery est plus qu'une simple librairie même s'il en a les traits majeurs, il va vraiment vous faire coder en JavaScript d'une nouvelle manière. Et ceci à tel point qu'il est tout à fait possible de considérer jQuery comme un langage un peu à part, puisqu'il s'agit vraiment d'une redécouverte totale de JavaScript. Lorsque vous commencerez à travailler vraiment avec jQuery, vous comprendrez réellement tout le sens de cette phrase.

Vous voulez un peu savoir ce que ce framework a dans le ventre ? Très bien ! Voyons maintenant à quoi peut (et va !) nous servir jQuery concrètement dans notre site web.


jQuery : l'histoire d'un framework ! A quoi va nous servir jQuery ?

A quoi va nous servir jQuery ?

Mais... c'est quoi jQuery ? L'histoire du framework

A quoi va nous servir jQuery ?

jQuery est un framework qui va nous simplifier la vie d'une manière générale, et cela va passer par plusieurs fronts.

Nous allons lister quelques petites choses qui feront que demain, cet outil que vous allez apprendre à utiliser vous sera totalement indispensable pour presque tous vos développements en JavaScript.

Les points forts de jQuery

Si vous êtes un habitué du JavaScript, vous savez que chaque navigateur web dispose d'un moteur JavaScript qui lui est propre. Ce moteur, c'est lui qui va "parser" votre code JavaScript, et faire agir le navigateur en fonction de celui-ci.

jQuery et la compatibilité
Image utilisateur

Concrètement, la compatibilité inter-navigateurs signifie qu'un code JavaScript qui fonctionne sur un navigateur web doit fonctionner sur un autre. Et bien devinez quoi ? jQuery uniformise le tout ! Au final, un code JavaScript respectant les normes imposées par jQuery sera compatible sur tous les navigateurs web.

Un gain de temps et d'énergie plus qu’appréciable, vous permettant de vous focaliser vraiment sur le cœur de votre code, plutôt que sur des questions de compatibilité entre navigateurs.

jQuery et l'AJAX
Image utilisateur

Dans le même registre de compatibilité, l'AJAX avec jQuery a été grandement simplifié. AJAX est rendu possible grâce à un objet de JavaScript appelé XmlHttpRequest (XHR)... seulement, instancier un objet XmlHttpRequest peut vite devenir un véritable calvaire, car d'un navigateur à l'autre, cela ne se fait pas du tout de la même manière. Grâce à jQuery, instancier un objet XHR est très simple.
Une seule fonction instancie l'objet, et elle couvre tous les navigateurs, en plus de vous fournir des outils pour gérer au mieux votre requête ! AJAX devient donc étonnamment facile et rapide à utiliser.

jQuery et les animations
Image utilisateur

L'un des éléments incontournables de jQuery et qui a fait son succès est incontestablement la possibilité de créer des effets sur sa page. Envie de faire disparaître un bloc avec un effet de fondu, ou bien faire trembler un bouton submit sur votre page web ? Pas de problème ! jQuery le fait pour vous.

Vous verrez que la masse de fonctions que jQuery vous proposera afin de créer des effets sur vos pages web sera tout simplement impressionnante. Vous verrez aussi que la densité de la documentation en témoignera.

jQuery et les formulaires
Image utilisateur

Un des points forts de jQuery est qu'il va vous permettre d'effectuer un pré-traitement de vos formulaires HTML côté client, de manière très avancée. Nous pourrons ainsi relever quels type de formulaires ont mal été remplis et afficher ceci au visiteur.

Ainsi, ne comptez pas QUE sur jQuery pour valider vos données. Vous devrez également prévoir une validation côté serveur, avec un langage tel que PHP.

Et tout cela, c'est sans parler de toute la panoplie d'outils disponible pour manipuler pleinement le DOM que jQuery vous offre. Pas de doutes, jQuery est le choix pour lequel vous devez opter aujourd'hui pour donner une nouvelle dimension à vos futurs sites.

Nous ne pouvons que vous encourager à vous accrocher et à apprendre cette technologie. Avec ce tuto entre les mains, ce travail d'apprentissage n'en sera que plus facile. :-°


Mais... c'est quoi jQuery ? L'histoire du framework

L'histoire du framework

A quoi va nous servir jQuery ? Des sites qui utilisent jQuery

L'histoire du framework

Image utilisateur

Le framework jQuery est à la base l'œuvre d'un seul homme, un programmeur JavaScript hors-pair qui a su, en 2006, initier le projet.

Son nom est John Resig. Depuis 2006, John Resig est resté le chef de projet de jQuery. C'est ainsi lui qui supervise encore aujourd'hui le développement de jQuery.

Il travaillait pour le compte de la Mozilla Corporation en tant que développeur JavaScript.

Malgré le travail colossal que Resig a su faire sur le framework jQuery, vous imaginez bien que cet homme n'a pas pu à lui seul créer un tel outil. Les autres développeurs de jQuery, ce sont les membres de sa communauté.

En effet ! John Resig a publié le framework sous licence MIT et GNU GPL : deux licences libres. Cela signifie concrètement que tout le monde peut travailler sur le framework et participer à son amélioration. Vous verrez notamment plus tard qu'il existe des plug-ins jQuery que vous pourrez créer vous-même, afin de toujours plus compléter le framework... mais nous n'en sommes encore pas là. ^^

A ce jour, jQuery en est à sa version 1.7.2, et a déjà subi beaucoup de mises à jour. La communauté est en effet très active, et les mises à jour se font toujours régulièrement.


A quoi va nous servir jQuery ? Des sites qui utilisent jQuery

Des sites qui utilisent jQuery

L'histoire du framework De quels outils a-t-on besoin ?

Des sites qui utilisent jQuery

jQuery est le framework JavaScript le plus utilisé sur le web, et ce, pour les qualités que nous vous avons présentées plus haut.

Voici quelques grands noms du web qui utilisent aujourd'hui jQuery de manière plus ou moins abondante, cela devrait vous aider à faire définitivement votre choix. :)

Sachez également que les CMS les plus répandus sur le web comme Drupal et Wordpress utilisent jQuery !

Cette introduction à jQuery et à son histoire est maintenant achevée. Nous espèrons que cela vous aura plus, et que vous cernez maintenant un peu mieux ce qu'est jQuery.

Nous allons maintenant nous intéresser aux outils dont on va avoir besoin pour coder correctement et efficacement avec jQuery.


L'histoire du framework De quels outils a-t-on besoin ?

De quels outils a-t-on besoin ?

Des sites qui utilisent jQuery Le choix du navigateur web

La préparation est probablement l'élément le plus important, quel que soit le projet que vous souhaitez mener, et ce, pas seulement en développement.

Afin de maximiser nos chances d'apprendre jQuery dans les meilleures conditions, nous allons nous aussi passer par toute une phase de préparation. Ici, c'est vous et votre ordinateur que nous allons devoir préparer à utiliser jQuery... cela passe surtout par s'équiper de bons programmes.

Vous verrez, nous n'avons pas besoin d'être armés jusqu'au dents pour développer avec jQuery, un bon couple navigateur/éditeur suffit. :-°

Le choix du navigateur web

De quels outils a-t-on besoin ? Un incontournable : Firebug pour Firefox !

Le choix du navigateur web

jQuery étant une technologie axée web, le navigateur sera sans aucun doute le programme dont vous aurez le plus besoin ici. Seulement, comment choisir le bon navigateur web pour travailler, quand on a toute une panoplie de produits tous plus excellents les uns que les autres ?

Ce choix est d'autant plus difficile lorsque l'on connaît les problèmes de compatibilité liés à l'utilisation de JavaScript dans son code... mais ici pas de problème, puisque jQuery va nous permettre de ne plus prendre ce paramètre en ligne de compte ! :D

Considérant cet élément, le choix du navigateur se résumera donc seulement à prendre celui avec lequel vous êtes le plus à l'aise. Voici une liste vous présentant les différents navigateurs web, honteusement reprise du tutoriel de référencement web du Site du Zéro. ;)

Icône

Nom

OS

Téléchargement

Déscription

Image utilisateurImage utilisateur

Internet Explorer

Image utilisateurImage utilisateur

Fourni par défaut avec Windows.

Un navigateur web signé Microsoft et intégré par défaut à toutes les versions du système d'exploitation Windows. Si vous tournez actuellement sous Windows, alors vous disposez de ce navigateur.
Je ne vous recommande pas d'utiliser ce navigateur, car les versions les plus récentes ne sont pas disponibles pour les systèmes comme Windows XP qui sont pourtant massivement utilisées encore aujourd'hui.

Il y a donc une grosse probabilité que votre version d'Internet Explorer ne soit pas capable de reconnaître les dernières avancées technologiques en matière de standards web.

Image utilisateurImage utilisateur

Mozilla Firefox

Image utilisateurImage utilisateurImage utilisateurImage utilisateur

Téléchargement

Un navigateur web gratuit et extrêmement performant signé par la Mozilla Foundation. Je ne saurais que vous recommander de l'utiliser sans modération.

Image utilisateurImage utilisateur

Google Chrome

Image utilisateurImage utilisateurImage utilisateurImage utilisateur

Téléchargement

Un autre navigateur web signé cette fois-ci par Google. Le programme est basé sur un projet open-source baptisé Chromium, mais connaît quelques controverses vis à vis du respect des informations personnelles de ses utilisateurs. Il est néanmoins recommandé de l'utiliser tant il est performant.

Image utilisateurImage utilisateur

Chromium

Image utilisateurImage utilisateurImage utilisateurImage utilisateur

Téléchargement

Chromium est le projet open-source sur lequel est basé Google Chrome. Il s'agit en fait de Google Chrome lavé de tous les ajouts de Google. Vous pouvez l'utiliser si vous êtes inquiet au sujet des questions du respect des informations personnelles.

Image utilisateurImage utilisateur

Opera

Image utilisateurImage utilisateurImage utilisateurImage utilisateur

Téléchargement

Opera est un navigateur web de très grande qualité proposé gratuitement par l'entreprise Opera Software.
Il est moins utilisé que les 4 précédents mais demeure un excellent produit.

Image utilisateurImage utilisateur

Safari

Image utilisateurImage utilisateurImage utilisateur

Téléchargement

Safari est le navigateur web d'Apple qui équipe tous les ordinateurs Apple par défaut. C'est un peu l'Internet Explorer de la pomme de ce point de vue.

Maintenant que nous vous avons présenté ces navigateurs majeurs que tout le monde utilise sur le web, nous pouvons quand même souligner qu'il y en a un qui ressort nettement plus que les autres. Ce navigateur, c'est Mozilla Firefox !

Et... pourquoi cela ?

Simplement parce que Firefox est vraiment le meilleur de tous les navigateurs lorsqu'il s'agit de développer pour le web. Nous souhaiterions vous faire découvrir (ou redécouvrir) un outil spécialement dédié au développement web, et surtout uniquement disponible sous Mozilla Firefox.

Cet outil, nommé Firebug vous sera vraiment d'une aide capitale dans vos futurs développement web, en particulier avec JavaScript et jQuery.


De quels outils a-t-on besoin ? Un incontournable : Firebug pour Firefox !

Un incontournable : Firebug pour Firefox !

Le choix du navigateur web Un éditeur de texte efficace

Un incontournable : Firebug pour Firefox !

Firebug est en fait une extension gratuite pour Firefox, qui est vraiment devenue incontournable pour tout développeur web qui se respecte.

Ajoutez Firebug à votre navigateur Firefox !
Image utilisateur

Elle a été développée par des développeurs indépendants, et vous pourrez l'ajouter directement à votre navigateur Firefox sur le site officiel Mozilla Addons.

Dans une optique d'aide au développement, l'extension Firebug se caractérise en fait par toute une panoplie d'outils pour le développement web qui vont venir s'intégrer complètement à Firefox dans le but de le compléter et de le rendre beaucoup utile et agréable à l'utilisation. Etant donné que c'est un ajout à Firefox, vous devez être conscient que l'installation de ces outils rend le navigateur sensiblement plus lourd, donc plus lent à l'exécution.

Utiliser la boîte à outils Firebug !

Pour commencer à utiliser Firebug, il serait bien convenu d'arrivé à l'ouvrir vous ne pensez pas ? :)

C'est très simple. Commencez par ouvrir une page web dans votre navigateur Firefox, optez par exemple pour la page d'accueil du Site du Zéro.

Une fois que vous y êtes... faites très attention, car la manipulation que vous allez devoir réaliser pour ouvrir Firebug va être tellement complexe que... bon ok, j'arrête. Contentez-vous simplement d'appuyer sur F12 et ça fera l'affaire. :D

La magie opère, et Firebug s'ouvre dans Firefox !

Image utilisateur

Firebug ouvert dans le navigateur Firefox !

Vous pouvez voir que Firebug dispose de 6 onglets, proposant des outils différents. Chaque onglet est découpé en deux zones ayant toutes une utilité différente de l'autre. Trois de ces onglets vont retenir notre attention pour le moment.

Mine de rien, ces outils vont nous être sacrèment utiles pour développer en jQuery. Pour la suite : sachez qu'il existe 3 autres onglets : Script, DOM et réseau, mais que nous ne souhaitons pas développer dans cette partie du cours sur jQuery. Si vous souhaitez avoir plus d'informations sur Firebug dans son ensemble, nous pouvons vous conseiller de lire cet excellent tutoriel sur l'extension Firebug disponible sur le Site du Zéro. :)


Le choix du navigateur web Un éditeur de texte efficace

Un éditeur de texte efficace

Un incontournable : Firebug pour Firefox ! Rappels généraux sur JavaScript

Un éditeur de texte efficace

Le dernier élément dont vous aurez besoin pour développer avec jQuery... ce sera bien sûr un éditeur de texte.

Un éditeur de texte performant et efficace

Nous ne pouvons pas opter pour n'importe quel éditeur de texte pour développer avec jQuery, et c'est d'ailleurs vrai pour n'importe quel langage. Ce qu'il nous faut, c'est un éditeur suffisament perfectionné pour gérer la coloration syntaxique. Ils sont nombreux, mais tout cela pour dire qu'il ne faut pas se laisser aller et utiliser le Bloc Note fourni par défaut avec Windows. ^^

Nous allons vous conseiller là-encore quelques exemples de programmes à utiliser, sachez qu'ils ne sont pas les mêmes en fonction du système d'exploitation que vous utilisez.

Sous Windows
Image utilisateur

Le code du framework jQuery ouvert sous Notepad++

Sous Windows, on peut trouver des éditeurs vraiment très performants. Nous utilisons respectivement les éditeurs Notepad++, qui a le mérite d'être gratuit, et l'éditeur Sublime Text 2. Pour ce dernier, sachez que le programme n'est pas gratuit et qu'il faudra songer à l'enregistrer au bout d'une certaine période.

Ces deux éditeurs sont vraiment de qualité. Sachez que Sublime Text 2 vous donne en plus de cela la possibilité de naviguer dans votre arborescence, un peu à la manière d'un IDE.
Un autre programme existe pareil ailleurs : ConTEXT. Pour l'avoir essayé, il est lui aussi de très bonne qualité en plus d'être gratuit.

Sous Linux
Image utilisateur

L'éditeur Gedit sous GNU/Linux Ubuntu 10.04

Sous Linux on a là encore beaucoup d'éditeurs différents et ils ont tous beaucoup d'atouts dans leur manche.
Si vous êtes un habitué de la console et que vous ne souhaitez pas être dépaysé, vous pourrez toujours éditer vos fichiers avec Vim ou Emacs. Si en revanche vous préférez utiliser un éditeur graphique, l'éditeur de texte Gedit ou Geany sont tous les deux excellents.

Sous MacOS X
Image utilisateur

Le logo de l'éditeur Smultron sous MacOS X

Le système d'exploitation de la firme Apple a lui aussi son lot d'éditeur. Le plus connu est sans doute Smultron, qui a été créé par un développeur Suédois.

Choisissez l'éditeur de texte avec lequel vous êtes le plus à l'aise. Si vous avez l'habitude de créer des sites internet, l'éditeur que vous utilisez pour HTML n'a aucune raison de ne pas connaître JavaScript. Et s'il connaît JavaScript : c'est qu'il connaît jQuery. :)

Vous arrivez bientôt au terme de votre préparation, bientôt nous allons pouvoir aborder réellement jQuery et commencer à coder avec lui. :)

Le chapitre qui suit sera le dernier chapitre introductif au cours. Nous allons faire une dernière petite mise au point... cette fois-ci au niveau du JavaScript. Vous remettre en mémoire une dernière fois les fondements de ce langage ne sera pas de trop avant d'apprendre jQuery !


Un incontournable : Firebug pour Firefox ! Rappels généraux sur JavaScript

Rappels généraux sur JavaScript

Un éditeur de texte efficace Où et quand utiliser JavaScript ?

Histoire de mettre tout le monde sur la même longueur d'onde, nous vous proposons un petit rappel sur les rudiments de JavaScript, ses bonnes pratiques, quand l'utiliser, et surtout pourquoi. Ce chapitre ne se veut en aucun cas un apprentissage ultra-rapide du langage, il existe d'ailleurs un big-tutoriel sur le Site du Zéro pour cela.

Où et quand utiliser JavaScript ?

Rappels généraux sur JavaScript Variables et fonctions

Où et quand utiliser JavaScript ?

Avant tout chose, il nous faut définir la place que prendra notre code JavaScript dans la page. En effet, la structure se doit d'être claire, car on ne développe pas n'importe comment. Pour les connaisseurs, avez-vous pour habitude de placer du code PHP dans une page portant l'extension .html ? Pour sûr que non ! :D

Avec JavaScript, on sera un peu moins regardant à ce niveau, mais il est quand même préférable de bien diviser son code.

Où placer son code JavaScript ?

Cette question, bien qu'elle semble simplette et dénuée d'intérêt, fait parfois l'objet de débats sur le web. Certains diront qu'un code JavaScript DOIT se placer entre les balises <head></head>, car c'est comme cela que le langage HTML a été construit. En revanche, les non-adhérants à cette pratique diront que, pour un soucis de performance, il est largement plus rentable de placer JavaScript en fin de page, juste avant la fermeture de la balise <body>.

Le problème se pose maintenant : qui a raison, et qui a tort ? :o

Au cours de ce tutoriel, nous ne vous obligerons pas à préférer la première ou la deuxième pratique, mais il est clair pour nous que placer son code JavaScript en fin de page est plus logique : la structure HTML, le DOM, se charge ainsi en premier en raison de la lecture linéaire du navigateur, ce qui est le plus important. Vient ensuite JavaScript, qui se chargera d'ajouter tous les effets et applications voulues. Les codes que nous vous présenterons seront donc toujours placés en fin de page, ou dans des documents externes chargés en derniers.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>
    
        <script>
            // mon code JavaScript
        </script>
    </body>
</html>
Quand et comment l'utiliser ?

Une des autres choses à retenir, c'est qu'il faut savoir utiliser JavaScript avec parcimonie. Souvenez-vous toujours que c'est un langage qui s'exécute du côté client, et qui est donc facilement contournable grâce à un bon navigateur. Ainsi, vérifier des informations peut se faire en JavaScript, mais doit toujours être assuré également du côté de votre serveur, qui lui n'est pas accessible. Cela vous évitera bien des problèmes !

Parallèlement, n'utilisez JavaScript que lorsqu'il est utile, c'est-à-dire lorsqu'il apporte quelque chose au visiteur. Faire un déluge de flocons de neige sur la page d'accueil présente très peu d'intérêt, et aura plutôt tendance à agacer l'utilisateur. :-° De même, ne chargez pas vos informations essentielles avec ce langage : les personnes l'ayant désactivé, les personnes handicapées et les robots des moteurs de recherche ne pourront ou ne sauront pas lire votre contenu !

JavaScript doit donc être sur un site web pour, par exemple, améliorer l'expérience utilisateur, mais surtout pas pour la création de contenu.


Rappels généraux sur JavaScript Variables et fonctions

Variables et fonctions

Où et quand utiliser JavaScript ? Vos premiers pas avec jQuery !

Variables et fonctions

Parmis les bonnes pratiques à adopter en JavaScript, il y a celles qui concernent les variables et les fonctions. Nous ne vous parlerons que de ces éléments pour la simple et bonne raison que leur déclaration ne change pas avec jQuery, contrairement aux évènements, par exemple. Si vous ne savez pas ce qu'est une variable ou une fonction, nous vous conseillons vivement d'aller lire un tutoriel consacré à JavaScript !

De la déclaration des variables

Les variables en JavaScript se déclarent toujours de la même façon : il faut précéder le nom du mot-clé var. Il est possible de déclarer plusieurs variables à la suite en les séparant de virgules :

var maVariable = 1, // cette variable vaut 1
    maVariable2, // celle-ci est déclarée, mais vide
    maVariable3 = true; // celle-ci contient le booléen true

Traditionnellement, on déclarera nos variables en début de code ; ce n'est pas le langage qui veut cela, c'est juste une façon d'y voir plus clair. ^^

Concernant les tableaux, plus couramment appelés arrays, et les objets, ils se déclarent grâce à leur structure particulière. Ainsi, on initialisera un tableau avec des crochets [ ], et un objet avec des accolades { }.

Fonctions et arguments

Les fonctions en JavaScript se déclarent de la même manière qu'en PHP, par exemple. Beaucoup de langages de programmation se ressemblent, surtout à ce niveau. Ainsi, il suffit d'écrire le mot-clé function suivi du nom de la fonction pour déclarer celle-ci et pouvoir l'utiliser. Elle peut aussi prendre des arguments, qui feront office de variables accessibles uniquement dans la fonction qui les a instancié. Il est donc possible d'exploiter des données différentes avec une seule fonction.

function helloWorld(nom){
    alert('Hello World, ' + nom + '!');
}

helloWorld('Sainior'); // affichera une alerte "Hello World Sainior !"
Cas des fonctions anonymes

Il est possible, en JavaScript, de déclarer des fonctions qui ne possèdent pas de nom. Assez joliment, on les a appelées « fonctions anonymes ». Elles permettent de lancer une fonction directement depuis une variable, par exemple, ou même une autre fonction ! Elles seront donc très utilisées dans ce cours, donc assurez-vous bien d'être au point avec. Pour exemple, si je déclare une fonction anonyme dans une variable, je pourrai exécuter la fonction avec la variable :

var helloWorld = function(){ // cette fonction est anonyme
    alert('Hello World !');
}; // attention au point-virgule, il ne faut jamais l'oublier !

helloWorld(); // affichera une alerte "Hello World !"

Vous êtes maintenant au point pour commencer à vous lancer avec jQuery ! Ces chapitres d'introduction ont peut-être été un peu long, mais nous pensons qu'il est nécessaire que vous soyez sûr de vous pour coder dans de bonnes conditions. Alors n'attendez plus, on commence dès maintenant ! :p


Où et quand utiliser JavaScript ? Vos premiers pas avec jQuery !

Vos premiers pas avec jQuery !

Variables et fonctions Inclure jQuery dans vos pages

Nous voici maintenant dans la vraie phase d'apprentissage de jQuery. C'est ici que l'on va commencer à taper nos premiers codes sources en jQuery.

Inclure jQuery dans vos pages

Vos premiers pas avec jQuery ! La fonction de base : jQuery()

Inclure jQuery dans vos pages

Pour commencer à travailler avec jQuery sur votre site web, il va falloir tout naturellement l'inclure dans vos pages. Voyons ici comment l'on va procéder.

Deux méthodes pour inclure jQuery dans vos pages web

Vous devez savoir qu'il existe deux méthodes pour inclure jQuery dans vos pages. Les deux marchent et sont tout à fait valables, mais l'une est plutôt déconseillée alors que l'autre est au contraire vraiment très conseillée.

Inclure jQuery depuis votre serveur (méthode déconseillée)

La première de ces deux méthodes, celle qui n'est pas conseillée, consiste à inclure jQuery dans vos pages web depuis votre propre serveur. Pour cela, c'est très simple.

Dans un premier temps, nous allons devoir nous rendre sur le site officiel de jQuery : jQuery.com.

Pour récupérer jQuery, vous devez tout simplement cliquer sur l'option "Download" dans le menu du haut. Vous arriverez alors sur une page vous présentant les différentes release de jQuery. A l'heure où nous écrivons ces lignes, la version actuelle est la 1.7.2, et c'est celle que nous utiliserons au sein de ce cours.

Quoiqu'il en soit, la version la plus à jour est placée un peu en avant par rapport aux autres ; pratique pour l'identifier et la récupérer plus rapidement.

Euh... il y a deux release pour la même version non ? Une version "Minified" et une version "Uncompressed"... qu'est-ce que je dois choisir ?

Ah oui ! Nous allions y venir ! :D

En fait, c'est très simple. jQuery vous est toujours fourni en deux exemplaires. Je vous rassure le contenu du fichier est exactement le même. Il n'y a pas 2 jQuery, il y en a bien qu'un seul.

Bref, pour en revenir à notre inclusion dans nos pages, téléchargeons la version compressée de jQuery. Faites donc un Clic Droit -> Enregistrer sous, et placez jQuery dans un dossier facile d'accès pour pouvoir l'inclure plus facilement dans votre page web.

La suite est très simple et très basique. Ouvrons un document HTML.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test jQuery</title>
   </head>
   <body>
   <p>On va bosser avec jQuery, c'est super !</p>

   <script src="chemin/vers/jquery.js"></script>
   </body>
</html>

Et voilà ! Si le chemin d'accès vers le fichier est correct, jQuery a bien été relié à votre page web... seulement, cette méthode n'est franchement pas recommandé, car elle va faire bosser votre serveur un peu plus, et surtout inutilement.

On va voir tout de suite la deuxième méthode, celle qui est vraiment beaucoup plus recommandée par tous les développeurs jQuery !

Inclure jQuery depuis un serveur distant (Google !)

Et oui ! La méthode la plus recommandée pour inclure jQuery dans votre page web est encore d'inclure le fichier directement depuis un serveur distant.

Seulement voilà, il faut trouver quelqu'un de suffisamment fou pour pouvoir héberger un fichier aussi utilisé que jQuery et le mettre à disposition de tous les développeurs de la planète qui veulent l'utiliser... et il y a bien une entreprise qui fait ça, c'est Google !

Google n'est pas seulement un moteur de recherche et une suite de sites web, c'est aussi une entreprise qui a montré depuis toujours un intérêt farouche pour l'open-source. C'est ainsi que Google met à disposition de tous le framework jQuery hébergé directement sur ses serveurs. Google vous fournit un lien absolu à indiquer dans vos pages, et c'est tout bon, jQuery est inclus !

Reprenons le même code source que tout à l'heure, et adaptons-le pour ce deuxième cas de figure.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test jQuery</title>
   </head>
   <body>
   <p>On va bosser avec jQuery, c'est super !</p>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   </body>
</html>

jQuery est prêt à l'emploi !

Le lien vers jQuery Minified chez Google est
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

Et le lien vers jQuery Uncompressed chez Google est
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js

jQuery n'est d'ailleurs pas le seul framework libre que Google héberge et propose à tout le monde. Si vous voulez voir l'intégralité des outils proposés par Google, vous pouvez vous rendre sur cette page. Les liens absolus à indiquer sont également référencés sur cette page du site Google dédié aux développeurs.

Et pourquoi cette méthode est-elle la plus recommandée des deux ?

La réponse à cette question est très simple : c'est juste pour moins faire travailler notre serveur. En plus de cela, inclure jQuery depuis un serveur Google permet une mise en cache immédiate, pour toujours accélérer les temps de chargement de votre site. C'est donc plus une question de performance qu'autre chose.

Ainsi, pensez bien qu'à chaque fois que vous travaillerez en jQuery, il vous faudra inclure le framework depuis un serveur Google !


Vos premiers pas avec jQuery ! La fonction de base : jQuery()

La fonction de base : jQuery()

Inclure jQuery dans vos pages Le principe de fonctionnement

La fonction de base : jQuery()

jQuery est donc inclus à notre page web... c'est bien beau, mais l'idéal serait quand même d'arriver à utiliser ce qu'il a à nous proposer non ? Voyons comment faire dès maintenant pour exploiter toute la puissance du framework. ^^

Une fonction générique : jQuery() ou $()

L'ensemble du framework jQuery repose sur une seule fonction. C'est la fonction la plus importante du framework, vous devrez toujours l'utiliser dès qu'il s'agira de développer en jQuery. Cette fonction, c'est tout bêtement la fonction jQuery() !

Elle va servir tout simplement à dire : "Hop là ! A partir de maintenant, c'est du jQuery qu'il va y avoir". Sans cette fonction, le code jQuery peut ne pas être interprété correctement. C'est peut-être là une faiblesse qui n'en est pas une pour le framework : tout le code qu'on l'on va devoir écrire, on va devoir le faire au sein de cette fonction. :-°

Reprenons notre code de tout à l'heure et voyons comment appeler la fonction jQuery().

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Test jQuery</title>
   </head>
   <body>
   <p>On va bosser avec jQuery, c'est super !</p>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- jQuery est inclus ! -->
   <script>
       jQuery(document).ready(function(){
           // Du code en jQuery va pouvoir être tapé ici !
       });
   </script>
   </body>
</html>

Oulah, il y a déjà pas mal d'infos dans ce code que nous allons devoir vous expliquer. :waw:

Laissons un peu tomber le HTML pour le moment et focalisons-nous sur le JavaScript. Essayez simplement d'imaginer que nous nous trouvons dans une page HTML complète.

jQuery(document).ready(function(){
   // Du code en jQuery va pouvoir être tapé ici !
});

Alors, comme nous vous le disions, on a déjà pas mal de nouveautés dans ce code : la ligne 1 en contient le plus.

jQuery(document)

jQuery prend un argument. Ici, elle cible le "document", qui représente tout simplement votre document HTML sur lequel vous travaillez : votre page web.

jQuery(document).ready(function(){
    // notre code ici
});

La suite de ce code est vraiment très simple. Vous voyez que le prochain élément qui arrive, est l'événement ready. Cet événement se traduit simplement par "est prêt". Une fois que cet événement est vérifié, on lance une fonction anonyme dans laquelle on va placer notre jQuery. :)

Ainsi, cette ligne peut être traduite par : "quand le document HTML est prêt (sous-entendu, est chargé), lance une fonction qui contient le code jQuery."

Cette petite structure de rien du tout signifie vraiment beaucoup de choses : on attend simplement que la page HTML soit chargée avant de commencer à parler de jQuery. C'est LA structure que vous devrez utiliser dans 99% des cas pour coder en jQuery dans votre page. Retenez-la par cœur, parce que cela vous fera vraiment gagner du temps.

Et comment on peut vérifier que tout cela est fonctionnel ?

Vous pouvez simplement ajouter un console.log à la place des commentaires dans le code ci-dessus pour voir si vous recevez bien quelque chose dans votre console Firebug à l'exécution de ce code. Vous pouvez également utiliser la méthode hard en utilisant carrément un alert(). ;)

Vous pouvez vous y prendre comme ceci :

/*
 * Avec un console.log
 */

jQuery(document).ready(function(){
  console.log("jQuery est prêt !");
});

/*
 * Avec un alert()
 */

jQuery(document).ready(function(){
 alert("jQuery est prêt !");
});

Essayez ce code !
Si vous avez un retour dans votre console ou dans votre navigateur, c'est tout bon !

Quoiqu'il en soit n'oubliez pas cette structure... d'ailleurs, on peut un peu la simplifier en ne spécifiant pas le ready() :

/*
 * La structure de base simplifiée.
 */

jQuery(function(){

});
$() un alias de jQuery()

Vous savez tous qu'un programmeur, c'est par définition quelqu'un de très fainéant. Alors comme on a trouvé que c'était trop long d'écrire jQuery() pour appeler la fonction, on s'est dit qu'on allait créer un alias pour pouvoir l'appeler plus facilement. Ainsi, il faut savoir que la fonction jQuery peut aussi s'appeller avec $(). Le reste du code reste exactement le même.

Ainsi...

jQuery(function(){
    alert('jQuery est prêt !');
});

... et...

$(function(){
   alert('jQuery est prêt !');
});

... vont donner exactement le même résultat !

Notez par ailleurs que l'alias $() est vraiment le plus utilisé sur le web, tout simplement parce qu'il est plus rapide à écrire. Ainsi, dans la suite de ce cours nous utiliserons toujours l'alias $() pour les codes que nous vous fournirons. Vous feriez mieux de vous aussi prendre l'habitude. Vous verrez, ce n'est pas très compliqué, vous avez juste à vous dire qu'il y a écrit "jQuery" à la place de "$" !

Éviter le conflit

La plupart des bibliothèques JavaScript utilisent elles aussi le $ (dollar), ce qui peut être la source de conflit entre les différentes librairies sur une même page. Pour éviter ce genre de problème, il est possible de passer la variable jQuery à une fonction anonyme pour être sûr que notre alias ne soit pas l'origine de conflits.

(function($){
    // notre code ici
})(jQuery);

Parallèlement, ready() accepte également un alias en paramètre de la fonction anonyme. Il est alors possible de simplifier le code au maximum :

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

// ce code plus court revient au même :

jQuery(function($){
    // notre code ici
});

Inclure jQuery dans vos pages Le principe de fonctionnement

Le principe de fonctionnement

La fonction de base : jQuery() Les sélecteurs

Le principe de fonctionnement

Comme nous venons de le voir, le framework met en place une fonction dite principale. Le principe de fonctionnement de jQuery repose en fait entièrement sur celle-ci ! Autant dire que vous allez vous servir beaucoup plus du caractère $ (dollar) dès à présent ! ;)

Ainsi, pour agir avec les éléments d'une page web, on réalisera ce qu'on appelle couramment un « ciblage d'élément », qui représentera une balise, par exemple. On agira ensuite dessus grâce à des méthodes. Pour que vous ayez un aperçu, voici un code fictif tout simple usant du principe de jQuery :

$('monElement').maMethode();

Je cible dans un premier temps mon élément qui jouera le rôle d'objet, grâce à un sélecteur (chose que nous verrons plus en détails dans le prochain chapitre). Je peux ensuite agir dessus grâce à une méthode !

Image utilisateur

Mais c'est quoi une méthode ?

Une méthode en jQuery est une fonction un peu spéciale qui agira directement sur l'objet (ou l'élément ciblé, si vous préférez) indiqué. Le framework en possède beaucoup, mais il est possible de créer les nôtres ! Nous verrons cela dans un chapitre dédié, lorsque vous serez plus à l'aise avec jQuery.
Il est possible de chaîner les méthodes, c'est-à-dire que l'on peut en mettre plusieurs à la suite, pour agir sur l'objet en une seule fois.

$('monElement').premiereMethode().deuxiemeMethode();
/* la première méthode agit d'abord sur l'objet, avant la deuxième.
On a donc un ordre logique : les méthodes s'enclenchent les unes derrière les autres */

Si vous avez assimilé ce fonctionnement de base, vous avez fait le plus dur. ^^
Bien sûr, jQuery est bourré d'outils pour rendre la chose un peu plus vivante.

Vous devez commencer à comprendre comment fonctionne concrètement le framework ! :) C'est une très bonne chose, car nous allons monter le niveau d'un cran, et voir les sélecteurs dans le chapitre suivant.


La fonction de base : jQuery() Les sélecteurs

Les sélecteurs

Le principe de fonctionnement Les sélecteurs de CSS

jQuery a une syntaxe qui permet de sélectionner très facilement des éléments sur la page, c'est un de ses plus grands points forts. Mais, au-delà des apparences, la sélection de ceux-ci est plus complexe qu'il n'y paraît. Les sélecteurs en jQuery sont toute une science que nous allons apprendre pas à pas au cours de ce chapitre ! :)

Les sélecteurs de CSS

Les sélecteurs Une sélection plus poussée

Les sélecteurs de CSS

Avant de se lancer dans une foule de sélecteurs propres à jQuery tous plus compliqués les uns que les autres (non, on plaisante :p ), il est nécessaire de débuter par des sélecteurs plus basiques. En effet, le framework que nous étudions fonctionne tout d'abord avec les sélecteurs de CSS. Vous les connaissez surement, ou tout du moins la plupart, car vous êtes censé connaître un minimum la syntaxe du CSS pour suivre ce tutoriel.

Cela ne vous dit vraiment rien ? :euh:

Les sélecteurs les plus utilisés

Peut-être est-ce le mot sélecteur qui vous fait peur. Dans ce cas-là, je pense que votre mémoire va se rafraîchir si je vous parle d'identifiant et de classe. Pour rappel, il est possible d'attribuer une classe ou un identifiant à un élément HTML ; on s'en servira par la suite pour le sélectionner avec CSS, ce qui nous permettra de styliser l'élément.

Avec jQuery, vous pouvez très bien utiliser ces sélecteurs ! Ce sont même ceux-ci qui reviendront le plus souvent dans vos codes. Pour cela, il suffit de suivre simplement la syntaxe suivante, comme en CSS :

$('p'); // je sélectionne tous les paragraphes

$('.maClasse'); // je sélectionne les éléments ayant .maClasse pour classe

$('#monId'); // je sélectionne l'élément qui possède l'identifiant #monId
Frères et parents

Parmi les sélecteurs un peu plus complexes que les classes et les identifiants se trouvent les sélecteurs de descendance. Ce mot bizarrement employé dans un contexte tel que le nôtre cache en fait un concept très puissant de parcours. Vous n'êtes surement pas sans savoir qu'il est possible, en HTML, d'imbriquer des balises les unes dans les autres. Eh bien, ce système fait usage de la descendance !

Prenons un exemple concret. Je possède un paragraphe, dans lequel j'ai un lien absolu. Ma balise <a href="lien"></a> est alors imbriquée dans les balises <p></p> propres au paragraphe.

On dit que le paragraphe est un élément parent, et le lien un élément enfant.
Comprenez-vous le principe ? La balise parente à mon lien est la balise qui contient celui-ci. Ainsi, de cette façon-là, la balise <body> est parente de toute notre structure HTML !

CSS, et par extension, jQuery, permet de manipuler ce concept de descendance grâce à des sélecteurs spéciaux. Le plus connu est sans doute le sélecteur qui fait suivre deux éléments au minimum :

$('p .lien');
/* ici, nous sélectionnons tous les éléments ayant la classe .lien, 
et contenus dans un paragraphe qui joue le rôle de parent */

Le problème de cette méthode-ci est qu'elle prend en compte tous les éléments possédant la bonne classe et contenus dans un parent. Imaginez que vous ne vouliez sélectionner que les éléments qui descendent directement du bloc parent, c'est-à-dire qui ne sont pas contenus une seconde fois dans un autre bloc. Dans ce cas-là, il vous faudra utiliser un sélecteur un peu moins connu, qui n'est autre que >.

$('p > .lien');
/* ici, nous sélectionnons seulement les éléments ayant la classe .lien,
et descendants directement du paragraphe ! */

Il est ensuite possible de pousser le système encore plus loin, par exemple en utilisant les sélecteurs + et ~ qui se chargent de représenter les frères de l'élément. Ce qu'on appelle couramment les frères, dans ce contexte de jQuery, ce sont simplement les éléments qui se suivent directement, comme par exemple deux liens.

$('.lien + .visite');
/* la sélection s'effectue sur les éléments ayant pour classe .visite,
et qui sont immédiatement précédés d'un élément ayant pour classe .lien */

$('.lien ~ .visite');
/* dans ce cas-là, ce sont tous les éléments .visite,
précédés immédiatement ou non par un élément .lien */

Alors, pas trop compliqué ? :p

Jusque là, vous devriez avoir suivi assez facilement. Les sélecteurs CSS sont une chose assez peu difficile à assimiler, et si vous avez du mal, pas de soucis à avoir, cela viendra avec l'expérience. En attendant ce jour heureux, je vous invite à passer aux sélecteurs propres à jQuery !


Les sélecteurs Une sélection plus poussée

Une sélection plus poussée

Les sélecteurs de CSS Le cas des formulaires

Une sélection plus poussée

Les sélecteurs de CSS, c'est bien, mais des sélecteurs plus sophistiqués ne seraient pas de refus ! En effet, pour les besoins des développeurs, jQuery met en place une sélection d'éléments beaucoup plus poussée que CSS. Comprenez bien que ce n'est pas seulement avec des identifiants et des classes que nous pourrons établir un véritable système, ce serait le chaos total et franchement peu pratique. C'est pourquoi jQuery a mis en place ce que l'on appelle des filtres, qui ont une syntaxe particulière : deux points suivis du nom du sélecteur. Vous en saurez plus en lisant la suite. ;)

La place d'un élément

Parmis les très nombreux sélecteurs proposés par le framework figurent ceux qui permettent de sélectionner un élément suivant sa place sur la page. C'est quelque chose de vraiment pratique qui était assez compliqué à réaliser avec du simple JavaScript. Les plus utilisés et connus sont :

Ainsi, de cette façon, il vous suffira de taper ceci pour faire une sélection sur le premier et/ou le dernier élément :

$('p:first'); // sélection du premier paragraphe trouvé

$('a:last'); // ici, on sélectionne le dernier lien de la page
L'index d'un élément

Cela peut vous paraître flou au premier abord, contrairement aux deux autres sélecteurs. En effet, qu'est-ce que l'index d'un élément ?

Eh bien, pour faire le plus simple possible, c'est le numéro qui représente sa place dans la page. Ainsi, si vous possédez cinq paragraphes, vous pourrez par exemple sélectionner le troisième sans problème. Mais attention il y a un piège : il faut commencer à compter à partir de 0. C'est très important de retenir cela, le système est similaire sur les tableaux, par exemple. Alors quel chiffre taperez-vous pour retourner le troisième paragraphe ? :)

$('p:eq(2)'); // c'était 2 !
Sélection par attributs

Un autre type de sélecteurs sont les sélecteurs fonctionnant grâce aux attributs des éléments du DOM. Il est ainsi possible de réaliser de multiples actions sur les balises qui contiennent un attribut donné, tel qu'un identifiant ou une valeur :

$('p[id]'); // retourne seulement les paragraphes ayant un identifiant
Cibler d'autres façons

Heureusement, il est possible de préciser la requête. Imaginons que vous vouliez récupérer les éléments ayant une valeur (value) ou un nom (name) bien précis. Dans ce cas-là, il est possible de le dire à jQuery grâce à la syntaxe suivante :

$('input[name=pseudo]'); // cible seulement l'élément de formulaire ayant « pseudo » pour nom

Si au contraire vous voulez cibler tous les autres éléments, ceux qui n'ont pas la bonne valeur dans leur attribut, il suffit de rajouter un point d'exclamation (!) devant le signe "égal" (=) :

$('input[name!=pseudo]'); // retourne les éléments n'ayant pas « pseudo » pour nom
Le sélecteur :not()

Un peu à part, ce sélecteur particulier permet de cibler les éléments qui sont tout sauf ce qui a été indiqué à l'intérieur. Il permet donc une sélection puissante, et, depuis jQuery 1.3, permet même de spécifier plusieurs types de balises en même temps ! Il s'utilise très facilement :

$('p:not(.rouge)'); // sélection de tous les paragraphes, sauf ceux ayant .rouge comme classe

$('input:not(.bleu, .vert)'); // on sélectionne tous les éléments de formulaire sauf ceux ayant .bleu et/ou .vert comme classe

Autant dire qu'en terme de praticité, ce sélecteur vaut pas mal de points ! :D

Sauver la sélection

Il peut parfois se révéler pratique de sauvegarder un objet jQuery. Il est donc possible de rentrer une sélection dans une variable, cette dernière pouvant être utilisée à la place de la fonction principale.

var $element = $('monElement');

Les sélecteurs de CSS Le cas des formulaires

Le cas des formulaires

Une sélection plus poussée Le sélecteur $(this)

Le cas des formulaires

Pour exploiter la pleine puissance des très nombreux sélecteurs de jQuery, il faut se pencher sur les formulaires en HTML. En effet, l'interaction étant beaucoup plus présente à ces endroits, il est logique que le framework soit plus enclin à les dynamiser. Ainsi, la sélection des éléments de formulaire se fera d'une façon un peu différente, que nous allons commencer à traiter tout de suite. :)

Le type des éléments

Comme vous le savez surement, les éléments de formulaire peuvent changer de type selon ce que l'on veut en faire. La balise ne change pas et reste la même, on utilisera dans 90% des cas <input />. En changeant l'attribut type de la balise, il est possible de spécifier que l'on veut une case à cocher, un champ de texte, un bouton...

Suivant ce principe, on pourrait penser qu'il faut faire ceci en jQuery :

$('input[type=button]'); // on sélectionne un input de type button

Ce code fonctionne parfaitement, mais ce n'est pas la meilleure façon de procéder ! Il y a plus simple, plus rapide et surtout plus propre. Pour respecter cela, il faut indiquer le type, précédé de deux points :

$('input:button'); // on sélectionne un input de type button

Et vous pouvez ensuite faire ceci pour chaque type d'input !

Type

Code

text (Texte)

input:text

password (Mot de passe)

input:password

file (Fichier)

input:file

checkbox (Case à cocher)

input:checkbox

radio (Bouton radio)

input:radio

button (Bouton normal)

input:button

submit (Bouton d'envoi)

input:submit

État des éléments

Dernière petite astuce avant de conclure ce chapitre, vous pouvez établir une sélection suivant l'état des éléments d'un formulaire. Vous allez nous répondre qu'il n'y a pas trente-six états, justement, et vous avez effectivement raison. Neanmoins, ce sont des sélecteurs que nous retrouverons assez souvent, et nous pensons qu'il est intéressant de les connaître.

Ainsi, vous pouvez vérifier qu'une case est cochée, ou qu'un élément est activé/désactivé, grâce aux sélecteurs suivants :


Une sélection plus poussée Le sélecteur $(this)

Le sélecteur $(this)

Le cas des formulaires Performance des sélecteurs

Le sélecteur $(this)

Le sélecteur le plus spécial est sans aucun doute $(this). Dans la plupart des langages orientés objet, le mot-clé this représente l'objet courant, celui qui est actuellement traité par une fonction, par exemple. jQuery permet la sélection de cet objet.

Exemple avec ce code qui traite chaque élément trouvé :

$('p').each(function(){
    
    $(this).html('Hello World !'); // $(this) représente le paragraphe courant

});

Le cas des formulaires Performance des sélecteurs

Performance des sélecteurs

Le sélecteur $(this) jQuery et les événements

Performance des sélecteurs

Outre le fait de sélectionner des éléments avec jQuery, il ne faut pas négliger le reste. Ainsi, tout bon développeur sait que la performance est un point primordial dans un code, de quelque langage soit-il issu. La librairie jQuery n'est pas exempt : il faudra vous assurer que votre code est le plus rapide, le plus optimisé et le plus ergonomique possible. Cela passe par une foule de choses, mais nous allons en voir une seule ici : la performance des sélecteurs.

Car oui, les sélecteurs ne ciblent pas tous les éléments à la même vitesse. Ainsi, cibler un élément par un identifiant, par exemple, sera toujours plus rapide que cibler un élément par sa classe.

Les sélecteurs les plus rapides

On note une certaine différence de rapidité lorsqu'il s'agit de cibler des éléments de différentes façons. Le pourquoi est très simple : certains sélecteurs profitent de fonctions natives implémentées par JavaScript, car ils en descendent directement. On pensera donc notamment au sélecteur par identifiant, qui est le plus rapide des sélecteurs : c'est normal, il utilise directement la fonction getElementById() !

Ainsi, on note une rapidité 5 fois supérieure au deuxième sélecteur le plus rapide, qui est le sélecteur par balise. Vient ensuite le sélecteur par classe, les autres enregistrant une forte baisse de performance à l'utilisation.

Ces différences proviennent en fait du parcours du DOM : alors que l'identifiant, étant normalement unique, est ciblé directement par jQuery à cause de sa singularité, les classes vont être traitées une à une, en parcourant tout le document HTML pour les trouver. Pour optimiser au maximum une requête par classe, il suffit de cibler tout d'abord le parent de l'élément avec un identifiant :

$('#menu .sections');
// sélection plus rapide que :

$('.sections');
Écourter les chaînes

Les sélecteurs peuvent s'enchaîner, afin de cibler plus précisément des éléments. Cette astuce possède un lourd inconvénient : elle ralentit considérablement la vitesse de sélection des éléments du DOM. En effet, jQuery va devoir tout d'abord trouver le premier élément, puis va devoir passer au deuxième, et ainsi de suite... Il est alors possible d'augmenter exponentiellement le temps d'exécution du code. Voyons l'exemple suivant :

$('div p a');

$('#lien');

Ces deux ciblages sont identiques, pourtant, la première sélection est, en théorie, environ 15 fois plus lente que la deuxième ! En effet, dans le premier cas, jQuery va parcourir chaque bloc div du document, pour ne retourner que ceux possédant un paragraphe. Viennent ensuite ceux-ci, qui vont être parcourus jusqu'à trouver celui qui possède un lien. En revanche, dans le second cas, le lien va être ciblé directement de part son identifiant unique !

Rappelez-vous donc d'une règle essentielle lorsque vous utilisez jQuery : plus la chaîne de sélecteurs est courte, plus rapide sera la sélection.

C'est la fin de ce chapitre ! Vous avez vu que les sélecteurs de jQuery offrent de nombreuses possibilités de ciblages des éléments d'une page web, et ce n'est que le début de ce fabuleux framework ! Vous verrez dans le prochain chapitre comment gérer les évènements, où vous aurez besoin de mettre en pratique tout ce que vous venez de voir. Assurez-vous donc de bien avoir compris ! :)


Le sélecteur $(this) jQuery et les événements

jQuery et les événements

Performance des sélecteurs Un évènement, des évènements...

En jQuery, vous aurez presque tout le temps à travailler avec ce que l'on appelle des évènements, (events en anglais)... Nous allons voir ce que c'est dans ce chapitre. Qui sont-ils ? A quoi vont-ils nous servir, surtout et comment les aborder dans notre code jQuery ?

C'est vraiment un élément clé du framework, donc forcément, c'est un chapitre clé. Bonne nouvelle : c'est plutôt simple à comprendre. :p

Go !

Un évènement, des évènements...

jQuery et les événements Quelques évènements incontournables

Un évènement, des évènements...

Voyons voir ici ce que sont les évènements... si vous êtes assez à l'aise avec JavaScript, cette sous-partie n'aura probablement pas grand chose à vous apprendre. Mais bien sûr, lisez quand même car vous êtes en train de réapprendre JavaScript à travers jQuery !

C'est quoi un évènement ?

Pour expliquer la chose simplement, dites-vous qu'un évènement est une action remplie par le navigateur, ou plus généralement l'utilisateur. Vous connaissez les conditions ? Pour les évènements, c'est un peu le même principe : on lance un bout de code quand une action est remplie.

D'ailleurs ! Vous vous en êtes peut-être rendu compte, mais dans les chapitres précédents, nous avons déjà utilisé un évènement, le ready() ! Voyons le code que nous avions :

$(document).ready(function(){
    // Le code jQuery ici !
});

C'est la fonction de base de jQuery, vous vous souvenez ? Elle marche autour de l'évènement ready() qui écoute le chargement du document. L'écoute d'un évènement, c'est tout simplement le fait d'attacher une action bien précise à remplir à un élément pour déclencher une fonction, appelée écouteur d'évènement.

"QUAND le document est PRÊT, on appelle une fonction (dans laquelle on va mettre du jQuery)."

C'est le fonctionnement de ce code qui tourne autour de l'évènement ready() : tant que le document n'est pas chargé, on ne fait rien. Quand il est chargé, on agit. Fort heureusement pour nous, jQuery peut écouter plein d'évènements différents, on ne se limitera pas qu'à écouter si notre page est chargée ou non. :D

En gros, on peut dire qu'un évènement fait le lien entre une action remplie, et une fonction (du code) exécutée.

Encore une fois, si vous êtes un habitué du JavaScript vous deviez connaître un peu tout ça, si ce n'était pas le cas, pas de problème : maintenant vous connaissez le concept. JavaScript permettait de gérer les évènements d'une certaine manière. Eh bien devinez quoi ? En jQuery, c'est totalement différent ! Bon point : en JavaScript, gérer des évènements ne se faisait pas du tout de la même manière d'un navigateur à l'autre. Sachez que jQuery uniformise encore le tout !

La syntaxe en elle-même est super simple, voyons ce que cela donne ici. Utilisons par exemple l'évènement click() qui est un évènement écoutant le clic de la souris.

$("#uneDiv").click(function(){
    // Le code a exécuter !
});

Si on clique sur l'élément qui possède l'id #uneDiv (<div id="uneDiv"></div>), alors vous allez pouvoir déclencher du code JavaScript. Plus tard, lorsque l'on sera un peu plus à l'aise avec jQuery, on pourra par exemple décider de faire disparaître cette div (ou un autre élément !) avec un bel effet, ou même commencer à gérer une requête AJAX pour mettre à jour le contenu de cette div... bref ! Les possibilités sont multiples. :)

Les évènements vous intéressent et vous voulez aller plus loin, alors lisez donc la suite.


jQuery et les événements Quelques évènements incontournables

Quelques évènements incontournables

Un évènement, des évènements... Les gestionnaires d'évènements

Quelques évènements incontournables

jQuery étant très complet il va nous donner l'opportunité d'écouter beaucoup d'évènements sur notre page web. Nous allons en voir quelques uns ici, que nous pensons incontournables.

Déclenchement d'évènements

Parmis les nombreux évènements disponibles, les plus célèbres sont sans aucun doute ceux pouvant être déclenchés par l'utilisateur. Ce sont eux qui permettent une très grande interactivité avec le visiteur, c'est donc eux qui seront les plus utilisés en général. Nous allons en voir quelques uns, ceux qui sont à connaître absolument !

L'écoute sur la souris

La souris d'un ordinateur est un outil qui permet à l'utilisateur de réaliser de multiples actions : cliquer, bouger, double-cliquer, descendre dans une page... Bref, un paquet de mouvements à prendre en compte. Ce qui est génial avec jQuery, c'est que l'on va pouvoir contrôler entièrement les actions du visiteur, et déclencher de multiples fonctions grâce à elles ! :)

Vous connaissez sans doute déjà click(), qui lance une fonction lors du clic de l'utilisateur sur l'objet associé. Nous vous proposons ci-dessous une liste d'évènements adaptés à la souris ; le fonctionnement reste le même.

Action

Fonction

Clic

click()

Double-clic

dblclick()

Passage de la souris

hover()

Rentrer dans un élément

mouseenter()

Quitter un élément

mouseleave()

Presser un bouton de la souris

mousedown()

Relâcher un bouton de la souris

mouseup()

Scroller (utiliser la roulette)

scroll()

L'écoute sur le clavier

Tout comme la souris, le clavier peut tout à fait être écouté par un script jQuery. L'utilisation la plus fréquente que l'on peut en faire est de détecter l'appui d'une touche et de lancer une action seulement si la bonne à été pressée. Les évènements associés ne sont pas très nombreux, on en trouvera seulement trois :

Pour connaître la touche enfoncée par l'utilisateur, dans chaque cas, il vous faudra employer une fonction anonyme équipée d'un argument représentant le code de la touche, sur lequel on appliquera la propriété keyCode. Cependant, le principal problème de cette propriété est qu'elle ne fonctionne pas sur tous les navigateurs (souvenez-vous que ceux-ci ont des moteurs JavaScript différents). Il faut donc ruser pour rendre notre code compatible tous navigateurs :

$(document).keyup(function(touche){ // on écoute l'évènement keyup()

    var appui = touche.which || touche.keyCode; // le code est compatible tous navigateurs grâce à ces deux propriétés

    if(appui == 13){ // si le code de la touche est égal à 13 (Entrée)
        alert('Vous venez d\'appuyer sur la touche Entrée !'); // on affiche une alerte
    }
});

Pour connaître le code d'une touche, je vous invite à aller consulter cette page.

Le cas des formulaires

Les éléments de formulaire possèdent eux aussi leur lot d'évènements associés. Par exemple, lorsqu'un champ est focalisé, on dit qu'il « prend le focus », car c'est sur lui que se trouve notre pointeur. Un évènement permet de contrôler ce genre de chose.

Action

Fonction

Focalisation

focus()

Sélection (p.e. dans une liste)

select()

Changement de valeur

change()

Envoi du formulaire

submit()

Le déclenchement virtuel

jQuery permet de simuler le déclenchement d'évènements grâce à une simple méthode. Pour faire court, vous n'avez pas besoin d'attendre que l'utilisateur remplisse une action précise pour lancer du code : vous pouvez exécuter virtuellement un évènement grâce à trigger() ! Il suffit de donner le type de l'évènement en tant qu'argument.

$('p').click(function(){
    alert('Cliqué !');
});

$('p').trigger('click'); // déclenche l'action au chargement du script
Annuler le comportement d'un élément par défaut

Chaque évènement possède son propre groupe d'éléments spécifiques à traiter : par exemple, la soumission de formulaire ne s'applique pas à tous les cas. Cependant, certains éléments ont un comportement par défaut, défini par le navigateur. Le cas le plus courant est le lien hypertexte : son comportement va être de rediriger l'utilisateur vers l'adresse donnée.

Une méthode en jQuery permet d'annuler tous comportement par défaut. Il s'agit de preventDefault().

$('a').click(function(e){
    e.preventDefault(); // annule l'action du lien
});

Un évènement, des évènements... Les gestionnaires d'évènements

Les gestionnaires d'évènements

Quelques évènements incontournables Manipuler le code CSS avec jQuery

Les gestionnaires d'évènements

En jQuery, et même plus globalement en JavaScript, on peut faire appel aux gestionnaires d'évènements. Ce sont des fonctions auxquelles on donne un type d'évènement à écouter, ainsi qu'une fonction à exécuter à chaque fois que l'évènement est déclenché. Elles sont plusieurs et nous allons les étudier car elles représentent une partie importante de ce chapitre, si ce n'est LA plus importante !

Rappels

Si vous lisez ce cours, c'est que vous avez quand même quelques notions en JavaScript. Dans un premier temps, rappelez-vous la méthode que vous utilisiez pour écouter un évènement. Il devait sans doute s'agir de addEventListener(), qui signifie en français « ajouter un écouteur d'évènement ». Cette fonction prenait le plus souvent deux arguments : le premier indiquait le type d'évènement à écouter, le second était une fonction de retour exécutant du code.

Un troisième paramètre pouvait être défini à true ou false, et permettait d'utiliser soit la phase de capture, soit la phase de bouillonnement.

L'écoute en jQuery

Sachez qu'avec notre framework, il est possible de réaliser la même chose. L'écoute d'un évènement se réalisera avec la méthode bind() le plus souvent, mais la tendance s'inverse pour laisser place à la fonction on(), recommandée par les auteurs de jQuery depuis la version 1.7 : c'est donc très récent. Comme chaque développeur doit s'adapter au progrès, nous utiliserons la seconde méthode dans la suite de ce chapitre, et plus généralement de ce cours !

Quelle différence entre ces deux fonctions ? Pourquoi utiliser l'une, et plus l'autre ?

On note une différence majeure de flexibilité : nous allons voir juste après qu'il est possible de déléguer des évènements, de faire vivre des évènements, et évidemment d'écouter des évènements. Dans les versions plus anciennes de jQuery, il fallait utiliser trois méthodes différentes pour réaliser ces choses-là. La méthode on() permet de les regrouper en une seule, elle est donc bien plus pratique et ergonomique !

Précédemment, vous avez vu comment déclencher un évènement simple. Les fonctions utilisées n'étaient en fait que des méthodes simplifiées, permettant aux développeurs de ne pas créer à chaque fois un gestionnaire. Nous allons voir à présent l'écoute, la vraie, d'évènements en jQuery.

Pour écouter un évènement, il suffit de réaliser le même schéma de code qu'avec addEventListener(). C'est-à-dire que l'on va donner dans un premier temps le type d'évènement, puis la fonction de callback à exécuter :

$('button').on('click', function(){
    alert('Ce code fonctionne !');
});

Concrètement, ce code se lance de cette façon :

  1. on cible un bouton ;

  2. on initialise un gestionnaire d'évènement ;

  3. on écoute le clic de l'utilisateur ;

  4. et on exécute le code de la fonction de retour.

Un des avantages de cette technique est que l'écoute peut se faire sur plusieurs évènements en même temps, vous n'êtes pas obligé de créer un gestionnaire pour chacun d'eux ! Ainsi, nous pouvons lancer une écoute sur le clic et sur le double-clic, en séparant les deux types par un espace :

$('button').on('click dblclick', function(){ // on écoute le clic et le double-clic !
    alert('Ce code fonctionne !');
});
Passer par un objet

Encore plus fort, vous pouvez passer un objet en tant qu'argument à cette méthode, afin d'exécuter des fonctions différentes pour chaque évènement ! Le concept est très simple, il suffit de donner le type d'évènement en tant qu'identifiant, auxquel vous attachez une fonction de retour à chaque fois :

$('button').on({
    click : function(){
        alert('Vous avez cliqué !');
    },
    mouseup : function(){
        alert('Vous avez relâché le clic !');
    }
});
La délégation d'évènements

Ce concept est plutôt simple à comprendre. Il permet en fait de créer un écouteur d'évènements sur un élément, et de s'adapter automatiquement aux éléments similaires créés plus tard, de façon dynamique ! Pour que vous compreniez bien, imaginons que vous ayez un paragraphe simple, sur lequel vous appliquez un évènement. Si vous créez d'autres paragraphes dans la page, ceux-ci ne seront pas pris en compte par l'écouteur !

Image utilisateur

Avant la version 1.7 du framework, il était très courant (et ça l'est encore ajourd'hui) d'utiliser la méthode live(), pour déléguer un évènement à un élément créé dynamiquement. C'est une technique dépréciée, pour la simple et bonne raison qu'elle devient lente sur de grosses pages, et les problèmes de performance sont très mal vus des développeurs. De même, cette méthode parcoure l'ensemble du document, contrairement à on(), qui cible directement un élément ! On a donc une portée restreinte pour une efficacité croissante : double gain de vitesse d'exécution !

La fonction delegate() est presque autant utilisée que live(). La différence entre ces méthodes est que la première fonctionne presque comme on(), et est donc plus propre et ergonomique. Elle n'est pas dépréciée, contrairement à sa cousine, mais encore une fois, vous n'aurez pas à l'utiliser.

La syntaxe pour déléguer un évènement est très simple. Il faut donner trois arguments :

$('div').on('click', 'p', function(){
    alert('Les paragraphes créés peuvent être cliqués !');
});
Les espaces de noms

Très utiles, les espaces de noms (namespaces dans la langue de Shakespeare) ont la capacité de désigner un évènement bien précis. Le nommage d'évènement n'étant pas possible avec une fonction, les développeurs de jQuery ont préféré mettre en place ce système. A utiliser avec les gestionnaires d'évènements, les espaces de noms ont une syntaxe bien particulière à retenir :

event.namespace

Grâce un système pareil, vous pourrez exécuter différentes fonctions à partir d'un même type d'évènement. Il suffit de spécifier l'espace de nom à utiliser, et seule la fonction correspondante sera exécutée.

$('button').on('click.nom', function(){
    alert('Premier évènement');
});

$('button').on('click.prenom', function(){
    alert('Second évènement');
});

$('button').trigger('click.nom'); // exécute le clic, MAIS ne lance que la première alerte !

Quatre règles doivent être respectées lorsque vous utilisez les espaces de noms. Il ne faut pas en user n'importe comment, car ils ne sont pas adaptés à chaque cas d'utilisation :

    • il est possible de donner plusieurs espaces de noms à un évènement ;

    • en revanche, il n'est pas possible d'appeler plusieurs espaces de noms d'un seul coup !

    • Exemple : on('click.nom.prenom', ...) définira en même temps click.nom et click.prenom ; mais trigger('click.nom.prenom') ne marchera pas.

    • vous pouvez seulement préciser le type d'évènement, sans les espaces de noms, pour tous les déclencher en même temps ;

    • en revanche, il n'est pas possible de ne préciser qu'un espace de nom sans type d'évènement !

    • Exemple : trigger('click') déclenchera toutes les fonctions associées aux espaces de noms sur le clic ; mais trigger('.nom') ne marchera pas.

La suppression en jQuery

S'il est possible d'écouter un évènement avec on(), il doit être également possible de le supprimer ! Et en effet, la fonction inverse à cette méthode se nomme, de manière plutôt logique, off(). Elle est assez puissante dans le sens où elle peut supprimer tous les gestionnaires et écouteurs mis en place précédemment avec on(), de même qu'on utilisait unbind() pour annuler bind() ! Fort heureusement, ce n'est pas sa seule utilisation : un argument permet notamment de spécifier quel type d'évènement il faut annuler.

$('p').on('click', function(){
    // du code ici
});

$('p').off('click'); // supprime tous les gestionnaires écoutant le clic

$('p').off(); // supprimer tous les gestionnaires de n'importe quel évènement
Annuler la délégation

La fonction inverse de live(), avant de passer à off(), se nommait die(). De même que pour sa soeur, cette méthode est dépréciée, on peut donc dire qu'il est temps pour die() de mourrir ! :lol:
Si vous voulez supprimer tous les gestionnaires d'évènements délégués seulement, il faut donner un second argument à la méthode, qui est l'élément créé dynamiquement. La valeur « ** » désigne tous les éléments qui profitent de la délégation d'évènements :

$('body').on('click', 'p', function(){
    // du code ici
});

$('body').off('click', 'p'); // supprime tous les gestionnaires d'évènements délégués sur les paragraphes

$('body').off('click', '**'); // supprime tous les gestionnaires d'évènements délégués

Vous avez vu, les évènements n'étaient pas difficiles à comprendre, et en plus de ça, c'est plutôt simple d'en exploiter toute la puissance dans notre code jQuery. Peut-être les gestionnaires vous ont-ils donné du fil à retordre ? Si c'est le cas, prenez bien le temps de relire cette petite partie, car ils sont très utilisés !

Les bases du framework se mettent de plus en plus en place dans votre tête, et c'est une très bonne chance. Bientôt vous serez étonnez de ce qu'il est possible de faire avec votre site web ! La prochaine étape : la manipulation de votre code CSS. Modifier des éléments de votre design dynamiquement, un rêve inavoué ? :-°


Quelques évènements incontournables Manipuler le code CSS avec jQuery

Manipuler le code CSS avec jQuery

Les gestionnaires d'évènements Une méthode puissante : css()

La manipulation du code CSS en jQuery se fait de manière rapide et efficace. En effet, il est possible d'accéder à toutes les propriétés existantes, et plus encore, comme récupérer des données stylisantes. Les différentes positions sont également une part importante de la modification du style par jQuery ; ce chapitre sera dédié à l'étude de tout cela. :)

Une méthode puissante : css()

Manipuler le code CSS avec jQuery Positionner des éléments

Une méthode puissante : css()

Parmis les nombreuses méthodes de jQuery, il en est une que vous utiliserez très souvent en ce qui concerne la modification du style de vos pages. Il s'agit de la méthode au nom très éloquent : css().

Récupérer la valeur d'une propriété

La méthode css() peut prendre plusieurs sortes d'arguments. Le plus simple est de spécifier le nom de la propriété, afin de récupérer sa valeur. Imaginez que vous ayez un paragraphe dont le texte est de couleur verte. Pour récupérer cette donnée, vous devrez faire ceci en jQuery :

$('p').css('color'); // ma méthode ira chercher la valeur de la propriété "color" et retournera "green"
Définition de propriétés CSS

Vous vous doutez bien que s'il est possible de récupérer la valeur d'une propriété CSS spécifique, il est aussi possible d'en définir et d'en modifier. Pour cela, il suffit de passer un deuxième argument à la méthode, qui contiendra la valeur à donner à l'attribut :

$('p').css('color', 'red'); // ma méthode modifiera la propriété "color" et la définira à "red"

Il est également possible de définir plusieurs propriétés CSS en même temps, grâce à un objet JavaScript que l'on passera en tant qu'argument. Il suffira de séparer les différents attributs par une virgule :

$('p').css({
    color : 'red', // couleur rouge
    width : '300px', // largeur de 300px
    height : '200px' // hauteur de 200px
});

Une chose est à retenir pour cette troisième façon de faire : il ne faut pas oublier que les tirets ne sont pas acceptés dans les identifiants d'un objet ! Pour parer à ce problème, il vous faut soit mettre la première lettre de chaque mot en majuscule, sans séparer ceux-ci, soit mettre le nom de la propriété entre guillemets ou apostrophes :

$('p').css({
    borderColor : 'red', // bordure rouge
    paddingRight : '30px', // marge intérieure de 30px
    'margin-left' : '10px' // marge extérieure de 10px
});

Manipuler le code CSS avec jQuery Positionner des éléments

Positionner des éléments

Une méthode puissante : css() Gérer les dimensions

Positionner des éléments

La position des éléments d'une page web peut se définir avec la méthode css(), en modifiant les propriétés left, top, right et bottom. Parallèlement, des méthodes en jQuery permettent de faire ceci de manière plus propre :

Ces méthodes ne fonctionnent qu'avec deux objets, qui sont left (axe horizontal x) et top (axe vertical y). Souvenez-vous que les données ont pour origine le coin en haut à gauche de la page. Ainsi, pour récupérer la valeur de la position d'un élément :

$('p').offset().left; // retourne la valeur "left" de l'élément (position absolue)

$('p').position().top; // retourne la valeur "top" de l'élément (position relative)
Modifier la position d'un élément

Il est possible de spécifier une nouvelle position à un élément, en passant par les méthodes précédentes. Il suffit de passer un objet en tant qu'argument, en donnant les nouvelles valeurs (en pixels) aux identifiants left et top :

$('p').offset({
    left : 30,
    top : 200
});

$('p').position({
    left : 200
});

Chaque méthode transforme l'objet donné (l'élément de la page web), et lui définit automatiquement une position absolue ou relative.


Une méthode puissante : css() Gérer les dimensions

Gérer les dimensions

Positionner des éléments TP : le formulaire interactif

Gérer les dimensions

De même que pour les positions d'un élément, les dimensions peuvent être gérées directement avec css(). Cependant, plusieurs autres méthodes sont très pratiques pour gérer la hauteur et la largeur d'un bloc. Il s'agit des fonctions suivantes :

Le box model est un concept à connaître lorsque l'on manipule les dimensions avec jQuery. Conrètement, il faut retenir qu'il y a plusieurs types de largeur et d'hauteur. Les marges intérieures, les bordures et les marges extérieures sont des éléments à prendre en compte, et c'est pourquoi jQuery a créé plusieurs méthodes pour répondre à ce système.

Image utilisateur

Mais comment prendre en compte les marges extérieures ? o_O

Pour cela, il faut passer la valeur true aux méthodes outerHeight() et outerWidth().

$('p').height(); // retourne la hauteur stricte du paragraphe

$('p').innerWidth(); // retourne la largeur (avec marges intérieures) du paragraphe

$('p').outerWidth(); // retourne la largeur (avec marges intérieures + bordures) du paragraphe

$('p').outerHeight(true); // retourne la hauteur (avec marges intérieures + bordures + marges extérieures) du paragraphe

Le style CSS d'une page web est facilement modifiable, et il est possible de réaliser d'excellentes choses si on couple ce système avec les évènements. Si vous n'avez pas tout à fait compris le chapitre, nous vous invitons à le relire, car c'est une part importante de jQuery.

Le prochain chapitre sera sous forme de TP : vous allez enfin pouvoir mettre en pratique vos nouvelles connaissances ! :)


Positionner des éléments TP : le formulaire interactif

TP : le formulaire interactif

Gérer les dimensions Explications et pré-requis

Bienvenue dans votre premier Travail Pratique !

Cela va être l'occasion pour vous de mettre en pratique tout ce que vous venez d'apprendre à travers les chapitres de cette partie sur les bases de jQuery. Préparez-vous bien, et n'hésitez pas à relire les chapitres que vous n'avez pas compris. Vous allez vous charger de créer un formulaire interactif !

Explications et pré-requis

TP : le formulaire interactif Correction

Explications et pré-requis

Le but de ce travail pratique est de réaliser un formulaire interactif, que l'on animera grâce à jQuery. Ce sera un formulaire très basique, avec quatre ou cinq champs au maximum, qui verront leur style CSS changer suivant l'action de l'utilisateur. Le but est en fait de vérifier les informations entrées : nombre de caractères, vérifier que la confirmation du mot de passe est identique à celui-ci, vérifier si tous les champs sont remplis, etc.

Objectif concret

Ce formulaire devra contenir quatre champs :

De même, deux boutons devront permettre respectivement d'envoyer les données, et de vider les champs. Pas de langage serveur pour ce TP : tout devra se dérouler dans le côté client. Évidemment, vous devrez vous assurer par la suite, lorsque vous coderez pour des projets destinés au grand public, que les données sont bonnes du côté serveur, c'est très important car le JavaScript peut être contourné !

Pour le moment, le but est juste de vous faire pratiquer. Vous devrez vous assurer que l'utilisateur rentre les bonnes infos, de la bonne manière :

Pour indiquer l'erreur au visiteur, il vous suffira d'utiliser CSS : une bordure de champ de couleur rouge ferait par exemple l'affaire. De la même manière, si le champ est bon, vous pourriez changer la couleur du champ adéquat en vert.

Méthodes requises

Pour pouvoir réaliser cela, vous allez devoir user des évènements, vous ne pourrez rien faire sans. De même, la manipulation du CSS doit être maîtrisée afin de pouvoir animer les champs. N'oubliez pas que vous devez traiter tous les cas, car il ne faut jamais faire confiance à l'utilisateur.

Pour récupérer le contenu d'un champ, vous devrez utiliser une méthode que nous n'avons pas encore traitée : val(). La propriété length vous permettra, elle, de récupérer la longueur d'une chaîne de caractère.

Nous vous donnons la structure HTML que nous utilisons, mais absolument rien ne vous empêche de créer la votre ! :)

<div id="erreur">
    <p>Vous n'avez pas rempli correctement les champs du formulaire !</p>
</div>

<form>
    <label for="pseudo">Pseudonyme</label> <input type="text" id="pseudo" class="champ" /><br /><br />
    <label for="mdp">Mot de passe</label> <input type="password" id="mdp" class="champ" /><br /><br />
    <label for="confirmation">Confirmation</label>  <input type="password" id="confirmation" class="champ" /><br /><br />
    <label for="mail">E-mail</label> <input type="text" id="mail" class="champ" /><br /><br />
    <input type="submit" id="envoi" value="Envoyer" /> <input type="reset" id="rafraichir" value="Rafraîchir" />
</form>

TP : le formulaire interactif Correction

Correction

Explications et pré-requis Améliorations

Correction

Alors, avez-vous réussi ? ^^

Nous vous proposons une correction. Si vous n'avez pas réussi à obtenir quelque chose de correct, nous vous conseillons vivement d'être attentif à la correction, vous comprendrez ainsi vos erreurs, et ne les referez plus (n'est-ce pas ? :-° ).

La structure HTML que nous avons utilisé est la suivante, pour rappel :

<div id="erreur">
    <p>Vous n'avez pas rempli correctement les champs du formulaire !</p>
</div>

<form>
    <label for="pseudo">Pseudonyme</label> <input type="text" id="pseudo" class="champ" />
    <label for="mdp">Mot de passe</label> <input type="password" id="mdp" class="champ" />
    <label for="confirmation">Confirmation</label>  <input type="password" id="confirmation" class="champ" />
    <label for="mail">E-mail</label> <input type="text" id="mail" class="champ" />
    <input type="submit" id="envoi" value="Envoyer" /> <input type="reset" id="rafraichir" value="Rafraîchir" />
</form>

Formulaire basique, contenant quatre champs et deux boutons, précédé d'un bloc invisible contenant un message d'erreur. La suite était plutôt simple : il ne fallait surtout pas oublier d'inclure le fichier du framework, sinon vous ne pouviez pas utiliser jQuery :

<div id="erreur">
    <p>Vous n'avez pas rempli correctement les champs du formulaire !</p>
</div>

<form>
    <label for="pseudo">Pseudonyme</label> <input type="text" id="pseudo" class="champ" />
    <label for="mdp">Mot de passe</label> <input type="password" id="mdp" class="champ" />
    <label for="confirmation">Confirmation</label>  <input type="password" id="confirmation" class="champ" />
    <label for="mail">E-mail</label> <input type="text" id="mail" class="champ" />
    <input type="submit" id="envoi" value="Envoyer" /> <input type="reset" id="rafraichir" value="Rafraîchir" />
</form>

<!-- on inclut la bibliothèque depuis les serveurs de Google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Le reste, c'était à faire au niveau du jQuery ! :)

Explications du code jQuery

La première des choses à laquelle penser était de s'assurer que le document était chargé. Pour cela, vous deviez utiliser l'évènement ready(), comme appris au début de cette partie.

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

Une des bonnes pratiques à adopter est de mettre vos objets jQuery dans des variables. Cela n'est pas obligatoire, mais ça permet un gain d'optimisation conséquent, ainsi qu'une plus grande lisibilité dans le code. En suivant cela, il fallait déterminer quels éléments sélectionner :

$(document).ready(function(){
    
    var $pseudo = $('#pseudo'),
        $mdp = $('#mdp'),
        $confirmation = $('#confirmation'),
        $mail = $('#mail'),
        $envoi = $('#envoi'),
        $reset = $('#rafraichir'),
        $erreur = $('#erreur'),
        $champ = $('.champ');

});

Le plus facile étant fait, je vous propose ensuite de déterminer quel évènement vous deviez utiliser. La bonne façon de faire était d'écouter le clavier de l'utilisateur, grâce à l'évènement keyup(), et ce sur chaque champ du formulaire. Il suffisait ensuite de vérifier avec une condition que la longueur de la chaîne de caractère était supérieure à 5, grâce à la méthode val() et à la propriété length que nous vous avions donnés :

// le code précédent se trouve ici

$champ.keyup(function(){
    if($(this).val().length < 5){ // si la chaîne de caractères est inférieure à 5
        $(this).css({ // on rend le champ rouge
            borderColor : 'red',
	    color : 'red'
        });
     }
     else{
         $(this).css({ // si tout est bon, on le rend vert
	     borderColor : 'green',
	     color : 'green'
	 });
     }
});

Le principe était similaire pour vérifier que la confirmation et le mot de passe était identique :

$confirmation.keyup(function(){
    if($(this).val() != $mdp.val()){ // si la confirmation est différente du mot de passe
        $(this).css({ // on rend le champ rouge
	    borderColor : 'red',
	    color : 'red'
        });
    }
    else{
	$(this).css({ // si tout est bon, on le rend vert
	    borderColor : 'green',
	    color : 'green'
	});
    }
});

Nous devons maintenant nous occuper des boutons d'envoi et de rafraîchissement. Dans le premier cas, il faut vérifier chaque champ un à un, pour voir si l'un d'entre eux est vide. Si c'est effectivement le cas, il faudra l'indiquer à l'utilisateur en affichant le message d'erreur, et également en rendant rouge le champ vide.
Il y a plusieurs façons d'y parvenir, et celle que nous utiliserons ici n'est pas la meilleure. Il existe une méthode spécialement adaptée pour traiter chaque élément trouvé un à un, mais nous ne vous avons pas encore appris comment l'utiliser. A la place, vous pouviez créer une fonction qui se chargeait de vérifier que le champ donné n'était pas vide :

function verifier(champ){
    if(champ.val() == ""){ // si le champ est vide
    	$erreur.css('display', 'block'); // on affiche le message d'erreur
        champ.css({ // on rend le champ rouge
    	    borderColor : 'red',
    	    color : 'red'
    	});
    }
}

En écoutant le clic sur le bouton d'envoi, on pouvait ensuite lancer la fonction de vérification sur chaque champ :

$envoi.click(function(e){
    e.preventDefault(); // on annule la fonction par défaut du bouton d'envoi

    // puis on lance la fonction de vérification sur tous les champs :
    verifier($pseudo);
    verifier($mdp);
    verifier($confirmation);
    verifier($mail);
});

Le reste était simplissime. Il fallait écouter le clic sur le bouton de rafraîchissement, et annuler tous les styles CSS sur le formulaire :

$reset.click(function(){
    $champ.css({ // on remet le style des champs comme on l'avait défini dans le style CSS
        borderColor : '#ccc',
    	color : '#555'
    });
    $erreur.css('display', 'none'); // on prend soin de cacher le message d'erreur
});

Et voilà, nous avons désormais terminé ! Avouez que ce n'était tout de même pas sorcier. :D

$(document).ready(function(){
    
    var $pseudo = $('#pseudo'),
        $mdp = $('#mdp'),
        $confirmation = $('#confirmation'),
        $mail = $('#mail'),
        $envoi = $('#envoi'),
        $reset = $('#rafraichir'),
        $erreur = $('#erreur'),
        $champ = $('.champ');

    $champ.keyup(function(){
        if($(this).val().length < 5){ // si la chaîne de caractères est inférieure à 5
            $(this).css({ // on rend le champ rouge
                borderColor : 'red',
	        color : 'red'
            });
         }
         else{
             $(this).css({ // si tout est bon, on le rend vert
	         borderColor : 'green',
	         color : 'green'
	     });
         }
    });

    $confirmation.keyup(function(){
        if($(this).val() != $mdp.val()){ // si la confirmation est différente du mot de passe
            $(this).css({ // on rend le champ rouge
     	        borderColor : 'red',
        	color : 'red'
            });
        }
        else{
	    $(this).css({ // si tout est bon, on le rend vert
	        borderColor : 'green',
	        color : 'green'
	    });
        }
    });

    $envoi.click(function(e){
        e.preventDefault(); // on annule la fonction par défaut du bouton d'envoi

        // puis on lance la fonction de vérification sur tous les champs :
        verifier($pseudo);
        verifier($mdp);
        verifier($confirmation);
        verifier($mail);
    });

    $reset.click(function(){
        $champ.css({ // on remet le style des champs comme on l'avait défini dans le style CSS
            borderColor : '#ccc',
    	    color : '#555'
        });
        $erreur.css('display', 'none'); // on prend soin de cacher le message d'erreur
    });

    function verifier(champ){
        if(champ.val() == ""){ // si le champ est vide
    	    $erreur.css('display', 'block'); // on affiche le message d'erreur
            champ.css({ // on rend le champ rouge
    	        borderColor : 'red',
    	        color : 'red'
    	    });
        }
    }

});

Le code entier faisant moins de 100 lignes, autant vous dire que si vous n'aviez utilisé que du JavaScript pur, vous en auriez eu au moins le double ! C'est à ce moment là qu'on se rend compte de l'efficacité de jQuery. Nous espérons que ce TP vous aura permis de progresser, car la pratique est le meilleur moyen pour obtenir un certain niveau.


Explications et pré-requis Améliorations

Améliorations

Correction Des effets sur votre site avec jQuery !

Améliorations

Ce formulaire peut encore être amélioré, dans le sens où vous pourriez restreindre encore plus les possibilités de l'utilisateur, en interdisant de dépasser un certain nombre de caractères dans le pseudo, par exemple. De même, le style est pour l'instant ultra basique, rien ne vous empêche de le sophistiquer, pour que l'expérience utilisateur soit poussée à son maximum.

Quelques améliorations au niveau de la sécurité pourraient être apportées :

Le formulaire étant très basique, des champs auraient eu leur place, comme le sexe, l'âge, la localisation ou même le prénom. Essayez de faire cela vous-même, cela ne sera que bénéfique et positif pour votre apprentissage, croyez-nous ! :)

Ce TP ne vous a-t-il pas trop fatigué ? Non ? Tant mieux, car la suite va être encore pire ! :diable:

La prochaine partie sera consacrée à la manipulation du code HTML à la volée, directement dans la page, grâce aux fonctions de parcours, aux attributs et à la manipulation du DOM. Vous verrez également comment maîtriser l'animation de vos éléments avec jQuery, ce qui est une très bonne chose quand on sait que c'est l'un des plus gros points forts du framework ! Trêve de bavardage, nous vous invitons à passer à la suite, pour que vous puissiez subir un nouveau TP le plus vite possible. :D


Correction Des effets sur votre site avec jQuery !

Des effets sur votre site avec jQuery !

Améliorations Animez vos éléments

Vous voilà dans la troisième partie !

Nous allons passer à la vitesse supérieure, car vous avez les bases en jQuery. Dans cette partie, nous verrons comment parcourir le DOM, modifier le code HTML à la volée, et comment animer concrètement votre site web. Cette dernière chose sera étudiée dans ce chapitre, avec ce qu'on appelle les effets.

Animez vos éléments

Des effets sur votre site avec jQuery ! Les effets natifs

Animez vos éléments

Une des plus puissantes fonctionnalités de jQuery est sans doute l'animation. En effet, le framework vous permet de lancer des effets sur absolument tout et n'importe quoi. Mais concrètement, comment cela se passe-t-il ? Le mécanisme est en fait très simple si on l'aborde de manière théorique : c'est simplement une propriété CSS qui se déroulera pendant un interval de temps, donné en millisecondes.

Une méthode native de jQuery permet de gérer l'animation des éléments : il s'agit de animate().

Des animations personnalisées

La méthode animate() est très puissante dans le sens où elle peut recevoir une foule d'arguments différents. Le principe d'utilisation le plus fréquent que vous aurez à appliquer est de passer un objet à la méthode, contenant les propriétés CSS à animer. Oui, vous l'aurez de suite compris : c'est la même chose que pour la méthode css() !

La différence avec cette dernière méthode, c'est que animate() peut définir en plus :

Ces arguments sont facultatifs ; par défaut, ils sont réglés respectivement à normal, swing et null. Nous verrons plus tard ce que ces valeurs signifient, et comment les modifier.

$('p').animate({
    width : '150px',
    fontSize : '35px', // ne pas oublier la syntaxe de l'identifiant !
    marginTop : '50px'
});

Lors du lancement de cette animation, mon paragraphe s'élargira, se déplacera par rapport à la hauteur du document, et verra sa taille de police se fixer à 35px.

duration : le temps de déroulement

Le temps de déroulement d'une animation est un facteur important : en effet, si votre animation est trop rapide, l'utilisateur risque de ne pas la voir. D'un autre côté, si elle est trop lente, il s'ennuiera et trouvera votre site web lourd et sans intérêt. Il va donc vous falloir trouver la bonne durée pour lancer votre animation. Cela dépendra notamment de son ampleur sur le visiteur : par exemple, si vous faites disparaître un sous-menu, cela sera plus rapide que si vous agrandissez un paragraphe de façon gigantesque. Il faut vous adapter.

L'argument peut prendre deux types de valeur : une chaîne de caractère (string) ou un nombre entier (int), qui représentera le temps en millisecondes (nous insistons là-dessus, beaucoup de débutants font l'erreur). La chaîne de caractère ne peut être qu'un de ces trois mots :

$('p').animate({
    width : '150px'
}, 'fast'); // premier exemple avec la valeur fast (200ms)

$('p').animate({
    width : '150px'
}, 1000); // second exemple avec 1000ms (= 1s)
easing : l'évolution de l'animation

L'évolution de l'animation est la façon dont va se dérouler celle-ci : est-ce qu'elle va aller de plus en plus vite au cours du temps ? Va-t-elle rester constante ? Actuellement, jQuery ne propose malheureusement que deux façons de dérouler l'animation :

Pour user de plus de fonctions, il faudra passer par un plugin externe tel que jQuery UI. Nous apprendrons plus tard comment les mettre en place. :)

$('p').animate({
    width : '150px'
}, 'linear'); // l'animation se déroulera de façon linéaire
complete : la fonction de retour

La fonction de retour, plus communément appelée callback, est une action qui se lancera une fois l'animation terminée. Il suffit de donner une fonction anonyme en guise d'argument :

$('p').animate({
    width : '150px'
}, function(){
    alert('Animation terminée !');
});
Deux arguments supplémentaires : step et queue

Ces deux arguments, step et queue, ne peuvent être modifiés qu'avec une certaine manière de régler les arguments de la méthode animate(). Ils ne sont pas directement accessibles : il vous faudra passer par un objet comme second argument.

Passer par un objet

Vous savez que le premier argument de la méthode est un objet, contenant chaque propriété à animer. Ce qui est intéressant, c'est que les autres arguments peuvent se trouver sous forme d'objet eux aussi. Ainsi, ces deux animations feront exactement la même chose :

$('p').animate({
    width : '150px'
}, 1000, 'linear', function(){
    alert('Animation terminée !');
}); 

// ce code est égal à celui-ci :

$('p').animate({
    width : '150px'
}, {
    duration : 1000,
    easing : 'linear',
    complete : function(){
        alert('Animation terminée !');
    }
});

Ainsi, vous pourrez aussi agir sur les deux arguments step et queue :

Le second argument est utile si vous avez un chaînage d'animation ou plusieurs animations à la suite ; si vous voulez les lancer toutes en même temps, vous devrez mettre la valeur false : ainsi, les méthodes n'attendront pas la fin de la précédente avant de se lancer. Dans le cas contraire, queue devra être défini à true.

$('p')
    .animate({
        width : '150px'
    }, {
        duration : 1000,
        queue : false
    })
    .animate({
        fontSize : '35px'
    }, 1000);

// les deux animations se lanceront en même temps
Définition directe d'attributs

Il est possible que vous vouliez attribuer une accélération différente à chaque propriété CSS animée. C'est tout à fait possible de faire cela depuis la version 1.4 du framework ! :) On utilisera en général la première façon de faire, mais sachez qu'il en existe deux : on peut passer par un tableau (array) ou une propriété dans le second argument (object).

Pour la première méthode, vous devrez donner la nouvelle valeur de la propriété CSS dans un tableau, suivie du type d'accélération (swing ou linear pour le moment).

$('p').animate({
    fontSize : ['50px', 'linear'], // cette propriété s'animera de façon linéaire
    width : '200px' // les autres s'animeront de la façon définie ensuite : swing
}, 'swing');

La seconde méthode est un peu plus compliquée à mettre en place, dans le sens où vous devrez donner un objet à un identifiant d'un objet (qui, rappelons-le, est lui-même un argument de la méthode d'animation). La propriété à définir se nomme specialEasing :

$('p').animate({
    fontSize : '50px',
    width : '200px'
}, 
{
    easing : 'swing'
    specialEasing : { // on définit la propriété
        fontSize : 'linear' // puis on liste toutes les propriétés CSS dans un objet en donnant leur évolution
    }
});
Astuces et cas spéciaux

Il nous reste encore quelques petites choses à mettre au point avant de passer à la suite. En effet, nous n'avons pas encore parlé de certaines pratiques, qui méritent pourtant une place dans ce tutoriel. :D

Animer les couleurs

Vous l'aurez peut-être remarqué si vous avez testé quelques codes de votre côté, jQuery ne permet pas encore de traiter les animations sur les couleurs. C'est bien dommage, car elles sont un élément important du style d'une page web. Pas de panique, car un développeur jQuery a créé un petit plugin open-source (sources libres) permettant de faire cela.

Nous vous invitons à le télécharger à cette adresse (fichier jquery.color.js à inclure dans votre page). Une fois inclus, vous pourrez animer toutes les couleurs de n'importe quelle propriété :

$('p').animate({
    color : 'red',
    backgroundColor : 'green'
});
Ajout de valeurs

Une astuce très pratique en jQuery, c'est qu'il est possible d'ajouter une valeur à une propriété CSS. Le principe est similaire à l'ajout de valeur en JavaScript : vous devez passer par les préfixes += ou -=.

$('p').animate({
    width : '+=50px', // ajoute 50px à la largeur
    height : '-=20px' // enlève 20px à la hauteur
});
Animer les barres de défilement

En CSS, il est impossible d'agir sur les barres de défilement. C'est différent en JavaScript, et surtout en jQuery, qui met un point d'honneur à pouvoir les animer ! Les deux propriétés à influencer sont donc les suivantes :

Elles s'animent exactement de la même façon que les autres propriétés.

Les trois états additionnels

Pas vraiment utilisés ni très connus, ces trois états ne sont autres que show, hide et toggle. Pourquoi disons-nous qu'ils ne sont pas très utilisés ? Parce que des méthodes spéciales existent, et sont bien plus rapides à mettre en place pour avoir le même résultat.

Néanmoins, nous pensons que vous pouvez en avoir parfois l'utilité. Et si ce n'est pas le cas, un peu de culture ne vous fera pas de mal, n'est-ce pas ? :p

Ces états permettent d'agir seulement sur la propriété qui les utilise. Concrètement, ils réalisent ces actions :

Ils s'utilisent donc de cette façon :

$('p').animate({
    width : 'show' // anime la largeur pour afficher le paragraphe
});

$('p').animate({
    width : 'hide' // anime la largeur pour cacher le paragraphe
});

$('p').animate({
    width : 'toggle' // anime la largeur pour cacher ou afficher le paragraphe
});

Des effets sur votre site avec jQuery ! Les effets natifs

Les effets natifs

Animez vos éléments Reprenez le contrôle des effets

Les effets natifs

Certains puristes nous diront qu'on ne peut pas parler de nativité avec un framework, car ce n'est pas un langage à proprement parlé. Néanmoins, jQuery est tellement à part et redéfinit tellement de notions que nous pensons pouvoir nous permettre de faire ce petit abus de langage. :)

Maintenant que c'est clair, vous vous posez surement une question : que sont les effets natifs de jQuery ?

Le retour des trois états

Nous avions parlé brièvement des trois états show, hide et toggle, qui pouvaient être utilisés avec les propriétés CSS directement dans la méthode animate(). C'était bien jusqu'à maintenant, mais sachez que des méthodes spéciales existent justement pour faire cela !

Comme vous l'aurez surement deviné, il s'agit des fonctions :

Ces méthodes fonctionnent toutes de la même façon, et prennent le même type d'arguments : duration, qui est, pour rappel, la durée de déroulement en millisecondes, et complete, l'éternelle fonction de retour. Ils sont facultatifs.

$('p').hide('slow'); // cache le paragraphe en 600ms

$('p').show('fast', function(){
    alert('Paragraphe affiché !');
}); // affiche le paragraphe en 200ms, et lance une alerte à la fin de l'animation
Le cas de toggle()

La méthode toggle() est un peu particulière, étant donné qu'elle agit sur l'objet jQuery en fonction de son état courant : s'il est caché, elle l'affiche, s'il est affiché, elle le cache. Là où vous devez vous rendre compte de son utilité, c'est qu'elle accepte un argument de condition. Vous pouvez agir dessus grâce à un booléen, par exemple. Si on lui indique true, elle affichera l'élément, si on lui indique false, elle fera l'inverse.

$('p').toggle(true); // aura le même rôle que show()

$('p').toggle(false); // aura le même rôle que hide()
Des méthodes plus esthétiques

Afficher et cacher des éléments, c'est bien, le faire esthétiquement, c'est mieux ! Ainsi, jQuery propose six méthodes permettant de faire exactement la même chose que les fonctions vues précédemment, mais de façon plus travaillée. Comprenons-nous bien : la finalité est exactement la même.

Dérouler et enrouler

Vous avez sans doute déjà vu des sites web utilisant ce genre de chose, pour un système de « dérouler / enrouler » notamment. Pour réaliser cela, rien de plus simple :

Les arguments ne changent pas, ils sont les mêmes que pour show(), hide() et toggle().

Apparition et disparition

On va jouer ici sur l'opacité de l'élément influencé.

Le framework met également à disposition une fonction permettant de contrôler l'opacité finale de l'élément animé. Il s'agit de fadeTo(), qui prend en argument obligatoire un nombre décimal (float) entre 0 et 1 indiquant l'opacité.

$('p').fadeTo('normal', 0.5); // ajuste l'opacité et la fixe à 0.5

Animez vos éléments Reprenez le contrôle des effets

Reprenez le contrôle des effets

Les effets natifs Manier les attributs

Reprenez le contrôle des effets

Faire des effets avec jQuery, c'est bien, mais avoir un total contrôle sur eux, c'est encore mieux ! Rappelez-vous toujours que la politique du framework est de vous offrir un maximum de souplesse et de possibilités dans votre code. Ainsi, il existe des méthodes qui ont pour rôle de vous aider à maîtriser vos effets : quand les déclencher, les arrêter, les ordonner, et même les influencer !

Vous allez voir dans cette partie tout ce qui traite la manipulation des animations.

Le concept de file d'attente

Vous ne le savez peut-être pas, mais ce système, vous l'utilisez à chaque fois que vous animez un élément d'une page web. Les méthodes permettant d'animer sont toutes basées dessus : ainsi, si vous avez quatre animations différentes, elles se dérouleront dans l'ordre chronologique, en attendant que la précédente se termine avant de se lancer. C'est ce qu'on appelle les files d'attente en jQuery. Plus concrètement, en employant le jargon technique, c'est simplement un tableau qui va lister les fonctions et les exécuter une à une jusqu'à arriver au terme. En anglais, on l'appelera queue.

Manipuler le tableau de fonctions

Il est possible de manipuler le tableau de fonctions, la queue, grâce à une méthode au nom éloquent : queue(). Cette fonction est à utiliser sur un élément qui subit une ou plusieurs animations. En modifiant certains arguments, vous serez ainsi capable de modifier directement l'array !

$('p').fadeOut();
$('p').fadeIn();
$('p').slideUp();
$('p').slideDown();

var fileAttente = $('p').queue('fx'); // je stocke la file d'attente, le tableau, dans une variable

alert(fileAttente.length); // renvoie 4

Pour rajouter une fonction dans la file d'attente, il suffit de passer ladite fonction en tant qu'argument.

$('p').fadeOut();
$('p').fadeIn();
$('p').slideUp();
$('p').slideDown();

$('p').queue(function(){
    alert('Nouvelle fonction dans la file !'); // alerte s'affichant à la fin de la file
});

Enfin, la dernière chose possible à faire est de carrément remplacer le tableau par un nouveau, que vous aurez créé directement. Cela n'a pas énormément d'intérêt, mais c'est notamment utile dans le cas où vous voulez vider l'array, ce qui a pour effet d'annuler toute animation.

$('p').fadeOut();
$('p').fadeIn();
$('p').slideUp();
$('p').slideDown();

$('p').queue('fx', []); // fait disparaître le paragraphe, puis vide la file d'attente
Ordonner la file d'attente

Préparez votre cerveau à résoudre des casses-tête, parce que la méthode que nous allons voir est un peu difficile à utiliser. Il s'agit de dequeue(), une fonction qui permet de stopper l'animation en cours de la file d'attente, et de passer à la suivante. Prenons un petit exemple concret :

$('p')
    .animate({
        fontSize : '+=100px'
    })
    .queue(function(){
        alert('Bonjour !');
        $(this).dequeue();
    })
    .animate({
        fontSize : '-=50px'
    })
    .queue(function(){
        alert('Au revoir !');
        $(this).dequeue();
    });

Si on analyse l'action de ce code, il se passe ceci :

  1. la taille de la police augmente de 100 pixels,

  2. une nouvelle fonction est ajoutée à la file,

  3. une alerte affiche « Bonjour ! »,

  4. la méthode dequeue() permet de lancer l'animation suivante ;

  5. la taille de la police baisse de 50 pixels,

  6. une nouvelle fonction est ajoutée à la file,

  7. une alerte affiche « Au revoir ! »,

  8. la méthode dequeue() permet de ne pas entraver les futures animations sur l'élément.

Suppression de fonctions non exécutées

Pour une raison x ou y, vous pouvez tout à fait stopper la file d'attente grâce à une méthode. Le rôle de clearQueue() est de supprimer toutes les fonctions de la file d'attente qui n'ont pas encore été exécutées. Une autre méthode nous permet de faire cela de façon un peu moins élaborée, que nous verrons ensuite.

$('p').animate({
    fontSize : '100px'
})
.queue(function(){ // on ajoute une fonction à la file d'attente
    alert('Bonjour !');
})
.clearQueue(); // empêche l'alerte de s'afficher
Arrêter les animations

Méthode très utilisée s'il en est, stop() a pour fonction première de... stopper une animation, c'est exactement ça. :p Elle peut prendre deux arguments au maximum, zéro au minimum. On l'utilisera le plus souvent pour éviter de lancer le même effet plusieurs fois de suite sans pouvoir l'arrêter : un code JavaScript, ça fait ce qu'on lui dit de faire sans se soucier d'autre chose. Par exemple, imaginez qu'un utilisateur, lorsqu'il clique sur un bouton, lancer une animation spécifique. S'il clique plusieurs fois de suite sans attendre la fin de l'animation, celle-ci va s'exécuter autant de fois qu'on le lui aura indiqué !

Arrêter une animation est donc une sécurité, l'assurance qu'elle ne se lancera pas des dizaines et des dizaines de fois sans pouvoir rien y faire. Les deux arguments possibles permettent :

Les cas que vous pourriez définir sont donc les suivants :

Désactivation

Enfin, pour terminer, sachez qu'une propriété permet de désactiver toutes les animations de la page. Il suffit de passer à true la propriété jQuery.fx.off.

Ouf ! C'était un chapitre assez conséquent, vous ne trouvez pas ?

Les chapitres suivants seront un peu moins difficiles à avaler, mais il faudra rester concentré, car nous abordons la manipulation du DOM.


Les effets natifs Manier les attributs

Manier les attributs

Reprenez le contrôle des effets Gestion générale des attributs

Après un chapitre assez long, qui concernait les animations, nous vous proposons de voir ce que sont les attributs, et comment les influencer avec jQuery. C'est une part assez importante également, donc soyez attentif et n'hésitez pas à vous arrêter pour faire quelques essais.

Gestion générale des attributs

Manier les attributs Gérer les classes proprement

Gestion générale des attributs

Avant de se lancer dans une foule d'explications toutes plus passionnantes les unes que les autres, il faut déjà savoir ce que l'on va traiter. Dans notre cas, il s'agit des attributs.

Bref rappel sur les attributs

En HTML, les attributs sont contenus dans des balises. Ils définissent en quelque sorte comment le navigateur doit interpréter un élément d'une page web. Pour être bref et concis :

Citation : M@teo21

Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires.

Sachez qu'il est possible d'influencer ces attributs avec jQuery, et donc de réaliser une foule de choses rien qu'avec une seule méthode, au moins aussi utilisée que css() et animate() : attr() !

Récupérer des valeurs

La fonction première de attr() est de pouvoir récupérer la ou les valeur(s) d'un attribut d'une balise. Il suffit de passer le nom de l'attribut souhaité en tant qu'argument :

var cheminImage = $('img').attr('src'); // rentre le contenu de l'attribut src dans une variable
(Re)définir un attribut

La seconde utilisation possible de cette méthode est de définir, ou redéfinir un attribut en passant par un deuxième argument. Comprenez par là que même si l'attribut donné n'existe pas dans la balise, il sera créé automatiquement. De même, la nouvelle valeur donnée écrasera celle en place si elle est déjà définie.

$('img').attr('src', 'nouveauChemin/photo.png'); // change l'attribut src en écrasant l'ancienne valeur

$('img').attr('title', 'Nouvelle photo'); // créé l'attribut title dans l'élément s'il n'existe pas
Passer par un objet

Par souci de performance, on préféra passer par un objet si l'on a plusieurs attributs à influencer en même temps. Les multiples appels d'un même objet jQuery sont à éviter, car ils sont gourmands et vos visiteurs risquent de ne pas apprécier si l'attente se révèle trop longue. Il est alors possible de chaîner les méthodes pour ne pas récupérer plusieurs fois de suite le même objet jQuery, mais là encore, vous devrez taper plusieurs fois la même fonction, ce qui au final se révélera aussi lent.

Il existe alors une solution, qui est à utiliser si vous êtes dans ce cas-là. Il est possible de donner un objet en tant que paramètre à la méthode attr(), qui contiendra chaque attribut à modifier et leurs nouvelles valeurs respectives.

$('img').attr('src', 'nouveauChemin/photo.png');
$('img').attr('alt', 'Nouvelle photo');
$('img').attr('title', 'Nouvelle photo');
// mauvaise méthode

$('img').attr({
    src : 'nouveauChemin/photo.png',
    alt : 'Nouvelle photo',
    title : 'Nouvelle photo'
});
// bonne méthode
Utilisation d'une fonction anonyme

Une fonction anonyme peut être déclarée en tant que valeur de l'attribut, c'est-à-dire en second argument. L'utilité est assez contextuelle, mais sachez que cette méthode permet de récupérer deux données et d'en faire usage :

$('img').attr('alt', function(index, valeur){
    return index + 'ème élément - ' + valeur;
});
Supprimer un attribut

Jusque là, il est possible d'écraser un attribut en lui affectant une valeur nulle. Ce n'est pas très propre, mais ça fonctionne. Pourtant, une méthode a été conçue spécialement pour réaliser cela : removeAttr(). Il suffit de lui passer le nom de l'attribut en argument, et elle se charge de le supprimer définitivement du DOM.

$('img').removeAttr('title'); // supprime l'attribut title des images

Manier les attributs Gérer les classes proprement

Gérer les classes proprement

Gestion générale des attributs Parcourir les éléments du DOM

Gérer les classes proprement

Il est bien évidemment possible de gérer les classes des éléments de votre page avec la méthode que l'on a vu précédemment. Seulement, un problème se pose : comment faire si l'on veut rajouter une classe sans supprimer celle actuellement en place ? Les développeurs de jQuery se sont penchés sur le sujet, et ont fini par créer des méthodes spécialement adaptées aux classes. On en dénombre quatre pour le moment, et nous allons les voir ensemble.

Ajouter une classe

La méthode addClass() permet d'ajouter une classe à l'élément spécifié. Veillez à bien faire la différence avec la sous-partie précédente : nous avions défini des attributs, mais pas ajouté. L'ajout de classe signifie que la fonction prend en compte la ou les classe(s) déjà en place. Ainsi, vous pouvez donner plusieurs classes dynamiquement à un élément, ce qui était impossible avec attr() ! :) De même, il est possible d'ajouter plusieurs classes en même temps en les séparant par des espaces.

$('.vert').attr('class', 'rouge'); // cet élément aura la classe .rouge

$('.vert').addClass('rouge'); // cet élément aura les classes .vert et .rouge

$('.vert').addClass('rouge bleu jaune'); // cet élément aura les classes .vert, .rouge, .bleu et .jaune
Supprimer une classe

La suppression de classe se fait également avec une méthode adaptée, qui ressemble fortement à celle permettant de supprimer un attribut. removeClass() prend le nom d'une ou de plusieurs classe(s) en paramètre, et les supprime de l'élément sans influencer les autres.

$('p').removeClass('vert'); // supprime la classe .vert de l'élément

$('p').removeClass('vert rouge bleu'); // supprimer les classes .vert, .rouge et .bleu
Présence d'une classe

Pour vérifier qu'un élément possède bien une classe, il existe la fonction hasClass(). ELle ne peut prendre qu'un seul argument, et malheureusement qu'une seule classe à la fois. Elle est beaucoup utilisée dans les conditions, car elle retourne un booléen (soit true, soit false).

if( $('p').hasClass('vert') ){ // si l'élément possède la classe .vert
    alert('Ce paragraphe est vert !'); // on affiche une alerte
}
Switcher une classe

Vous connaissez déjà les méthodes telles que toggle(), qui permettent de basculer d'un état à l'autre. Lorsqu'on travaille avec les classes, il est parfois judicieux d'utiliser ce concept. Ainsi, la fonction toggleClass() permet d'ajouter ou de supprimer une classe donnée !

$('p').toggleClass('vert'); // ajoute la classe .vert si elle n'existe pas, sinon, la supprime

Vous pouvez contrôler l'action de cette méthode grâce à un second argument, sous la forme de booléen : true permettra d'ajouter la classe, alors que false la supprimera.

// ces deux codes sont équivalents :
$('p').addClass('vert');
$('p').toggleClass('vert', true);

// ces deux codes sont équivalents :
$('p').removeClass('vert');
$('p').toggleClass('vert', false);

Les attributs sont un passage obligatoire sur le chemin de la maîtrise du framework jQuery. Vous avez vu qu'ils sont extrêmement utiles, et croyez-nous : vous n'avez pas fini de les utiliser.

Dans le prochain chapitre, nous apprendrons à nous déplacer dans le DOM, pour exploiter chaque élément d'une page web dynamiquement !


Gestion générale des attributs Parcourir les éléments du DOM

Parcourir les éléments du DOM

Gérer les classes proprement Naviguer dans le DOM

Le parcours du DOM permet de se déplacer aisément sur la page, afin de récupérer certains éléments HTML. Un peu comme pour les sélecteurs, il faudra bien comprendre le principe de la descendance, car c'est un concept très puissant et très utilisé dans les langages orienté objet comme JavaScript, rappelez-vous-en !

Naviguer dans le DOM

Parcourir les éléments du DOM La descendance

Naviguer dans le DOM

Rappel sur le Document Object Model

Le Document Object Model, beaucoup plus couramment appelé DOM, permet littéralement de naviguer entre les éléments HTML. Nous rappelons qu'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 !

Vous vous en doutez, nous faisons constamment appel au DOM, même si en jQuery, on s'en rend beaucoup moins compte. En effet, même si nous n'avons pas encore appris à utiliser les fonctions de parcours, sachez que la sélection d'éléments, par exemple, use de certaines fonctions JavaScript qui ont besoin du DOM (c.f. getElementById()).

Positionnement des éléments

La position des éléments dans la structure d'une page HTML est très importante. C'est pourquoi on vous répète souvent : ayez un code propre, une structure claire et bien rangée, et vous aurez beaucoup plus de facilité à manipuler vos éléments en JavaScript ! Une sémantique bien faite, c'est un gain de temps et d'énergie. Prenons pour exemple un code HTML très mauvais, que l'on peut malheureusement rencontrer sur le web :

<div id="bloc">
<a href="#" id="lien">Un lien</a><a href="#" id="lien">Un autre lien</a>

<div>

<span class="paragraphe">Contenu</span>
<div></div>
</div>

Dans un cas comme celui-là, la sélection simple ne sera pas altérée ; en revanche, si vous devez parcourir le DOM pour ne pas devoir refaire une requête d'élément inutile, alors bonne chance ! :p Une bonne sémantique est primordiale, nous ne vous le répéterons jamais assez.


Parcourir les éléments du DOM La descendance

La descendance

Naviguer dans le DOM Filtrer et boucler les éléments

La descendance

Si on vous rabâche depuis quelques temps que la descendance est un concept très utilisé en programmation orientée objet, ce n'est pas pour rien : souvent apparentée à l'héritage, cette technique se base sur le principe de parents et d'enfants. Dans un contexte comme le nôtre, cela peut paraître un peu tiré par les cheveux comme méthode de travail, et pourtant, sans cela, il serait beaucoup plus compliqué de réaliser de véritables applications en jQuery !

Quelques chapitres auparavant, nous avons abordé rapidement la chose avec les sélecteurs, et plus précisément ceux-ci :

En effet, nous vous avions expliqué qu'une structure HTML permettait d'imbriquer des blocs les uns dans les autres : ceux étant à l'intérieur sont appelés enfants, ceux qui entourent un élément sont des parents. Le parcours du DOM va énormément se baser sur ce concept, à retenir et maîtriser absolument. Nous allons étudier quelques fonctions qui permettent d'accéder aux éléments, qu'ils soient parents, enfants, ou même frères ! :)

Parents, enfants et ancêtres

Commençons par une des fonctions de parcours les plus utilisées : parent(). Plus facile à retenir, tu meurs ! :p Comme vous vous en doutez, cette méthode 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 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
Image utilisateur

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

Cette méthode est néanmoins quelque peu restrictive : elle ne va cibler que les enfants directs d'un élément. Que se passerait-il si l'on voulait récupérer tous les fils et petits-fils d'un bloc ? On ne pourrait tout simplement pas, ou tout du moins avec children(). Car oui, bien heureusement, jQuery possède la fonction find(), qui 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(). N'oubliez pas le "s", car elle est légèrement différente de