jquery en quelques minutes… démarrage rapide… ://jquery.com
TRANSCRIPT
![Page 1: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/1.jpg)
jQueryjQuery
en quelques minutes…en quelques minutes…
![Page 2: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/2.jpg)
Démarrage rapide…Démarrage rapide…
• http://jquery.comhttp://jquery.com
![Page 3: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/3.jpg)
Démarrage rapide…Démarrage rapide…
• Télécharger jQuery :Télécharger jQuery :
![Page 4: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/4.jpg)
Démarrage rapide…Démarrage rapide…
<!doctype html><!doctype html><html><html> <head><head> <meta charset="utf-8"><meta charset="utf-8"> <title>Demo</title><title>Demo</title> </head></head> <body><body> <a href="http://jquery.com/">jQuery</a><a href="http://jquery.com/">jQuery</a> <script src="jquery.js"></script><script src="jquery.js"></script> <script><script> </script></script> </body></body></html></html>
![Page 5: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/5.jpg)
Démarrage rapide…Démarrage rapide…
<!doctype html><!doctype html><html><html> <head><head> <meta charset="utf-8"><meta charset="utf-8"> <title>Demo</title><title>Demo</title> </head></head> <body><body> <a href="http://jquery.com/">jQuery</a><a href="http://jquery.com/">jQuery</a> <script src="jquery.js"></script><script src="jquery.js"></script> <script><script> </script></script> </body></body></html></html>
![Page 6: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/6.jpg)
Démarrage rapide…Démarrage rapide…
<!doctype html><!doctype html><html><html> <head><head> <meta charset="utf-8"><meta charset="utf-8"> <title>Demo</title><title>Demo</title> </head></head> <body><body> <a href="http://jquery.com/">jQuery</a><a href="http://jquery.com/">jQuery</a> <script src="jquery.js"></script><script src="jquery.js"></script> <script><script> $(document).ready(function(){$(document).ready(function(){ // Emplacement du code jQuery// Emplacement du code jQuery });}); </script></script> </body></body></html></html>
![Page 7: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/7.jpg)
Démarrage rapide…Démarrage rapide…
<!doctype html><!doctype html><html><html> <head><head> <meta charset="utf-8"><meta charset="utf-8"> <title>Demo</title><title>Demo</title> </head></head> <body><body> <a href="http://jquery.com/">jQuery</a><a href="http://jquery.com/">jQuery</a> <script src="jquery.js"></script><script src="jquery.js"></script> <script><script> $(document).ready(function(){$(document).ready(function(){ // Emplacement du code jQuery// Emplacement du code jQuery });}); </script></script> </body></body></html></html>
![Page 8: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/8.jpg)
Exercice 1aExercice 1a<!doctype html><!doctype html><html><html> <head><head> <meta charset="utf-8"><meta charset="utf-8"> <title>Demo</title><title>Demo</title> </head></head> <body><body> <a href="http://jquery.com/">jQuery</a><a href="http://jquery.com/">jQuery</a> <script src="jquery.js"></script><script src="jquery.js"></script> <script><script> $(document).ready(function(){$(document).ready(function(){ $("a").click(function(event){$("a").click(function(event){ alert("Merci de votre visite !");alert("Merci de votre visite !"); }); }); });}); </script></script> </body></body></html></html>
![Page 9: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/9.jpg)
Exercice 1aExercice 1a<!doctype html><!doctype html><html><html> <head><head> <meta charset="utf-8"><meta charset="utf-8"> <title>Demo</title><title>Demo</title> </head></head> <body><body> <a href="http://jquery.com/">jQuery</a><a href="http://jquery.com/">jQuery</a> <script src="jquery.js"></script><script src="jquery.js"></script> <script><script> $(document).ready(function(){$(document).ready(function(){ $("a").click(function(event){$("a").click(function(event){ alert("Merci de votre visite !");alert("Merci de votre visite !"); }); }); });}); </script></script> </body></body></html></html>
![Page 10: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/10.jpg)
Exercice 1bExercice 1b<!doctype html><!doctype html><html><html> <head><head> <meta charset="utf-8"><meta charset="utf-8"> <title>Demo</title><title>Demo</title> </head></head> <body><body> <a href="http://jquery.com/">jQuery</a><a href="http://jquery.com/">jQuery</a> <script src="jquery.js"></script><script src="jquery.js"></script> <script><script> $(document).ready(function(){$(document).ready(function(){ $("a").click(function(event){$("a").click(function(event){ alert("alert("On n'accède plus au site jquery.comOn n'accède plus au site jquery.com");"); event.preventDefault();event.preventDefault(); });}); });}); </script></script> </body></body></html></html>
![Page 11: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/11.jpg)
Exercice 1bExercice 1b<!doctype html><!doctype html><html><html> <head><head> <meta charset="utf-8"><meta charset="utf-8"> <title>Demo</title><title>Demo</title> </head></head> <body><body> <a href="http://jquery.com/">jQuery</a><a href="http://jquery.com/">jQuery</a> <script src="jquery.js"></script><script src="jquery.js"></script> <script><script> $(document).ready(function(){$(document).ready(function(){ $("a").click(function(event){$("a").click(function(event){ alert("alert("On n'accède plus au site jquery.comOn n'accède plus au site jquery.com");"); event.preventDefault();event.preventDefault(); });}); });}); </script></script> </body></body></html></html>
![Page 12: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/12.jpg)
Exercice 1c : Ajout d’une Exercice 1c : Ajout d’une classeclasse
<!doctype html><!doctype html><html><html> <head><head> <meta charset="utf-8"><meta charset="utf-8"> <title>Demo</title><title>Demo</title> <style><style> a.test { font-weight: bold; color:red;}a.test { font-weight: bold; color:red;} </style></style> </head></head> <body><body> <script src="jquery.js"></script><script src="jquery.js"></script> <script><script> $(document).ready(function(){$(document).ready(function(){ $("a").addClass("test"); $("a").addClass("test"); });}); </script></script> <a href="http://jquery.com/">jQuery</a><a href="http://jquery.com/">jQuery</a> </body></body></html></html>
![Page 13: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/13.jpg)
Exercice 1c : Ajout d’une classeExercice 1c : Ajout d’une classe
<!doctype html><!doctype html><html><html> <head><head> <meta charset="utf-8"><meta charset="utf-8"> <title>Demo</title><title>Demo</title> <style><style> a.test { font-weight: bold; color:red;}a.test { font-weight: bold; color:red;} </style></style> </head></head> <body><body> <script src="jquery.js"></script><script src="jquery.js"></script> <script><script> $(document).ready(function(){$(document).ready(function(){ $("a").addClass("test"); $("a").addClass("test"); });}); </script></script> <a href="http://jquery.com/">jQuery</a><a href="http://jquery.com/">jQuery</a> </body></body></html></html>
![Page 14: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/14.jpg)
Exercice 1c : Suppression d’une Exercice 1c : Suppression d’une classeclasse
<!doctype html><!doctype html><html><html> <head><head> <meta charset="utf-8"><meta charset="utf-8"> <title>Demo</title><title>Demo</title> <style><style> a.test { font-weight: bold; color:red;}a.test { font-weight: bold; color:red;} </style></style> </head></head> <body><body> <script src="jquery.js"></script><script src="jquery.js"></script> <script><script> $(document).ready(function(){$(document).ready(function(){ $("a").addClass("test"); $("a").addClass("test"); $("a").removeClass("test"); $("a").removeClass("test"); });}); </script></script> <a href="http://jquery.com/">jQuery</a><a href="http://jquery.com/">jQuery</a> </body></body></html></html>
![Page 15: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/15.jpg)
Exercice 1c : Suppression d’une Exercice 1c : Suppression d’une classeclasse
<!doctype html><!doctype html><html><html> <head><head> <meta charset="utf-8"><meta charset="utf-8"> <title>Demo</title><title>Demo</title> <style><style> a.test { font-weight: bold; color:red;}a.test { font-weight: bold; color:red;} </style></style> </head></head> <body><body> <script src="jquery.js"></script><script src="jquery.js"></script> <script><script> $(document).ready(function(){$(document).ready(function(){ $("a").addClass("test"); $("a").addClass("test"); $("a").removeClass("test"); $("a").removeClass("test"); });}); </script></script> <a href="http://jquery.com/">jQuery</a><a href="http://jquery.com/">jQuery</a> </body></body></html></html>
![Page 16: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/16.jpg)
Exercice 1d : Effet spéciauxExercice 1d : Effet spéciaux
<!doctype html><!doctype html><html><html> <head><head> <meta charset="utf-8"><meta charset="utf-8"> <title>Demo</title><title>Demo</title> </head></head> <body><body> <script src="jquery.js"></script><script src="jquery.js"></script> <script><script> $(document).ready(function(){$(document).ready(function(){ $("a").click(function(event){$("a").click(function(event){
event.preventDefault();event.preventDefault();$(this).hide("slow");$(this).hide("slow");
});}); });}); </script></script> <a href="http://jquery.com/">jQuery</a><a href="http://jquery.com/">jQuery</a> </body></body></html></html>
![Page 17: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/17.jpg)
Exercice 1d : Effet spéciauxExercice 1d : Effet spéciaux
<!doctype html><!doctype html><html><html> <head><head> <meta charset="utf-8"><meta charset="utf-8"> <title>Demo</title><title>Demo</title> </head></head> <body><body> <script src="jquery.js"></script><script src="jquery.js"></script> <script><script> $(document).ready(function(){$(document).ready(function(){ $("a").click(function(event){$("a").click(function(event){
event.preventDefault();event.preventDefault();$(this).hide("slow");$(this).hide("slow");
});}); });}); </script></script> <a href="http://jquery.com/">jQuery</a><a href="http://jquery.com/">jQuery</a> </body></body></html></html>
![Page 18: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/18.jpg)
Exercice 1e : CallBackExercice 1e : CallBack
• C’est l’appel d’une C’est l’appel d’une fonctionfonction en en argumentargument d’une autre d’une autre fonctionfonction
• Exemple de callback sans arguments : Exemple de callback sans arguments : $.get(‘unePage.html', maFonctionCallBack);$.get(‘unePage.html', maFonctionCallBack);
• Exemple de callback avec arguments :Exemple de callback avec arguments :$.get('unePage.html', function(){$.get('unePage.html', function(){ maFonctionCallBack(param1, param2); maFonctionCallBack(param1, param2); });});
![Page 19: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/19.jpg)
Test…Test…
![Page 20: jQuery en quelques minutes… Démarrage rapide… ://jquery.com](https://reader035.vdocuments.site/reader035/viewer/2022062417/551d9d7e497959293b8b661d/html5/thumbnails/20.jpg)
C’est fini…C’est fini…
Merci pour votre attention !Merci pour votre attention !