Créer les 2 fichiers suivants :
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
<h1>Fiche</h1>
<div id='fiche'></div>
</body>
</html>
script.js
$(function(){
var nom="Toto"
var prenom="Titi"
$('#fiche').append('<p>nom : '+nom+'</p>');
$('#fiche').append('<p>prénom : '+prenom+'</p>');
});
Etudier attentivement l'exemple ci-dessus. Tester ce même exemple en double-cliquant sur index.html
L'exemple développé dans le "À faire vous-même 2.1" n'est pas très complexe à comprendre. Vous commencez sans doute à comprendre l'intérêt de jQuery avec l'utilisation des variables "nom" et "prenom"
Il est à noter que la méthode "append" ajoute du contenu à la fin de la balise (ici la balise div ayant l'id "fiche"). Dans notre exemple la balise p contenant le prénom est ajoutée après la balise p contenant le nom.
La méthode "prepend" permet d'ajouter du contenu en début de balise.
Modifier le code développé dans le "À faire vous-même 2.1" en utilisant la méthode "prepend" à la place de "append".
Créer les 2 fichiers suivants :
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
<h1>Fiche</h1>
<div id='fiche'></div>
</div>
</body>
</html>
script.js
$(function(){
maFiche={
id : "7845",
nom :"Durand",
prenom :"Jean-Pierre",
dateNaissance :"17/08/1967"
}
$('#fiche').append('<p>id : '+maFiche.id+'</p>');
$('#fiche').append('<p>nom : '+maFiche.nom+'</p>');
$('#fiche').append('<p>prénom : '+maFiche.prenom+'</p>');
$('#fiche').append('<p>date de naissance : '+maFiche.dateNaissance+'</p>');
});
Etudier attentivement l'exemple ci-dessus. Tester ce même exemple en double-cliquant sur index.html
Si vous avez du mal à comprendre l'exemple précédent, n'hésitez pas à vous referez aux activités consacrées aux objets javascript.