javascript avec jQuery

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 de main : 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).

Le résultat.

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.

Cette entrée a été publiée dans Cours, avec comme mot(s)-clef(s) , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.

3 réponses à javascript avec jQuery

  1. Baptiste F dit :

    À noter que pour l’inclusion de scripts, il est inutile avec HTML5 de préciser le type. Autrement dit, il est correct d’écrire:

    à la place de:

    On n’est même pas obligés de fermer la balise (), puisqu’on est pas dans du XHTML. Ca marche également avec les styles CSS. Certains vont même jusqu’à ne pas écrire d’extension, exemple:

    Pour optimiser le chargement de la page pour le visiteur, on peut placer ses scripts non pas dans le mais dans le bas de la page, en dessous du . Les navigateurs chargent la page « de haut en bas ». En utilisant cette méthode, le contenu sera chargé avant les scripts, utile s’ils sont lourds (comme Scriptaculous par exemple, alternative à jQuery), mais à ne pas appliquer si les scripts sont nécessaires pour l’affichage du contenu (ex: Un élément affiché normalement est caché au chargement par javascript).
    Autre astuce, n’inclure le javascript que s’il est nécessaire sur la page courante (par exemple en PHP: if ($page == "animations") { echo("<script ...");}). C’est toujours ça de gagné.

    Pour finir, ne pas utiliser javascript pour des éléments essentiels d’un site, par exemple la navigation, ou alors proposer une alternative. Selon les études, 5 à 7% des utilisateurs n’ont pas de javascript (navigateurs textuels (comme Lynx), lecteurs visuels (pour les aveugles), etc). C’est peu, mais ils ne sont pas inexistants pour autant.

  2. Baptiste F dit :

    Les codes de mon précédent commentaire n’ont pas été affichés. Les voici (remplacez les ‘[' et ']‘ par  »)

    [...] il est correct d’écrire:
    [script src="js/toto.js"][/script]
    à la place de:
    [script type="text/javascript" src="js/toto.js"][/script]
    [...] exemple:
    [link rel="stylesheet" href="/css/oldschool"]

    Une autre technique d’optimisation du JS consiste à compiler son code (enlever tous les commentaires et les espaces). Google propose un outil en ligne qui le fait automatiquement.

  3. Christophe dit :

    Merci Baptiste (et désolé pour les problèmes de html dans la gestion des commentaires, je constate en écrivant ce commentaire que les balises autorisées sont écrites en dessous du textarea, et script n’en fait pas partie)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Merci de répondre à cette question pour prouver que vous n'êtes pas un robot :

comment appelle-t-on l\'eau gelée ? (un seul mot)