Tutoriaux
Administrateur
Oct 10
|19:05
Mise à jour le Mardi, 28 Octobre 2008 13:09
| Index de l'article |
|---|
| Introduction à la bibliothèque javascript : jQuery |
| Sélecteurs et événements |
| Toutes les pages |
Page 1 de 2
Nous allons dans cet article, effectuer une introduction à la bibliothèque javascript : jQuery. Il va sans dire que pour comprendre tant soit peu l'article qui suit, qu'il vous faut un minimum de connaissance Javascript et du modèle objet des documents (DOM). Nous verrons donc la base en vous donnant les détails nécessaires à votre apprentissage afin que vous soyez en mesure de progresser par vous même facilement.
Pour démarrer, il vous faudra une la bibliothèque jQuery. La version la plus récente se trouve ici : http://jquery.com/src/
Hello world!
Comme presque tout ce que nous faisons avec jQuery, ce dernier lit ou manipule le modèle objet du document (DOM). Il faut donc être sûr que nous n'ajoutons des événements ou autres que lorsque le DOM (le document) est complètement chargé. Pour cela, nous enregistrons un événement « document chargé » ou « $(document).ready(function() ».
$(document).ready(function() {
// Traitement à effectuer lorsque le DOM est prêt
});
Mettre un message d'alerte dans cette fonction n'a pas beaucoup de sens, puisqu'un message n'a pas besoin que le DOM soit chargé. Alors poussons l'exemple un peu plus loin et essayons d'afficher un message lorsqu'un lien est cliqué.
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
$("a").click(function() {
alert("Hello world!");
});
});
Cela devrait afficher le message si vous cliquez sur un lien de votre page.
Un coup d'œil sur notre script :
- $("a") est un sélecteur jQuery, ici, il sélectionne tous les éléments de type lien .
- $ Alias pour la classe jQuery : $() 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 et exécute la fonction fournie quand l'événement se déclenche.
Le code suivant génère le même message :
La différence est évidente :
- Nous n'avons pas besoin d'écrire un événement onclick pour chaque élément.
- Nous obtenons une séparation claire entre la structure (HTML) et le comportement (JS) de la même manière que votre feuille de style CSS est discocié de votre code HTML.
Navigation
Réseaux sociaux
Connexion
Publicités
MeilleursPrix.ca
|
|
