Création de pages Web dynamiques et sympathiques.
7
Création de pages Web dynamiques et sympathiques
-
Upload
aloys-ragot -
Category
Documents
-
view
105 -
download
1
Transcript of Création de pages Web dynamiques et sympathiques.
Création de pages Web dynamiques et sympathiques
JQuery permet d'améliorer à moindres frais vos pages Web et autres blogs.Télécharger la dernière version de JQuery
sur http://jquery.com/
Squelette d'une page XHTML dans laquelle du code JQuery va être inséré <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
//Emplacement du code JavaScript qui invoque JQuery
</script>
</head>
<body>
<!-- Emplacement du code HTML/XHTML --!>
</body>
</html>
Avant tout, tester que le document est bien chargé avec la fonction JQuery ready() appliquée à l'objet document<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function() { alert('Le document est prêt à être manipulé');} ); </script> </head> <body> <!-- Emplacement du code HTML/XHTML --!> </body></html>
Capturer un événement clic sur un lien et le détourner <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script src="jquery-1.3.2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ alert("Vous avez cliqué sur le lien '"+ $(this).html()); return false; }); }); </script> </head> <body> <a href="http://www.mediaforma.com">Cliquer ici</a> </body> </html>
Modifier un élément sur un clic<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head> <script src="jquery-1.3.2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").mouseenter(function(){ $(this).html("Survol du lien"); }); $("a").mouseleave(function(){ $(this).html("Cliquez ici"); }); }); </script> </head> <body> <a href="http://www.mediaforma.com">Cliquez ici</a> </body></html>
Utilisation de styles CSS et d'éléments XHTML
Elément Codage Exemple
une classe CSS $(".nom"), om nom est le nom de la classe $(".lien")
une balise HTML/XHTML $("balise") où balise est la balise HTML/XHTML $("p")
les éléments a contenus dans un élément d’id b $("#b > a") $("#conteneur > span")
les éléments a contenus dans un élément b de classe c $("b.c > a") $("table.matable > th")
