Inauguration et introduction à jQuery
Inauguration de ce nouveau blog !
Eric, Gafour et moi-même, à travers l’expérience que nous accumulons chaque jour, allons essayer de faire quelque chose d’intelligent ici, et c’est loin d’être gagné !
Nous y parlerons standards, accessibilité, technique, organisation et méthodes de travail.
Commençons technique, avec cette bibliothèque Javascript que j’apprécie particulièrement :
jQuery
Il existe déjà quelques tutoriels et présentations sur jQuery, mais je vais essayer d’en expliquer les bases à ma façon, en espérant que ça puisse aider quelqu’un.
jQuery repose sur une seule fonction, c’en est d’ailleurs effrayant de simplicité : $()
. C’est tout.
Mmm… d’accord, je vais développer un peu.
Selon les paramètres que l’on va lui passer, cette fonction va réagir de différentes manières. Voici les types de paramètres que l’on peut lui passer :
Une fonction
Dans ce cas, jQuery va charger cette fonction lorsque la page sera chargée par le navigateur.
Mais pourquoi ne pas utiliser le classique window.onload = function(){}
?
Principalement parce que window.onload attend que la page et les éléments qu’elle contient soient complètement chargés, ce qui peut être très long.
Pour reprendre le processus :
- Le fichier html est téléchargé.
- Il est lu par le navigateur.
- Le navigateur commence à télécharger les éléments auxquels le fichier html fait référence (images, css…).
- Le code situé dans
$(function(){})
est exécuté dès que possible. - Lorsque tout est téléchargé, le code situé dans
window.onload = function(){}
est exécuté, en dernier.
Théoriquement, ce code devrait même être exécuté avant l’affichage, mais en réalité le navigateur peut commencer à afficher la page avant qu’elle ne soit complètement téléchargée.
De plus, les téléchargements ne se font pas un par un, car le navigateur n’attend pas qu’une image arrive pour en télécharger une autre, heureusement !
Voilà qui facilite le côté non-intrusif du Javascript :
Si un élément ne doit apparaître qu’au survol de la souris, par exemple, il faut bien que cet élément soit visible lorsque Javascript n’est pas activé : il peut alors simplement être placé dans le code de la page, et dissimulé en Javascript au chargement, pour réapparaître au survol, en une animation à couper le souffle !
On peut l’utiliser en stockant la fonction dans une variable pour la passer ensuite à jQuery :
var ma_fonction = function(){
// Tout ce qui est ici sera exécuté au chargement du DOM.
};
$(ma_fonction);
Ou, plus directement, en passant simplement une fonction anonyme à jQuery :
$(function(){
// Tout ce qui est ici sera exécuté au chargement du DOM.
});
Un élément, ou un tableau d’éléments DOM
Vous vous en doutiez, jQuery, cet insolent, n’est pas qu’un « super loader ».
En lui passant des éléments du DOM, la fonction $()
va nous renvoyer un objet jQuery qui va contenir les éléments qui lui ont été passés, et sur lesquels on va pouvoir user et abuser de toute la puissance de jQuery.
Un peu comme une grosse boîte magique, dans laquelle on va mettre tout ça.
Il est possible de passer un élément, ou un tableau d’éléments à jQuery.
Il va sans dire que le code suivant doit être placé dans le « chargeur » jQuery, vu juste au-dessus, pour être exécuté :
var mon_element = document.getElementById("id_de_mon_element_html");
var mon_objet_jquery = $(mon_element);
Une chaine de caractères
Notre formidable sens de la déduction nous a immédiatement permis de comprendre la raison du « j ». Mais pourquoi « Query » ?
En passant une chaine de catactères à la fonction $()
, nous allons lui demander de nous retourner un objet jQuery rempli d’éléments, sans même avoir à sélectionner préalablement les objets DOM.
– Sorcellerie !
Ecoutez, calmez vous et posez cette fourche, sinon nous allons avoir du mal à avancer.
Plusieurs possibilités vous permettront de sélectionner les éléments désirés : les sélecteurs CSS de niveaux 1 à 3, XPath, ainsi que quelques sélecteurs jQuery.
Les sélecteurs CSS
J’imagine que si vous lisez ceci, vous avez au moins une vague connaissance du langage CSS, et c’est merveilleux !
Prenons cette structure HTML :
<div id="fixe">
<h2>Je suis un titre, j'ai de l'importance.</h2>
<p class="ique">Ca va les chevilles là-haut ?</p>
<p>Lorem ipsum sont des mots qui vont très bien ensemble, très bien ensemble.</p>
</div>
Nous voulons sélectionner le premier élément <p>
.
Voici différentes possibilités :
// Sélection des éléments ayant pour classe "ique", dans l'élément ayant pour id "fixe"
var mon_objet_jquery = $("#fixe .ique");
// Sélection du premier élément <p> de l'élément <div>.
var mon_objet_jquery = $("div p:first-child");
// Sélection des éléments <p>, enfants directs d'un élement <div> et ayant pour classe "ique".
var mon_objet_jquery = $("div > p.ique");
Le langage CSS offre suffisamment de flexibilité pour permettre une sélection fine et souple.
Que se passe-t-il dans la boîte ? Comme vous vous en doutiez, ces sélecteurs CSS n’ont aucun rapport avec l’interprétation CSS de votre navigateur.
jQuery va lire cette phrase et la transformer en sélection DOM, mixer cette joyeuse troupe d’une façon dont vous n’aurez absolument pas à vous préoccuper, pour vous retourner précisément le résultat de votre requête, et le tout soigneusement emballé dans un objet jQuery, poil au nombril.
Imaginez le cas suivant : vous souhaitez sélectionner tous les éléments p ayant pour classe « ique ».
On peut alors utiliser la méthode getElementsByTagName("p")
, qui va nous retourner un tableau d’éléments p.
Nous pourrons ensuite trier ce tableau à l’aide d’une boucle, pour ne garder que ceux ayant pour classe « ique ». On imagine sans peine les quelques lignes nécessaires à une sélection pourtant triviale.
Avec jQuery, une ligne suffit : $("p.ique");
.
C’est beau, c’est simple, et cette phrase a un parfum de slogan minable.
Il est bien sûr possible, comme en CSS, d’utiliser plusieurs sélecteurs à la fois :
var mon_objet_jquery = $("#fixe .ique, #fixe :last-child");
Vous trouverez sur la documentation de jQuery une liste des sélecteurs supportés par jQuery, ceux dont la syntaxe diffère légèrement de la spécification CSS, ceux qui n’auraient aucun sens pour jQuery (E:visited, E:first-letter), et ceux qui ne sont pas supportés en raison d’un manque d’utilité réelle :
Documentation des sélecteurs jQuery
XPath
jQuery ajoute à cela une implémentation basique de XPath.
Voici comment sélectionner les éléments p enfants de body, lui-même enfant de html :
$("/html/body//p");
Les sélecteurs jQuery
Il existe également une série de sélecteurs n’ayant aucun équivalent CSS ou XPath ; ces derniers peuvent se révéler très pratiques comme dans les exemples suivants :
Sélection des éléments impairs :
$("div p:odd");
Sélection des éléments inférieurs à (less than) 4 :
$("div p:lt(4)");
Ou encore la sélection des éléments d’un formulaire (input, select, textarea, button) :
$("div p:input");
Vous trouverez l’intégralité des exemples sur la documentation. Contrairement à XPath que j’utilise finalement assez rarement, ces derniers sont utiles dans de nombreuses situations, pensez-y :
Documentation des sélecteurs propres à jQuery
Chemise sous le chapeau, il est possible de combiner les différents types de sélecteurs que nous venons de voir, dans une même requête !
Voilà, nous avons vu comment remplir notre boîte magique, nous verrons lors du prochain article comment remuer tout ça !
Quelques jQueryfiseries :
Les commentaires sont fermés sur cet article.
20 commentaires
Flux RSS des commentaires de cet article
[…] est grand temps de publier la suite du précédent article sur jQuery, dans lequel nous abordions le fonctionnement global de la bibliothèque, suivi de la construction […]
Le 16 Août. 2007 à 00h27 par Les intégristes » Blog Archive » jQuery : dansez maintenant !
[…] Très bien écrite et tout. […]
Le 20 Août. 2007 à 13h08 par Nawak! le blog de Super Chinois, Consultant NTIC débridé » Blog Archive » Introduction à jQuery
Super tuto, ça manquait un tuto d’apprentissage en FR :)
Le 20 Août. 2007 à 14h41 par Bob
Oulala, c’est encore plus complexe que ce que je croyais. Grace à toi, je viens de me rendre compte des lacune qu’il me manquait encore à combler :
– apprentissage de jQuery
– lecture du guide à propos de Gecko
– apprentissage de CSS 3 (mais c’est pas encore supporté ça non ?)
– compréhension plus assidue des pointeurs de fonctions javascript…
Merci… j’en ai pour 10 ans avec tout ça lol
Le 20 Août. 2007 à 15h23 par soso
Bob > Merci, content qu’il serve à quelqu’un :)
Soso > CSS3 n’est encore qu’à l’état de brouillon, mais les déclarations CSS passées à jQuery sont transformés en sélection DOM, ils n’ont rien à voir avec le support CSS du navigateur.
Les concepteurs de jQuery en ont d’ailleurs profité pour inventer leurs propres sélecteurs, comme le :contains(‘texte’), qui permet de ne sélectionner que les éléments contenant le texte indiqué.
Le 21 Août. 2007 à 14h13 par Pierre Bertet
Bonjour,
Article très intéressant, et très didactique.
Pour ceux qui ont des problèmes avec l’anglais, je me permets de proposer un lien pointant vers une documentation de jQuery traduite en français: http://jquery.developpeur-web2.com/documentation.php .
Le 03 Sep. 2007 à 16h34 par sebastien
I don’t understand your language, But i under stand your code ;)
Thanks for much
Le 30 Déc. 2007 à 15h43 par Thailand Condo
[…] Les intégristes — inauguration et introduction à jQuery : une page aussi amusante que didactique […]
Le 16 Mai. 2008 à 13h26 par » 1000 ressources pour le développement web et WordPress : la grosse grosse liste « css4design : des css pour votre design html
merci ce tuto m’a beaucoup aidé. Quelqu’un pourrait il me conseiller d’autre lien pour approfondir? en francais please..
Le 25 Juil. 2008 à 14h52 par nana
Après avoir tenté d’apprendre et comprendre Javascript est arrivé sur terre JQuery.Tout simplement magique.
Avec un peu d’attention, une pincée de pratique et la précieuse aide de personne tel que vous, j’arrive à faire des jolis site, comme les grands…
Merci à vous.
Le 05 Déc. 2008 à 15h19 par Raphael
[…] une introdtuction qui vulgarise bien jQuery […]
Le 03 Mar. 2009 à 08h31 par 30 excellentes ressources pour développer avec jQuery
Bonjour,
Enfin un truc clair…
J’ai vu un truc comme : var myobj = jQuery(« ../td »,link);
késako ?
Le 01 Oct. 2009 à 15h40 par bouh
bouh > Le langage utilisé dans ton exemple est XPath, qui a été supprimé de jQuery depuis la version 1.2 : http://docs.jquery.com/Release:jQuery_1.2#Removed_Functionality
Le 04 Oct. 2009 à 14h32 par Pierre Bertet
merci à genoux
Le 11 Oct. 2009 à 19h52 par pas le dire timide
il est joli ce blog, bonne nuit a vous messirs
Le 25 Mar. 2010 à 23h41 par jcc
Très bon tutoriel, Très claire, j’avance petit à petit. Merci :)
Le 04 Juin. 2010 à 15h44 par romu
Introduction à jQuery: Les intégristes…
Un blog exceptionnel pour tous ceux qui souhaitent apprendre rapidement et facilement jQuery. Les bases y sont expliquées clairement et quelques heures suffisent pour franchir le cap et s’affranchir des limitations de javacript. Incontournable!…
Le 12 Août. 2010 à 23h15 par pligg.com
j’ai appris plus sur ce tuto que*’avec 5 jours de doc en anglais sur le site officiel et ailleurs…
chapeau
Le 20 Sep. 2010 à 22h35 par danydan
Danydan > Cool, merci !
Tu peux oublier la partie sur le xpath, ça a été retiré de jQuery depuis ;-)
Le 20 Sep. 2010 à 22h40 par Pierre Bertet
En tant qu’adepte de jQuery depuis longtemps, je plussoie cette initiative.. Ca m’a même permis en me renseignant sur votre paragraphe relatif à XPath (je le sentais deprecated) de voir que .lt et .gt étaient deprecated.. Je les utilise pas mais je saurai qu’il faut passer par .slice() la prochaine fois..
S.
Le 11 Jan. 2012 à 15h50 par syndrael