Jquery est une bibliothèque JavaScript qui permet d’agir sur le code HTML, CSS, JavaScript et AJAX. JQuery est indépendant des navigateurs.
Etape 1 : Utiliser jQuery
Télécharger la dernière version de JQuery sur le site de JQuery.
Réaliser une page HTML5 qui contient le code suivant
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Meuhh</title> </head> <body> Ce texte est affiché en HTML <span id="texteJQ"></span> <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script> <script src="jq-laVache.js"></script> </body> </html>
Puis un fichier jq-laVache.js avec
$(function() {
$('#texteJQ').html('Meuhhhh. Ce texte est affiché par jQuery.');
});
$() equivant à appeler JQUERY comme ceci jQuery()
Etape 2 : Selection d’éléments
D’apres le code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sélecteurs CSS</title>
</head>
<body>
<form>
Nom d'utilisateur
<input type="text" name="nom"><br />
Mot de passe
<input type="password" name="pass"><br />
Sexe
Homme <input type="radio" name="sexe" value="H">
Femme <input type="radio" name="sexe" value="F"><br />
Commentaires
<textarea rows="3" name="commentaires">Tapez vos commentaires
ici</textarea><br />
<img src="chat.jpg"><br />
<input type="submit" value="Envoyer">
<input type="reset" value="Annuler">
</form>
<ul class="rouge">
<li class="impair">premier élément de la liste à puces</li>
<li class="pair">deuxième élément de la liste à puces</li>
<li class="impair">troisième élément de la liste à puces</li>
</ul>
<div>
<ul class="bleu">
<li class="impair">premier élément de la liste à puces</li>
<li class="pair">deuxième élément de la liste à puces</li>
<li class="impair">troisième élément de la liste à
puces</li>
</ul>
</div>
<span id="wiwi">salut les vaches</span>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script>
$(function() {
// Le code jQuery sera tapé ici
});
</script>
</body>
</html>
Modifier la couleur de fond de l’élément textarea en vert en jQuery.
Changer la couleur des balises li par bleu.
Etape 3 : enlever un element (remove)
Enlever l’affichage de la balise id=wiwi
Etape 4 : modifier une valeur dans un champs (val)
Ecrire votre nom dans la zone de texte qui correspondant au nom
Ecrire un mot de passe dans la zone de texte correspondante.
Etape 5 : modifier un texte html ( text)
Modifier le texte « nom d’utilisateur » par « votre nom »
Etape 6 : effet (delay – fadein – fadeout)
Masquer l’image puis la réafficher après un certain temps.
Etape 7 : gestion des evenements
Masquer l’image après un click de souris dessus
La ré-afficher lorsque l’on tape la lettre i .
Etape 8 : gestion des evenements (alert)
Ajouter un bouton à votre page.
Lors d’un click sur le bouton, afficher un message dans une boite de dialogue
Etape 9 : optimisation de jQuery
Changer le lien CDN de JQuery par une version que vous avez téléchargé et déployé sur votre serveur.
Etape 10 :
Prendre l’image de Pacman.
Réussir à la déplacer grâce au clavier en jQuery
Le faire disparaître au bout de 15 déplacements.