Introduction à la bibliothèque JavaScript jQuery

Plan de cours 

• Présentation des sélecteurs
• Les sélecteurs La sélection par filtre
• Les éléments de formulaire
• Utilisation des sélecteurs et des événements

jQuery est une bibliothèque JavaScript légère, ‘write less, do more’.
Le but de jQuery est de rendre beaucoup plus facile l’utilisation de JavaScript sur votre site web.

jQuery prend beaucoup de tâches courantes qui nécessitent de nombreuses lignes de code JavaScript à accomplir, et les encapsule dans des méthodes que vous pouvez appeler avec une seule ligne de code.

jQuery simplifie également beaucoup de choses compliquées de JavaScript, comme les appels AJAX et la manipulation DOM.
La bibliothèque jQuery contient les fonctionnalités suivantes:

• Manipulation HTML / DOM
• Manipulation CSS
• Méthodes d’événement HTML
• Effets et animations
• AJAX

Ce tutoriel au rythme effréné devrait permettre aux débutants de démarrer rapidement avec javascript et jQuery, tout en offrant un bon aperçu de ce que jQuery est capable de faire (bien que les capacités de jQuery vont bien au-delà de ce tutoriel).

Gardez à l’esprit que ce tutoriel est juste un tas d’exemples de code simples et superficiels et des explications très brèves pour les débutants qui veulent éviter tout le jargon et les complexités. Mais je recommande fortement que tous les débutants passent ces choses au moyen d’un bon livre, de quelques tutoriels plus en profondeur en ligne, ou en utilisant la documentation de jQuery.

Profitez de ce manuel de formation en PDF pour comprendre mieux le JQuery et enrichir votre connaissance.

Commencez à télécharger ce cours adapté pour vous et à apprendre JQuery.

Introduction à la bibliothèque JavaScript jQuery par Dave Lizotte (PcKULT.NET) Didier Mouronval (Articles)
– 3 – Copyright © 04/11/2008 – Dave Lizotte & Didier Mouronval. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble deson contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prisonet jusqu'à 300 000 E de dommages et intérêts. http://pckult.developpez.com/tutoriels/javascript/frameworks/jquery/introduction/
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! "); } ) ; });
Cela devrait afficher le message si vous cliquez sur un lien de votre page.
Un coup d'oeil sur notre script :
• $("a") est un sélecteur jQuery, ici, il sélectionne tous les éléments de type lien .
• $ est un 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 :
Lien
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 (JavaScript) de la même
manière que votre feuille de style CSS est dissociée de votre code HTML.
Présentation des sélecteurs
Les sélecteurs
La première chose à apprendre de jQuery afin d'être en mesure de séparer vos codes JavaScript et (X)HTML sont les
sélecteurs. Les sélecteurs permettent de sélectionner un ou plusieurs éléments du DOM, ces derniers pouvant être
manipulés comme tout autre objet. Si vous êtes familier avec CSS, vous allez saisir rapidement les sélecteurs. Ceux-
ci sont en réalité la même chose et ils utilisent presque la même syntaxe. jQuery permet la sélection des éléments
grâce à une fonction spéciale nommée « $ ».