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
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 :
RSS 2.0
Plan du site
Espace privé