Introduction au framework jquery

Disponible uniquement sur Etudier
  • Pages : 33 (8182 mots )
  • Téléchargement(s) : 0
  • Publié le : 19 juin 2011
Lire le document complet
Aperçu du document
JQUERY

MULTIMÉDIA ET TECHNOLOGIES DU WEB

jQuery
On commence par présenter jQuery, on découvre ce framework à travers des exemples simples, ensuite, on consacre une première partie aux sélecteurs, qui illustrent la diversité de jQuery pour atteindre aisément n'importe quel élément de la page web. Dans les parties suivantes on découvre les éléments d'interactivité apportés par jQuery;d'abord par la manipulation des attributs (ajout, modification ou suppression) puis par l'application de styles CSS. Suivent les événements classiques du JavaScript mais surtout ceux apportés par jQuery. On termine par la présentation des effets visuels qui viennent simplifier et enrichir ceux proposés par javascript. Une introduction à l'étude du DOM est également présentée.

1 Principes de base
1.2Le fonctionnement de jQuery

1 .2.1 Introduction
jQuery est une bibliothèque javascript (framework) open-source légère et cross-browser, qui simplifie l’interaction entre l’HTML et JavaScript. JQuery permet de traverser et de manipuler très facilement l'arbre DOM de vos pages web. Il permet par exemple de changer/ajouter une classe CSS, créer des animations, modifier des attributs, etc. maiségalement de gérer les événements javascript ainsi que de faire des requêtes AJAX de manière très simple et en utilisant un minimum de lignes de code. JQuery possède une grande communauté, une grande documentation, et de nombreux plugins, et il a été récemment adopté par Microsoft. Pour utiliser JQuery, il est nécessaire d’avoir des connaissances de javascript et du modèle objet des documents (DOM).JQuery est développé par John Resig de Mozilla et a été annoncé pour la première fois en janvier 2006. On distingue trois concepts majeurs de jQuery
1. La fonction $() : contient le code jQuery 2. Obtenir > Agir : Sélectionner des éléments du DOM ensuite leur appliquer des opérations 3. Chainabilité : Capacités de traitements en chaîne.

Mais pour commencer, nous allons découvrir quelquesutilisations basiques de jQuery. Dans un premier exemple, on considère le code de la page web suivante, que nous avons appelée jqtest.php :
Getting Stared
Pr Jaouad DABOUNOU 1/45 FST de Settat

JQUERY

MULTIMÉDIA ET TECHNOLOGIES DU WEB

$(document).ready(function(){ $("a").click(function(event){ alert("Bienvenue à la FSTS !"); }); }); FST de Settat

Noter tout d'abord, que jQuerypeut être téléchargé sous forme d'un fichier .js normal ou compressé à l’adresse http://jquery.com. Une fois téléchargé, il suffit de l'insérer entre les balises et de vos pages. Dans le cas de ce tutoriel, nous allons le copier dans le dossier ./js au même titre que tous les fichiers javascript, et la balise suivante permet de l’insérer dans la page. Visualiser la page dans un navigateur etcliquer sur le lien, on obtient :

1 .2.2 Explication :
Le fait d’insérer la ligne

Dans l’entête de votre page, vous permet d’exploiter toutes les fonctionnalités qui sont programmées dans le fichier jquery.js que vous avez copié dans le dossier ./js de votre site web.
Pr Jaouad DABOUNOU 2/45 FST de Settat

JQUERY

MULTIMÉDIA ET TECHNOLOGIES DU WEB

On considère la partie du codesuivante :
$(document).ready(function(){ $("a").click(function(event){ alert("Bienvenue à la FSTS !"); }); });

Tout d’abord le code ci-après demande au navigateur d’exécuter son contenu dès que le DOM (disons la structure de la page web) soit prêt.
$(document).ready( Code à executer );

Donc ce qui va s’exécuter est le code suivant :
Function(){ $("a").click(function(event){ alert("Bienvenue àla FSTS !"); }); });

Cela représente une fonction anonyme ( on n’a pas donné de nom à function() ! ). On a pas utilisé l’expression classique window.onload = function(){} principalement parce que window.onload attend que la page et les éléments qu’elle contient soient complètement chargés, ce qui peut être très long. jQuery va charger cette fonction lorsque la page sera chargée par le...
tracking img