Introduction à jQuery

Frameworks JavaScript

• Pendant longtemps, les incompatibilités entre navigateurs ont posé de gros problèmes pour le développement en JavaScript
• À cela s'ajoutait le fait que le DOM était fastidieux à manipuler (délicat à parcourir, beaucoup de code pour ajouter des nœuds)
• Cela a mené à la création de frameworks JavaScript, qui visaient à
  • cacher les incompatibilités derrière une interface commune
  • faciliter la manipulation du DOM
  • améliorer le langage
• Les plus connus : jQuery, Mootools, YUI (Yahoo), Angular (Google), Prototype (abandonné)

Introduction à jQuery

jQuery vise à simplifier le développement JavaScript :

• Parcours et modification du DOM
• Manipulation de CSS
• Gestion des événements
• Effets visuels et animations
• Ajax
• … et de très nombreux plugins

Framework extrêmement populaire !

Importer jQuery

• Télécharger jQuery et placer le fichier dans l'arborescence
• Il suffit ensuite de l'importer comme n'importe quel script :

  <script src="/chemin/vers/jQuery.js"></script> 
    

• Il est aussi possible de l'importer depuis un serveur dédié

L'objet jQuery

• Le framework jQuery définit principalement un objet jQuery, aussi appelé $
• Cet objet permet de faire de nombreuses choses différentes
• Première utilisation : attendre que le DOM soit construit avant de lancer le script

  $(function () {
    alert("Le DOM est prêt !");
  }); 
    

• On placera tout notre code dans cette fonction
• Correspond à l'événement DOMContentLoaded (différent de l'événement load, qui attend que toutes les images soient chargées)

Les sélecteurs (1)

• On utilise $ pour manipuler les éléments du DOM
• Pour récupérer des éléments, on utilise des sélecteurs CSS
  • Par id : $( "#myDiv" )
  • Par classe : $( ".myClass" )
  • Descendance : $( "form input" )
  • Par type et par attribut $( "input[name='first_name']" )
  • Descendance directe : $( "ul.topnav > li" )
  • Sélecteur multiple : $( "div, span, p.myClass" )
• Selectors API

Les sélecteurs (2)

On peut également utiliser des méthodes pour filtrer les résultats :

• $( "div.foo" ).has( "p" ); les éléments div.foo qui contiennent des "<p>"
• $( "h1" ).not( ".bar" ); // les éléments h1 qui ne contiennent pas une classe "bar"
• $( "ul li" ).filter( ".current" ); // liste des éléments de classe "current"
• $( "ul li" ).first(); premier élément de la liste renvoyé
• $( "ul li" ).eq( 5 ); // le sixième élément

Traversing API

Modifier le style

• Utilisation de la méthode css()
• On peut lui passer une propriété et une valeur, ou un objet avec plusieurs propriétés :

  $("#toto").css("color", "red");
  
  $("#toto").css({
      "background-color": "yellow",
      "font-weight": "bold"
  });
  

• On récupère la valeur d'une propriété CSS avec la même méthode :

  alert($("#toto").css("color"));

Contenu d'un élément

• Utilisation de la méthode text(), pour récupérer le contenu textuel d'un élément et de ses descendants, ou le modifier

  $("#toto").text("Bonjour");
  alert("Toto contient le texte suivant : " + 
        $("#toto").text());
  

• Utilisation de la méthode html(), pour récupérer le contenu HTML d'un élément et de ses descendants, ou le modifier

  alert("Toto contient le code HTML suivant : " + 
        $("#toto").html());
  $("#toto").html("<p>Un nouveau paragraphe</p>");
  

• Ces deux méthodes correspondent aux attributs textContent et innerHtml du DOM, mais garantissent un fonctionnement correct sur tout navigateur

Attributs et classes

• La méthode attr() permet de récupérer ou modifier un ou plusieurs attributs :

  $("img#thumb").attr("src");
  $("a#toto").attr("href", "http://bit.ly/4kb77v");
    

• Pour gérer les classes plus simplement, il y a des méthodes spécifiques :
  • $("elt").hasClass("class") -> Indique si un selecteur possède la classe "class"
  • $("elt").addClass("class") -> Ajoute la classe "class" à un selecteur
  • $("elt").removeClass("class") -> Enlève une classe d'un élément
• Utiliser des classes définies dans le fichier CSS, plutôt que $("elt").css() !

Manipuler le DOM

• Nombreuses méthodes pour manipuler les éléments du DOM
• Ajout de fils : append, prepend, before, after…

  $('ul#toto').append('<li>dernier item</li>');
  $('ul#toto').prepend('<li>premier item</li>');
  $('ul#toto > li').eq(2).before('<li>nouveau 3e item</li>');
  

• Voir aussi remove, replaceWith, wrap, etc.
• Manipulation API

Itérer sur des éléments

• Un objet $ peut contenir plusieurs éléments
• Par exemple $("div") contient tous les div
• La plupart des méthodes font effet sur tous les éléments ; ex. $("li").addClass("toto") ajoute la classe toto à tous les items
• Sinon, on peut itérer sur les éléments en utilisant la méthode each(), qui implémente une structure « for each » avec une fonction :

  $(".test").each(function () {
      console.log("Contenu : " + $(this).text());
  });
  

• $(this) représente l'élément en cours de traitement

La gestion des événements

Events API

Méthodes pour gérer les événements standard : .click(), .mouseover(), .focus(), .blur(), .change(), etc.

$("p").click(function() {
console.log( "vous avez cliqué sur un paragraphe" );
});

$( "p" ).mouseover(function() {
console.log( "au dessus d'un paragraphe!" );
});

exemple

La gestion des événements

• Méthode on pour attacher un ou plusieurs événements

  $("p").on("mouseenter mouseleave", function() {
  console.log("événement souris");
  });
  

• Avec one, l'événement n'est écouté qu'une seule fois
• exemple

Les effets

• jQuery permet d'animer facilement des éléments
• Afficher/cacher un événement :

  $( "p" ).hide();
  $( "p" ).show();
  $( "p" ).toggle();
  

• Variantes : slide (slideUp(), slideDown(), slideToggle()) et fade (fadeOut(), fadeIn(), fadeToggle())
• Toutes ces fonctions peuvent prendre en paramètre la vitesse de l'animation (mot-clé ou durée)

  $( "p" ).hide(870);
  $( "p" ).show("fast");    // 200 ms
  $( "p" ).toggle("slow");  // 600 ms
  

• exemples

Ajax

• jQuery permet de faire de l'Ajax avec moins de code (Ajax API)
• La méthode load remplace le contenu d'un élément par le résultat d'une requête

  $(".result").load("fragment.html");
  

• Pour les autres usages : fonctions $.get(), $.getJSON(), $.post()

  $.get("fragment.html"), function (data) {
    $(".result").html(data);
    alert("Récupération terminée");
  });
  

Chaînage

• Les méthodes de jQuery renvoient quasiment toujours l'objet modifié
• Cela permet de chaîner les appels de méthodes

  $("#toto")
      .removeClass("active")
      .addClass("hidden")
      .hide();
  $("#tutu")
      .click(handler1)
      .mouseout(handler2);
  

• Attention à la lisibilité du code ! Pas forcément conseillé, mais ne soyez pas surpris si vous le voyez.

Plugin JqueryUI

• Nombreux plugins, avec un dépôt officiel
• jQueryUI est un plugin qui regroupe un ensemble de fonctionnalités pour créer une interface utilisateur
• Voir les exemples sur le site

Conclusion

• jQuery facilite le développement JavaScript
• Extrêmement répandu, quasiment inévitable
• Moins « vital » qu'auparavant :
  • les navigateurs respectent davantage les standards
  • les standards (DOM, ECMAScript) ont évolué et sont plus simples d'utilisation (fonctions querySelector…)
• en perte de vitesse depuis quelques années
• Reste néanmoins très pratique et permet de gagner du temps