jQuery en quelques minutes… Démarrage rapide… ://jquery.com.
20
jQuery jQuery en quelques minutes… en quelques minutes…
-
Upload
faustine-aubert -
Category
Documents
-
view
113 -
download
4
Transcript of jQuery en quelques minutes… Démarrage rapide… ://jquery.com.
jQueryjQuery
en quelques minutes…en quelques minutes…
Démarrage rapide…Démarrage rapide…
• http://jquery.comhttp://jquery.com
Démarrage rapide…Démarrage rapide…
• Télécharger jQuery :Télécharger jQuery :
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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); });});
Test…Test…
C’est fini…C’est fini…
Merci pour votre attention !Merci pour votre attention !
