La base
- inclure un fichier js dans html
<script type="text/javascript" src="..."></script> - télécharger la bibliothèque, la mettre quelque part dans
votre répertoire, et la charger dans votre page, avec :
<script type="text/javascript" src="jquery.js"></script> - La fonction
$
la fonction principale de jQuery, qui permet d’accéder aux
éléments du DOM (l’arbre de la page) au moyen de sélecteurs css. $(document).ready,
événement qui fait office demain: on lui
passe en paramètre une fonction qui sera lancée quand le document
aura été complètement chargé.- Lier une fonction à un événement,
c’est une des opérations
principales en javascript. Les fonctions sont donc passées en
paramètre d’autres fonctions.
Un exemple simple
Le html :
<p>Bonjour...</p>
<p class="test">Youhou, survole-moi !!!</p>
Le js :
$(document).ready(function(){
$(".test").mouseenter(function() {
$(this).replaceWith('<p>Ahahahahaha !!!</p>')
});
});
Lorsque le document est prêt, on enclenche une action sur l’événement
mouseenter de tous les éléments de classe test (en l’occurrence,
le deuxième paragraphe).
Le paramètre de la fonction $ est un sélecteur css. La fonction est
appliquée à tous les éléments sélectionnés (ici il n’y en a qu’un).
On ajoute des effets à notre exemple
Le résultat ici, utilisant ce fichier js.
C’est en pensant aux « boutons suicides » utilisés ici que j’ai ajouté la vidéo en début de billet. Elle illustre très bien le mécanisme de déclenchement d’une action sur un événement.
Les rubriques principales de la doc (facile à lire)
J’ai utilisé chacun de ces aspects dans l’exemple.