Télécharger la présentation
2
jQuery en quelques minutes…
3
Démarrage rapide… http://jquery.comhttp://jquery.com
4
Démarrage rapide… Télécharger jQuery :Télécharger jQuery :
5
Démarrage rapide… <html> Demo Demo jQuery jQuery </html>
6
Démarrage rapide… <html> Demo Demo jQuery jQuery </html>
7
Démarrage rapide… <html> Demo Demo jQuery jQuery $(document).ready(function(){ $(document).ready(function(){ // Emplacement du code jQuery // Emplacement du code jQuery }); }); </html>
8
Démarrage rapide… <html> Demo Demo jQuery jQuery $(document).ready(function(){ $(document).ready(function(){ // Emplacement du code jQuery // Emplacement du code jQuery }); }); </html>
9
Exercice 1a <html> 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 !"); }); }); </html>
10
Exercice 1a <html> 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 !"); }); }); </html>
11
Exercice 1b <html> 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(); }); }); </html>
12
Exercice 1b <html> 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(); }); }); </html>
13
Exercice 1c : Ajout dune classe <html> 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 </html>
14
Exercice 1c : Ajout dune classe <html> 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 </html>
15
Exercice 1c : Suppression dune classe <html> 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 </html>
16
Exercice 1c : Suppression dune classe <html> 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 </html>
17
Exercice 1d : Effet spéciaux <html> 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 </html>
18
Exercice 1d : Effet spéciaux <html> 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 </html>
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 !
