Cours
4. XHTML et Javascript
4.16. Jquery
Un Framework (armature, cadre d'applications, cadriciel ou atelier de développement) est un ensemble de fonctions facilitant la création de tout ou d'une partie d'une page Internet. En 2006, un excellent Framework a été publié en Javascript sous le nom de jquery. Voici comment cela fonctionne:
4.16.1 Télécharger
Téléchargez le fichier Javascript → jquery-1.3.2.min.js. Vous trouverez toujours la version la plus récente dans la page de → jquery. Placez ce fichier dans un répertoire de votre choix, par exemple dans le sous-répertoire jquery/ du répertoire où vous mettez vos fichiers HTML.
4.16.2 Insertion dans votre page HTML
Insérez la lignes suivante dans le <head> de votre page HTML:
<script src="jquery/jquery-1.3.2.min.js" ></script>
4.16.0 Exemple 0: → Cliquer sur une balise
<html>
<head>
<script src="jquery/jquery-1.3.2.min.js"></script>
<script>
\$(document).ready(function() {
\$("span").click(function() {
alert("Hello world!");
});
});
</script>
</head>
<body>
<span> Cliquez sur moi </span>
</body>
</html>
Explication :
\$("span") se réfère à la balise <span>.......</span> de la partie HTML .
.click est un → événement subi par cette balise, dans notre cas un click de l'utilisateur.
function() {............................} est l'action déclenchée par cet événement. Notez les parenthèses ( ) qui doivent entourer cette action.
Ne vous préoccupez pas de tout ce qui est rouge, nous allons l'expliquer plus tard. Cette partie sera d'ailleurs absolument la même dans tous les exemples qui vont suivre.
4.16.1 Exemple 1: → Cliquer sur une balise marquée par son ID.
<html>
<head>
<script src="jquery/jquery-1.3.2.min.js"></script>
<script>
\$(document).ready(function() {
\$("#a").click(function(){
alert("mon école");
});
\$("#b").click(function(){
alert("mon cours");
});
\$("#c").click(function(){
alert("mon cadre d\'applications");
});
});
</script>
</head>
<body>
<button id="a">LHCE</button>
<button id="b">INFO</button>
<button id="c">JQUERY</button>
</body>
</html>
Explication :
\$("#a") , \$("#b") et \$("#c") se réfèrent aux balises <button> de la partie HTML identifiées par id="a" ; id="a" et id="c" .
# est un → sélecteur de jquery.
4.16.2 Exemple 2: → Introduire un contenu texte pur ou un contenu HTML dans une balise.
<html>
<head>
<script src="jquery/jquery-1.3.2.min.js"></script>
<script>
\$(document).ready(function() {
txt="OK!"
ht="<b style='color:red'>OK!</b>";
\$(document).ready(function(){
\$("button").click(function(){
\$("#b").text(txt);
\$("#c").html(ht);
\$("#d").text(ht);
\$("#e").html(txt);
});
});
});
</script>
</head>
<body>
<button id="a">Cliquez:</button><br />
Texte dans une balise: <span id="b"></span><br />
HTML dans une balise:<span id="c"></span><br />
HTML comme texte dans une balise:<span id="d"></span><br />
Texte comme HTML dans une balise:<span id="e"></span><br />
</body>
</html>
Explication :
Premier exemple de → manipulation du code HTML>
Notez que si vous introduisez un contenu HTML comme texte dans une balise (ici <span> ), il est exprimé comme texte intercalé dans la balise où vous l'avez introduit, si vous l'introduisez comme HTML, il y est interprété comme HTML par le navigateur!
4.16.3 Exemple 3: → Ajouter un code HTML derrière (devant) le code d'une balise ou derrière (devant) la balise entière.
<html>
<head>
<script src="jquery/jquery-1.3.2.min.js"></script>
<script>
\$(document).ready(function() {
\$("button").click(function(){
\$("p").before("<b style='color:blue'>Ceci est le </b>.")
\$("p").append(" <b style='color:blue'>cours de programmation Internet</b>")
\$("p").after("<b style='color:cyan'>LHCE</b>.")
\$("h2").prepend(" <img src='images/donald.gif'>")
\$("h2").append(" <center><img src='images/calvin.gif'></center>")
})
})
});
</script>
</head>
<body>
<button>Cliquez</button>
<h2><i>Titre</i></h2>
<p><i>Paragraphe</i>: </p>
</body>
</html>
Explication :
Les codes HTML marqués ici en couleur orange sont ajoutés en fin des codes HTML déjà contenus dans les deux balises.
Le code HTML marqué ici en bleu foncé est ajouté au début du code HTML déjà contenu dans la balise <p>.
Le code HTML marqué ici en couleur verte est ajouté derrière la balise <p>.
Le code HTML marqué ici en couleur bleu claire est ajouté avant la balise <h2>.
4.16.4 Exemple 4: → Cacher et montrer une balise marquée par son ID.
<html>
<head>
<script src="jquery/jquery-1.3.2.min.js"></script>
<script>
\$(document).ready(function() {
\$("#c").click(function(event){
\$("#e").hide("slow");
});
\$("#d").click(function(event){
\$("#e").show("fast");
});
});
</script>
</head>
<body>
<button id="c">Enlever lentement</button>
<button id="d">Remettre vite</button>
<hr />
<div id="e">Andra moi ennepe Mousa polutropon hos malla polla plancht'epei Troies ieron ptolietron eperse </div>
<hr />
</body>
</html>
Explication :
hide et hide sont des exemples d' → effets portant sur des éléments HTML (balises et contenus))
4.16.5 Exemple 5: → Entourer une balise marquée par son ID d'autres balises
<html>
<head>
<script src="jquery/jquery-1.3.2.min.js"></script>
<script>
\$(document).ready(function() {
\$("#a").click(function(event){
\$('#txt').wrap("<h1></h1>")
});
});
</script>
</head>
<body>
<button id="a">Agrandir</button>
<br />
<span id="txt">Il fait une chaleur à crever, mais trop chaud pour mourir !</span>
</body>
</html>
Explication :
La partie verte d'ID = txt est entourée des balises <h1> et </h1> et devient ainsi un titre!
4.16.6 Exemple 6: → Remplacer une balise avec son contenu par une autre balise avec un autre contenu.
<html>
<head>
<script src="jquery/jquery-1.3.2.min.js"></script>
<script>
\$(document).ready(function() {
\$("#a").click(function () {
\$("h1").replaceWith("<span>Il fait un froid de canard !</span>");
});
});
});
</script>
</head>
<body>
<button id="a">Remplacer</button>
<br />
<h1>Il fait une chaleur à crever, mais trop chaud pour mourir !</h1>
</body>
</html>
Explication :
La partie bleu-claire remplace la partie verte!
4.16.7 Exemple 7: → Cloner le contenu d'une balise et introduire dans une autre balise.
<html>
<head>
<script src="jquery/jquery-1.3.2.min.js"></script>
<script>
\$(document).ready(function() {
\$("#a").click(function(){
var copie = \$(this).clone();
\$('#b').append(copie);
});
});
});
</script>
</head>
<body>
<span id="a" /> Cliquer </span>
<div id="b"></div>
</body>
</html>
Explication :
this se réfère à la balise <span> identifiée par a à laquelle s'applique la fonction qui porte sur cette balise et qui renferme this.
En cliquant sur la balise identifiée par a, le contenu de cette balise est copié et introduit dans la balise <div> identifiée par b.
4.16.8 Exemple 8: → Changer un attribut d'une balise.
<html>
<head>
<script src="jquery/jquery-1.3.2.min.js"></script>
<script>
\$(document).ready(function() {
\$("#a").click(function(){
\$("img").attr({src:"images/donald.gif"});
});
});
});
</script>
</head>
<body>
<button id="a">Changer attribut</button>
<img src="images/fifi.gif" />
</body>
</html>
Explication :
L'attribut src remplace l'attribut src initial de la balise <img>
Remarquez le double-point derrière src!
4.16.9 Exemple 9: → Enlever ou affecter une classe à une balise.
<html>
<head>
<script src="jquery/jquery-1.3.2.min.js"></script>
<style>
.maclasse {
background:red;
font-size:42px;
}
</style>
<script>
\$(document).ready(function() {
\$("#a").click(function(event){
\$("#e").addClass("maclasse");
});
\$("#b").click(function(event){
\$("#e").removeClass("maclasse");
});
});
});
</script>
</head>
<body>
<button id="a">Attribuer classe</button>
<button id="b">Enlever classe</button>
<div id="e">Mignonne allons voir si la rose....</div>
</body>
</html>
Explication :
La classe maclasse (avec toutes ses propriétés !) définie dans <style> est ajoutée ou enlevée à la balise identifiée par e.
4.16.10 Exemple 10: → Interrupteur de classe d'une balise.
<html>
<head>
<script src="jquery/jquery-1.3.2.min.js"></script>
<style>
.maclasse {
background:cyan;
color:blue;
font-size:20px;
}
</style>
<script>
\$(document).ready(function() {
\$("#a").click(function(event){
\$("#e").toggleClass("maclasse");
});
});
});
</script>
</head>
<body>
<button id="a">Interrupteur de classe</button>
<div id="e">Mignonne allons voir si la rose....</div>
</body>
</html>
Explication :
La classe maclasse (avec toutes ses propriétés !) définie dans <style> est ajoutée ou enlevée à la balise identifiée par e.
4.16.11 Exemple 11: → Modifier une propriété CSS d'une balise.
<html>
<head>
<script src="jquery/jquery-1.3.2.min.js"></script>
<style>
p {
background-color:cyan;
color:blue;
font-size:20px;
}
</style>
<script>
\$(document).ready(function() {
\$("button").click(function(){
\$("p").css("background-color","yellow")
})
})
});
</script>
</head>
<body>
<button>Cliquez</button>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
</body>
</html>
Explication :
La propriété background-color de l'attribut style attaché à toutes les balises <p> change de valeur.
Ceci est un exemple de → manipulation des propriétés CSS d'un élément HTML.
4.16.12 Exemple 12: → Modifier plusieurs propriétés CSS d'une balise.
<html>
<head>
<script src="jquery/jquery-1.3.2.min.js"></script>
<style>
p {
background-color:cyan;
color:blue;
font-size:20px;
}
</style>
<script>
\$(document).ready(function() {
\$("button").click(function(){
\$("p").css({"background-color":"yellow","font-size":"200%"})
})
})
});
</script>
</head>
<body>
<button>Cliquez</button>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
</body>
</html>
Explication :
Les propriétés background-color et font-size de l'attribut style attaché à toutes les balises <p> changent de valeur.
Remarquez les double-points!!