PRÉSENTATION DE JQUERY
UNE BIBLIOTHÈQUE POUR JAVASCRIPT
z ORIGINES
CRÉATION EN 2006 PAR JOHN RESIG objectif : simplifier le développement de pages Web avec Javascript BIBLIOTHÈQUE EN CODE LIBRE 1 développement et documentation assurés par une équipe
z PRINCIPALES CARACTÉRISTIQUES
ECRITURE EN JAVASCRIPT DE MANIÈRE NON INTRUSIVE 2 séparation nette des scripts d’avec le code XHTML ORIENTATION VERS LA MANIPULATION D’ÉLÉMENTS D’UNE PAGE WEB extension du mécanisme de sélection existant dans CSS SIMPLIFICATION DE L’UTILISATION DE DOM mécanismes puissants avec une notation minimaliste INTÉGRATION DE TECHNIQUES POUR DES APPLICATIONS INTERNET (RIA 3) effets d’animation, interfaçage avec Ajax, etc. BIBLIOTHÈQUE EXTENSIBLE nombreuses extensions disponibles (formulaires, menus, etc.) GESTION POUSSÉE DE LA COMPATIBILITÉ AVEC LES NAVIGATEURS prise en charge de particularités hors norme de navigateurs mais fonctionnement avec des versions relativement récentes : Firefox ≥ 2, Internet explorer ≥ 6, Safari ≥ 3, Opera ≥ 9,
EXEMPLE DU COLORIAGE (VERSION N° 1)
COLORIAGE D’UN PARAGRAPHE
z CARACTÉRISTIQUES
DOUBLE SCRIPT Bibliothèque jQuery + script particulier à la page : application d’un style de couleur à la division identifiée par contenu IDENTIFICATION D’UNE SÉLECTION D’ÉLÉMENT(S) DE LA PAGE notation : jQuery(sélection) ou $(sélection) avec sélection 1 exprimée a priori comme en CSS, dans une chaîne de caractères exemple : jQuery(« div#contenu ») ou $(« div#contenu ») MANIPULATION DE LA SÉLECTION PAR APPLICATION D’UNE MÉTHODE définition d’un style via .css(propriété, valeur) exemple : $(« div#contenu »).css(« color », « red »);
z CODE EN XHTML DU CONTENU DE LA PAGE
<body> <h1>Exemple avec jQuery : coloriage (version n° 1)</h1> <hr /> <div id= »contenu »>Ce texte doit s’afficher en couleur !</div> <hr /> <address>MC – 25 XI 2009</address> <script type= »text/javascript » src= »jquery.js »></script> <script type= »text/javascript » src= »jq-colorier-v1.js »></script> </body>
z CODE EN JAVASCRIPT DANS jq-colorier-v1.js
$(« div#contenu »).css(« color », « red »);