jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Débuter > Danse avec jQuery : premier pas

Danse avec jQuery : premier pas

lundi 2 octobre 2006, par toggg

Un guide pour jQuery

Article original : http://jquery.bassistance.de/jquery...
merci à © 2006, Jörn Zaefferer — mise à jour : 2006-09-12.

Ce guide est une introduction à la bibliothèque jQuery. Il nécessite des connaissances de javascript et du modèle objet des documents (DOM). Il démarre de la base et essaye de donner des détails si nécessaire. Il inclut un exemple simple de type « hello world », les bases de la sélection et du traitement des événements, l’utilisation d’AJAX, des effets (FX), et la création et l’usage de plugins.

Vous ne trouverez pas d’exemples « cliquez-moi » dans ce tutoriel. L’intention est de ne fournir que du code « copiez-moi » pour vous amener à l’essayer par vous-même. Copiez l’exemple, regardez ce qu’il fait, et modifiez-le.


Mise en route

Pour démarrer, il vous faudra une copie de la bibliothèque jQuery. La version la plus récente se trouve ici : http://jquery.com/src/ ; ce guide fournit un paquet de base que vous pouvez charger.

Guide de démarrage jQuery Ndt. Attention, le source jQuery contenu dans ce zip est une ancienne version, suffisante pour vos premiers essais, veuillez récupérer une version plus récente pour vos développements réels

Chargez ce fichier et extrayez son contenu. Ouvrez starterkit.html et custom.js avec votre éditeur de texte favori et chargez starterkit.html dans votre navigateur.

Maintenant, nous avons tout ce qu’il nous faut pour attaquer le célèbre exemple « Hello world ».

Liens à retenir :
- Guide de démarrage jQuery
- Chargement de jQuery

Bonjour jQuery

Comme presque tout ce que nous faisons en utilisant jQuery lit ou manipule le modèle objet du document (DOM), il faut être sûr que nous n’ajoutons des événements et autres que lorsque le DOM (le document) est complètement chargé.

Pour cela, nous enregistrons un événement « document chargé ».

$(document).ready(function() {
        // Agir dès que le DOM est prêt
});

Mettre un message (alert) dans cette fonction n’a pas beaucoup de sens, puisqu’un message n’a pas besoin que le DOM soit chargé. Essayons mieux, afficher un message quand le lien est cliqué (NdT : le lien <a> de starterkit.html).

$(document).ready(function() {
        $("a").click(function() {
                alert("Hello world!");
        });
});

Ca devrait afficher le message si vous cliquez sur le lien.

Un coup d’œil sur notre script :
- $("a") est un sélecteur jQuery, ici, il sélectionne tous les éléments <a>.
- $ elle-même est un alias pour la classe jQuery [1] : ainsi $() fabrique un nouvel objet jQuery.
- La fonction click() appelée dans la suite est une méthode de l’objet jQuery. Elle associe un événement à tous les éléments sélectionnés (ici une unique ancre) et exécute la fonction fournie quand l’événement se déclenche.

C’est similaire au code suivant :

<a href="#" onclick="alert('Hello world');">Link</a>

La différence est évidente : nous n’avons pas besoin d’écrire un onclick pour chaque élément. Nous obtenons une séparation claire entre la structure (HTML) et le comportement (JS), exactement comme nous séparons la structure et la présentation en utilisant les CSS.

Liens à retenir :
- jQuery Base
- jQuery Expressions
- jQuery Basic Events

original

P.-S.

En gardant cela à l’esprit, nous allons dans le chapitre suivant explorer un peu plus les sélecteurs et les événements.

La suite : Danse avec jQuery : deuxième pas

Documents joints

Notes

[1] NdT : la classe en tant qu’objet javascript

Répondre à cet article

17 Messages de forum


Derniers commentaires

Nouveautés sur le Web