jQuery en quelques minutes…
Démarrage rapide…
Démarrage rapide… Télécharger jQuery :Télécharger jQuery :
Démarrage rapide… <html> Demo Demo jQuery jQuery </html>
Démarrage rapide… <html> Demo Demo jQuery jQuery </html>
Démarrage rapide… <html> Demo Demo jQuery jQuery $(document).ready(function(){ $(document).ready(function(){ // Emplacement du code jQuery // Emplacement du code jQuery }); }); </html>
Démarrage rapide… <html> Demo Demo jQuery jQuery $(document).ready(function(){ $(document).ready(function(){ // Emplacement du code jQuery // Emplacement du code jQuery }); }); </html>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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); });
Test…
Cest fini… Merci pour votre attention !