La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

jQuery en quelques minutes… Démarrage rapide…

Présentations similaires


Présentation au sujet: "jQuery en quelques minutes… Démarrage rapide…"— Transcription de la présentation:

1

2 jQuery en quelques minutes…

3 Démarrage rapide…

4 Démarrage rapide… Télécharger jQuery :Télécharger jQuery :

5 Démarrage rapide… Demo Demo jQuery jQuery

6 Démarrage rapide… Demo Demo jQuery jQuery

7 Démarrage rapide… Demo Demo jQuery jQuery $(document).ready(function(){ $(document).ready(function(){ // Emplacement du code jQuery // Emplacement du code jQuery }); });

8 Démarrage rapide… Demo Demo jQuery jQuery $(document).ready(function(){ $(document).ready(function(){ // Emplacement du code jQuery // Emplacement du code jQuery }); });

9 Exercice 1a Demo Demo jQuery jQuery $(document).ready(function(){ $(document).ready(function(){ $("a").click(function(event){ $("a").click(function(event){ alert("Merci de votre visite !"); alert("Merci de votre visite !"); }); });

10 Exercice 1a Demo Demo jQuery jQuery $(document).ready(function(){ $(document).ready(function(){ $("a").click(function(event){ $("a").click(function(event){ alert("Merci de votre visite !"); alert("Merci de votre visite !"); }); });

11 Exercice 1b Demo Demo jQuery jQuery $(document).ready(function(){ $(document).ready(function(){ $("a").click(function(event){ $("a").click(function(event){ alert("On n'accède plus au site jquery.com"); alert("On n'accède plus au site jquery.com"); event.preventDefault(); event.preventDefault(); }); });

12 Exercice 1b Demo Demo jQuery jQuery $(document).ready(function(){ $(document).ready(function(){ $("a").click(function(event){ $("a").click(function(event){ alert("On n'accède plus au site jquery.com"); alert("On n'accède plus au site jquery.com"); event.preventDefault(); event.preventDefault(); }); });

13 Exercice 1c : Ajout dune classe Demo Demo a.test { font-weight: bold; color:red;} a.test { font-weight: bold; color:red;} $(document).ready(function(){ $(document).ready(function(){ $("a").addClass("test"); $("a").addClass("test"); }); }); jQuery jQuery

14 Exercice 1c : Ajout dune classe Demo Demo a.test { font-weight: bold; color:red;} a.test { font-weight: bold; color:red;} $(document).ready(function(){ $(document).ready(function(){ $("a").addClass("test"); $("a").addClass("test"); }); }); jQuery jQuery

15 Exercice 1c : Suppression dune classe Demo Demo a.test { font-weight: bold; color:red;} a.test { font-weight: bold; color:red;} $(document).ready(function(){ $(document).ready(function(){ $("a").addClass("test"); $("a").addClass("test"); $("a").removeClass("test"); $("a").removeClass("test"); }); }); jQuery jQuery

16 Exercice 1c : Suppression dune classe Demo Demo a.test { font-weight: bold; color:red;} a.test { font-weight: bold; color:red;} $(document).ready(function(){ $(document).ready(function(){ $("a").addClass("test"); $("a").addClass("test"); $("a").removeClass("test"); $("a").removeClass("test"); }); }); jQuery jQuery

17 Exercice 1d : Effet spéciaux Demo Demo $(document).ready(function(){ $(document).ready(function(){ $("a").click(function(event){ $("a").click(function(event){ event.preventDefault(); event.preventDefault();$(this).hide("slow"); }); }); jQuery jQuery

18 Exercice 1d : Effet spéciaux Demo Demo $(document).ready(function(){ $(document).ready(function(){ $("a").click(function(event){ $("a").click(function(event){ event.preventDefault(); event.preventDefault();$(this).hide("slow"); }); }); jQuery jQuery

19 Exercice 1e : CallBack Cest lappel dune fonction en argument dune autre fonctionCest lappel dune fonction en argument dune autre fonction Exemple de callback sans arguments : $.get(unePage.html', maFonctionCallBack);Exemple de callback sans arguments : $.get(unePage.html', maFonctionCallBack); Exemple de callback avec arguments : $.get('unePage.html', function(){ maFonctionCallBack(param1, param2); });Exemple de callback avec arguments : $.get('unePage.html', function(){ maFonctionCallBack(param1, param2); });

20 Test…

21 Cest fini… Merci pour votre attention !


Télécharger ppt "jQuery en quelques minutes… Démarrage rapide…"

Présentations similaires


Annonces Google