SlideShare une entreprise Scribd logo
Introduction à jQuery
   Tutoriaux jQuery - Décembre 2008

   Clément Delmas (clementdelmas.fr)
Prérequis techniques conseillés

•   Avant de lire ce tutorial, il est conseillé de connaître :

    •   le code HTML et le DOM

    •   le CSS et les sélecteurs

    •   le Javascript et les fonctions basiques (variables, fonctions, boucles,
        etc.)
Présentation des librairies Javascript

•   Ensemble de fonctionnalités disponibles et prêtes à l’usage

•   Compatibilité avec l’ensemble des navigateurs

•   Flexibilité et simplicité du code

•   Intégration de plugins
Quelques librairies Javascript
•   jQuery (http://jquery.com/)

•   Mootools (http://www.mootools.net/)

•   Prototype (http://prototypejs.org/)

•   Script.aculo.us (http://script.aculo.us/)

•   Dojo Toolkit (http://dojotoolkit.org/)

•   Yahoo! User Interface Library (http://developer.yahoo.com/yui/)
Pourquoi choisir jQuery ?

•   Basée sur des sélecteurs CSS

•   Simple à comprendre et à apprendre

•   Ne modifie pas l’espace de travail et s’interface avec d’autres librairies

•   Javascript non-intrusif

•   Multitude de plugins disponibles (http://plugins.jquery.com/)
La fonction jQuery()

•   jQuery(‘monSelecteurCSS’)

    va sélectionner les objets html qui correspondent à monSelecteurCSS
    et les retourne sous forme de collection directement exploitable.
    Sélecteurs CSS : #monID, .maClasse, :monType, monElementHtml

•   jQuery() peut-être remplacé par $()
    $(‘#monID’), $(‘.maClasse’), $(‘input:radio’), $(‘monElementHtml’)
Exemples de sélecteurs

•   $(‘#header’) > sélectionne l’objet html ayant pour id “header”

•   $(‘.container’) > sélectionne tous les objets ayant la classe “container”

•   $(‘a’) > sélectionne l’ensemble des liens de la page

•   $(‘#maListe li’) > sélectionne l’ensemble des ‘li’ de la liste #maListe

•   $(‘input:reset’) > sélectionne tous les boutons de type “reset”
Liste des sélecteurs

       •   liste de l’ensemble des sélecteurs
           possibles avec jQuery 1.2

       •   Extrait de jQuery CheatSheet (par
           Color Charge)

           http://colorcharge.com/jquery/
Manipuler une collection d’objets
•   $(‘p’).addClass(‘important’) > ajoute la classe important à l’ensemble
    des paragraphes

•   $(‘img#photo’).attr(‘src’,’img/photo.jpg’) > change l’attribut “src” de
    l’image ayant l’id photo par “img/photo.jpg”

•   $(‘a.plus’).html(“en savoir plus”) > modifie le code html des liens ayant
    la classe plus par “en savoir plus”

•   $(‘#container’).css(“background-color”, “white”) > change la couleur
    de fond du #container par la couleur blanche
Récupérer des valeurs

•   Même si les sélecteurs jQuery retournent des collection d’objets,
    beaucoup de méthodes (fonctions) s’appliquent directement au
    premier objet retourné. Elles permettent de récupérer facilement des
    attributs d’éléments html.

    var hauteurContainer = $(‘#container’).height();
    var srcPhoto = $(‘img.photo’.attr(‘src’);
    var contenuLastP = $(‘p:last’).html();
Liste des manipulateurs

         •   liste de l’ensemble des manipulateurs
             possibles avec jQuery 1.2

         •   Extrait de jQuery CheatSheet (par
             Color Charge)

             http://colorcharge.com/jquery/
Ajouter des effets graphiques

•   jQuery intègre une série complète d’effets graphiques qui permettent
    d’animer une page html très facilement

    $(‘p.secret’).hide() > masque le paragraphe ayant la classe secret
    $(‘#info’).fadeIn() > affiche le div ayant l’id info en fondu
    $(‘.menu’).slideUp(“slow”) > masque le menu en glissant lentement
    $(‘.foo’).toggle(‘slide’) > affiche ou masque le .foo en glissant, en
    fonction de son état (on l’affiche s’il est masqué, et vice et versa)
Animations avancées
•   jQuery possède aussi une fonction animate, qui permet de faire des
    animations plus complexes.
    $(quot;#blockquot;).animate({
       // Change la taille du bloc et son opacité
       width: quot;70%quot;, opacity: 0.4,
       // Ajoute une marge gauche et change la taille de la police
       marginLeft: quot;13pxquot;, fontSize: quot;3em” },
       // La durée de l’animation sera de 3 secondes
       { duration: 3000 }
    );
Liste des effets

     •   liste de l’ensemble des effets qui
         permettent de modifier les éléments
         DOM (compatibles avec jQuery 1.2)

     •   Extrait de jQuery CheatSheet (par
         Color Charge)

         http://colorcharge.com/jquery/
Traverser le DOM

•   jQuery permet de naviguer facilement à travers les différents objets
    html du DOM

    $(‘div.section’).next() > retourne l’élément suivant
    $(‘div.section’).prev() > retourne l’élément précédent
    $(‘div.section’).parent() > retourne l’élément parent
    $(‘#sidebar’).children(‘ul’) > retourne l’ensemble des listes enfant
    $(‘a.more’).prev(‘a’) > retourne le lien précédent
Liste des méthodes de navigation

             •   liste de l’ensemble des méthodes qui
                 permettent de traverser le DOM
                 (compatibles avec jQuery 1.2)

             •   Extrait de jQuery CheatSheet (par
                 Color Charge)

                 http://colorcharge.com/jquery/
Création d’événements

•   jQuery permet de créer des déclencheurs d'événements à des
    éléments de la page, sans se soucier des problèmes de compatibilité
    des navigateurs.

    $(‘a.changeColor’).click(function(){
        $(this).css(‘color’,’orange’);
    });
Liste des événements

       •   liste de l’ensemble des événements qui
           compatibles avec jQuery 1.2

       •   Extrait de jQuery CheatSheet (par
           Color Charge)

           http://colorcharge.com/jquery/
jQuery et le Javascript non-intrusif
•   jQuery est une librairie qui permet de faire du Javascript non-intrusif

    Cela signifie que le code JS n’est exécuté que lorsque la page est
    totalement chargée.

    $(document).ready(function(){

          alert(“Le document est prêt !”);

    });
Réactions en chaîne

•   La plupart des fonctions jQuery peuvent être exécutées à la chaîne,
    c’est à dire, les unes après les autres, sans répéter l’élément auxquelles
    elles s’appliquent.

    $(‘div.aMasquer’).removeClass(‘foo’).children(‘p’).hide();

    Dans l’exemple ci dessus, on ajoute la classe “foo” au div ayant la
    classe aMasquer, et on masque tous ses paragraphes enfants.
Exemple de chaînes folles
•   $('form#login')
       // Masque l’ensemble des labels ayant la classe “optional”
       .find('label.optional').hide().end()
       // Ajoute une bordure rouge d’1px aux input de type password
       .find('input:password').css('border', '1px solid red').end()
       // Ajoute une fonction de validation de l’envoi au formulaire
       .submit(function(){
           return confirm('Êtes vous sûr de vouloir valider le formulaire ?');
       });
                             Exemple repris de : http://www.ibm.com/developerworks/library/x-ajaxjquery.html
Les callbacks
•   Les callbacks sont des fonctions qui sont appelées une fois un
    événement déclenché ou une action faite. Elles sont généralement
    utilisés en Ajax, mais peuvent être intégrés à la fin d’animations
    graphiques.

    $('#grow').animate(
       { height: 500, width: 500 }, quot;slowquot;,
       function callback(){ alert('Croissance terminée !'); }
    );
                            Exemple repris de : http://www.ibm.com/developerworks/library/x-ajaxjquery.html
Copyrights


•   jQuery in 15 minutes - Torchbox

•   Color Charge jQuery CheatSheet

•   Simplify Ajax development with jQuery
Plus d’informations...

          •   Sur le site officiel :
              http://jquery.com/

              Vous trouverez aussi la liste des
              fonctions, des plugins disponibles,
              et plein d’autres ressources....
Merci

Contenu connexe

Tendances

jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
Claude Coulombe
 
jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
Netvibes
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
Pierre Faure
 
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
kadzaki
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
hugomallet
 
Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5
Kristen Le Liboux
 
Php mysql cours
Php mysql coursPhp mysql cours
Php mysql cours
zan
 
Cours j query-id1575
Cours j query-id1575Cours j query-id1575
Cours j query-id1575
kate2013
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
krymo
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
Kristen Le Liboux
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
Bassem ABCHA
 
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partieCours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partie
kadzaki
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
Bruno Bonnin
 
HTML5
HTML5HTML5
HTML5
Neovov
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
abderrahim marzouk
 
Marzouk-HTTP-SESSION-JEE
Marzouk-HTTP-SESSION-JEEMarzouk-HTTP-SESSION-JEE
Marzouk-HTTP-SESSION-JEE
abderrahim marzouk
 

Tendances (18)

jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
 
jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08jQuery - GTI780 & MTI780 - ETS - A08
jQuery - GTI780 & MTI780 - ETS - A08
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
 
Cours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partieCours php & Mysql - 2éme partie
Cours php & Mysql - 2éme partie
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5Programmation orientée objet en PHP 5
Programmation orientée objet en PHP 5
 
Php mysql cours
Php mysql coursPhp mysql cours
Php mysql cours
 
Cours j query-id1575
Cours j query-id1575Cours j query-id1575
Cours j query-id1575
 
Cours javascript
Cours javascriptCours javascript
Cours javascript
 
Javascript
JavascriptJavascript
Javascript
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
Cours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partieCours php & Mysql - 4éme partie
Cours php & Mysql - 4éme partie
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
 
HTML5
HTML5HTML5
HTML5
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
 
Marzouk-HTTP-SESSION-JEE
Marzouk-HTTP-SESSION-JEEMarzouk-HTTP-SESSION-JEE
Marzouk-HTTP-SESSION-JEE
 

En vedette

Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
Olivier Le Goaër
 
jQuery
jQueryjQuery
Strategies et developpements mobiles multi-plates-formes.
Strategies et developpements mobiles multi-plates-formes.Strategies et developpements mobiles multi-plates-formes.
Strategies et developpements mobiles multi-plates-formes.
DocDoku
 
At2009 Coding Dojo ATDD
At2009 Coding Dojo ATDDAt2009 Coding Dojo ATDD
At2009 Coding Dojo ATDD
Emmanuel Hugonnet
 
Dojot formation-dojo-toolkit
Dojot formation-dojo-toolkitDojot formation-dojo-toolkit
Dojot formation-dojo-toolkit
CERTyou Formation
 
Coding Dojo
Coding DojoCoding Dojo
Coding Dojo
Emmanuel Hugonnet
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
Soufiene Bouzid
 
A brief introduction to version control systems
A brief introduction to version control systemsA brief introduction to version control systems
A brief introduction to version control systems
Tim Staley
 
jQuery
jQueryjQuery
jQuery
Jay Poojara
 
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
guicara
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
Dominic Arrojado
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
Arulmurugan Rajaraman
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
Simon Willison
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
Marc Grabanski
 
Agile Dojo : L'art de Grandir en Equipe, Patrice Petit, Conférence Université...
Agile Dojo : L'art de Grandir en Equipe, Patrice Petit, Conférence Université...Agile Dojo : L'art de Grandir en Equipe, Patrice Petit, Conférence Université...
Agile Dojo : L'art de Grandir en Equipe, Patrice Petit, Conférence Université...
Agilbee (Patrice Petit)
 
CARA Coding dojo - Golden Master
CARA Coding dojo - Golden MasterCARA Coding dojo - Golden Master
CARA Coding dojo - Golden Master
florentpellet
 
JavaScript
JavaScript JavaScript
JavaScript
Izana Halfoun
 
Recaudación por cuaderno iglesia
Recaudación por cuaderno   iglesiaRecaudación por cuaderno   iglesia
Recaudación por cuaderno iglesia
carlos ariel peralta
 
6 bs04 01_que_20120621
6 bs04 01_que_201206216 bs04 01_que_20120621
6 bs04 01_que_20120621
Ghazal2222
 

En vedette (20)

Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
jQuery
jQueryjQuery
jQuery
 
Strategies et developpements mobiles multi-plates-formes.
Strategies et developpements mobiles multi-plates-formes.Strategies et developpements mobiles multi-plates-formes.
Strategies et developpements mobiles multi-plates-formes.
 
At2009 Coding Dojo ATDD
At2009 Coding Dojo ATDDAt2009 Coding Dojo ATDD
At2009 Coding Dojo ATDD
 
Dojot formation-dojo-toolkit
Dojot formation-dojo-toolkitDojot formation-dojo-toolkit
Dojot formation-dojo-toolkit
 
Coding Dojo
Coding DojoCoding Dojo
Coding Dojo
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
Résumé javascript
Résumé javascriptRésumé javascript
Résumé javascript
 
A brief introduction to version control systems
A brief introduction to version control systemsA brief introduction to version control systems
A brief introduction to version control systems
 
jQuery
jQueryjQuery
jQuery
 
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
Agile Dojo : L'art de Grandir en Equipe, Patrice Petit, Conférence Université...
Agile Dojo : L'art de Grandir en Equipe, Patrice Petit, Conférence Université...Agile Dojo : L'art de Grandir en Equipe, Patrice Petit, Conférence Université...
Agile Dojo : L'art de Grandir en Equipe, Patrice Petit, Conférence Université...
 
CARA Coding dojo - Golden Master
CARA Coding dojo - Golden MasterCARA Coding dojo - Golden Master
CARA Coding dojo - Golden Master
 
JavaScript
JavaScript JavaScript
JavaScript
 
Recaudación por cuaderno iglesia
Recaudación por cuaderno   iglesiaRecaudación por cuaderno   iglesia
Recaudación por cuaderno iglesia
 
6 bs04 01_que_20120621
6 bs04 01_que_201206216 bs04 01_que_20120621
6 bs04 01_que_20120621
 

Similaire à Introduction a jQuery

Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011
Aurélien Maury
 
Javascript et JQuery
Javascript et JQueryJavascript et JQuery
Javascript et JQuery
Jean-Marie Renouard
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
Solution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScriptSolution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScript
Raphaël Semeteys
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
laabid1
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
5pidou
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
ssuser65180a
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011
Sylvain Wallez
 
Php1
Php1Php1
Grails from scratch to prod - MixIT 2010
Grails from scratch to prod - MixIT 2010Grails from scratch to prod - MixIT 2010
Grails from scratch to prod - MixIT 2010
Aurélien Maury
 
Introduction à Sinatra
Introduction à SinatraIntroduction à Sinatra
Introduction à Sinatra
Rémi Prévost
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
Yoann Gotthilf
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
Frédéric Harper
 
La première partie de la présentation PHP
La première partie de la présentation PHPLa première partie de la présentation PHP
La première partie de la présentation PHP
Club Scientifique de l'ESI - CSE
 
Pratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMOPratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMO
Julio Djomo
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
jverrecchia
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
Pierric Cistac
 

Similaire à Introduction a jQuery (20)

Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011
 
Javascript et JQuery
Javascript et JQueryJavascript et JQuery
Javascript et JQuery
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Solution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScriptSolution Linux 2009 - JavaScript
Solution Linux 2009 - JavaScript
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011
 
Php1
Php1Php1
Php1
 
Grails from scratch to prod - MixIT 2010
Grails from scratch to prod - MixIT 2010Grails from scratch to prod - MixIT 2010
Grails from scratch to prod - MixIT 2010
 
Introduction à Sinatra
Introduction à SinatraIntroduction à Sinatra
Introduction à Sinatra
 
Jboss Seam
Jboss SeamJboss Seam
Jboss Seam
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
La première partie de la présentation PHP
La première partie de la présentation PHPLa première partie de la présentation PHP
La première partie de la présentation PHP
 
Pratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMOPratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMO
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Backbonejs presentation
Backbonejs presentationBackbonejs presentation
Backbonejs presentation
 
Intro à angular
Intro à angularIntro à angular
Intro à angular
 

Introduction a jQuery

  • 1. Introduction à jQuery Tutoriaux jQuery - Décembre 2008 Clément Delmas (clementdelmas.fr)
  • 2. Prérequis techniques conseillés • Avant de lire ce tutorial, il est conseillé de connaître : • le code HTML et le DOM • le CSS et les sélecteurs • le Javascript et les fonctions basiques (variables, fonctions, boucles, etc.)
  • 3. Présentation des librairies Javascript • Ensemble de fonctionnalités disponibles et prêtes à l’usage • Compatibilité avec l’ensemble des navigateurs • Flexibilité et simplicité du code • Intégration de plugins
  • 4. Quelques librairies Javascript • jQuery (http://jquery.com/) • Mootools (http://www.mootools.net/) • Prototype (http://prototypejs.org/) • Script.aculo.us (http://script.aculo.us/) • Dojo Toolkit (http://dojotoolkit.org/) • Yahoo! User Interface Library (http://developer.yahoo.com/yui/)
  • 5. Pourquoi choisir jQuery ? • Basée sur des sélecteurs CSS • Simple à comprendre et à apprendre • Ne modifie pas l’espace de travail et s’interface avec d’autres librairies • Javascript non-intrusif • Multitude de plugins disponibles (http://plugins.jquery.com/)
  • 6. La fonction jQuery() • jQuery(‘monSelecteurCSS’) va sélectionner les objets html qui correspondent à monSelecteurCSS et les retourne sous forme de collection directement exploitable. Sélecteurs CSS : #monID, .maClasse, :monType, monElementHtml • jQuery() peut-être remplacé par $() $(‘#monID’), $(‘.maClasse’), $(‘input:radio’), $(‘monElementHtml’)
  • 7. Exemples de sélecteurs • $(‘#header’) > sélectionne l’objet html ayant pour id “header” • $(‘.container’) > sélectionne tous les objets ayant la classe “container” • $(‘a’) > sélectionne l’ensemble des liens de la page • $(‘#maListe li’) > sélectionne l’ensemble des ‘li’ de la liste #maListe • $(‘input:reset’) > sélectionne tous les boutons de type “reset”
  • 8. Liste des sélecteurs • liste de l’ensemble des sélecteurs possibles avec jQuery 1.2 • Extrait de jQuery CheatSheet (par Color Charge) http://colorcharge.com/jquery/
  • 9. Manipuler une collection d’objets • $(‘p’).addClass(‘important’) > ajoute la classe important à l’ensemble des paragraphes • $(‘img#photo’).attr(‘src’,’img/photo.jpg’) > change l’attribut “src” de l’image ayant l’id photo par “img/photo.jpg” • $(‘a.plus’).html(“en savoir plus”) > modifie le code html des liens ayant la classe plus par “en savoir plus” • $(‘#container’).css(“background-color”, “white”) > change la couleur de fond du #container par la couleur blanche
  • 10. Récupérer des valeurs • Même si les sélecteurs jQuery retournent des collection d’objets, beaucoup de méthodes (fonctions) s’appliquent directement au premier objet retourné. Elles permettent de récupérer facilement des attributs d’éléments html. var hauteurContainer = $(‘#container’).height(); var srcPhoto = $(‘img.photo’.attr(‘src’); var contenuLastP = $(‘p:last’).html();
  • 11. Liste des manipulateurs • liste de l’ensemble des manipulateurs possibles avec jQuery 1.2 • Extrait de jQuery CheatSheet (par Color Charge) http://colorcharge.com/jquery/
  • 12. Ajouter des effets graphiques • jQuery intègre une série complète d’effets graphiques qui permettent d’animer une page html très facilement $(‘p.secret’).hide() > masque le paragraphe ayant la classe secret $(‘#info’).fadeIn() > affiche le div ayant l’id info en fondu $(‘.menu’).slideUp(“slow”) > masque le menu en glissant lentement $(‘.foo’).toggle(‘slide’) > affiche ou masque le .foo en glissant, en fonction de son état (on l’affiche s’il est masqué, et vice et versa)
  • 13. Animations avancées • jQuery possède aussi une fonction animate, qui permet de faire des animations plus complexes. $(quot;#blockquot;).animate({ // Change la taille du bloc et son opacité width: quot;70%quot;, opacity: 0.4, // Ajoute une marge gauche et change la taille de la police marginLeft: quot;13pxquot;, fontSize: quot;3em” }, // La durée de l’animation sera de 3 secondes { duration: 3000 } );
  • 14. Liste des effets • liste de l’ensemble des effets qui permettent de modifier les éléments DOM (compatibles avec jQuery 1.2) • Extrait de jQuery CheatSheet (par Color Charge) http://colorcharge.com/jquery/
  • 15. Traverser le DOM • jQuery permet de naviguer facilement à travers les différents objets html du DOM $(‘div.section’).next() > retourne l’élément suivant $(‘div.section’).prev() > retourne l’élément précédent $(‘div.section’).parent() > retourne l’élément parent $(‘#sidebar’).children(‘ul’) > retourne l’ensemble des listes enfant $(‘a.more’).prev(‘a’) > retourne le lien précédent
  • 16. Liste des méthodes de navigation • liste de l’ensemble des méthodes qui permettent de traverser le DOM (compatibles avec jQuery 1.2) • Extrait de jQuery CheatSheet (par Color Charge) http://colorcharge.com/jquery/
  • 17. Création d’événements • jQuery permet de créer des déclencheurs d'événements à des éléments de la page, sans se soucier des problèmes de compatibilité des navigateurs. $(‘a.changeColor’).click(function(){ $(this).css(‘color’,’orange’); });
  • 18. Liste des événements • liste de l’ensemble des événements qui compatibles avec jQuery 1.2 • Extrait de jQuery CheatSheet (par Color Charge) http://colorcharge.com/jquery/
  • 19. jQuery et le Javascript non-intrusif • jQuery est une librairie qui permet de faire du Javascript non-intrusif Cela signifie que le code JS n’est exécuté que lorsque la page est totalement chargée. $(document).ready(function(){ alert(“Le document est prêt !”); });
  • 20. Réactions en chaîne • La plupart des fonctions jQuery peuvent être exécutées à la chaîne, c’est à dire, les unes après les autres, sans répéter l’élément auxquelles elles s’appliquent. $(‘div.aMasquer’).removeClass(‘foo’).children(‘p’).hide(); Dans l’exemple ci dessus, on ajoute la classe “foo” au div ayant la classe aMasquer, et on masque tous ses paragraphes enfants.
  • 21. Exemple de chaînes folles • $('form#login') // Masque l’ensemble des labels ayant la classe “optional” .find('label.optional').hide().end() // Ajoute une bordure rouge d’1px aux input de type password .find('input:password').css('border', '1px solid red').end() // Ajoute une fonction de validation de l’envoi au formulaire .submit(function(){ return confirm('Êtes vous sûr de vouloir valider le formulaire ?'); }); Exemple repris de : http://www.ibm.com/developerworks/library/x-ajaxjquery.html
  • 22. Les callbacks • Les callbacks sont des fonctions qui sont appelées une fois un événement déclenché ou une action faite. Elles sont généralement utilisés en Ajax, mais peuvent être intégrés à la fin d’animations graphiques. $('#grow').animate( { height: 500, width: 500 }, quot;slowquot;, function callback(){ alert('Croissance terminée !'); } ); Exemple repris de : http://www.ibm.com/developerworks/library/x-ajaxjquery.html
  • 23. Copyrights • jQuery in 15 minutes - Torchbox • Color Charge jQuery CheatSheet • Simplify Ajax development with jQuery
  • 24. Plus d’informations... • Sur le site officiel : http://jquery.com/ Vous trouverez aussi la liste des fonctions, des plugins disponibles, et plein d’autres ressources....
  • 25. Merci