Tutoriaux
Introduction à la bibliothèque javascript : jQuery
| 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
Publicités
Nos services
Programmation Web
Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.
La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.
Suite ...
Programmation Desktop
Quel que soit votre projet, nous pouvons le réaliser pour vous !
Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.
Suite ...
Autres ...
Quel que soit vos projets ou vos idées, contactez nous!
Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.
Suite ...