Développement web il3

jQuery

jQuery

• John Resig, 2006
• Bibliothèque JS, gratuit, OS (licence MIT)
• Facilite le développement JS pour les tâches fréquentes :
  • Manipulations DOM
  • Manipulations CSS
  • Réponse aux évenements du navigateur
  • Effets visuels et animations
  • Requêtes et réponses Ajax
• Abstraction implémentations différents navigateurs
• Facile à apprendre
• Utilisation du chaînage des méthodes et des callbacks
• Toujours utilisé ? Pourquoi ?

Utilisation

• Inclusion CDN

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

• Nos scripts

<script src="application.js"></script>

• Syntaxe basique

$(selecteur).action();      // $() est un raccourci pour jQuery()

• Utilisation de sélecteurs CSS, id ou classes

$(document);                // retourne le DOM
$("h3").hide();             // cache tous les éléments h3
$(".post");                 // sélectionne les éléments de classe "post"
var node = $('<p>New</p>'); // un nouveau noeud

• Pour être sûr que le document est chargé :

$(document).ready(function(){
    console.log("prêt!")
});

$(function() {
    console.log("prêt!")
});

Sélection dans le DOM

• Sélection

$("h1");                        // noeud élément
$("h1").text();                 // noeud texte en lecture

• Modification

$("h1").text("Nouveau Texte"); // noeud texte modifié

• Tous les fils (sélecteur descendant)

$("#intro li");

• Que les fils directs (sélecteur d’enfants)

$("#intro > li");

• Sélecteur multiple

$(".post, #main ");

• D’autres exemples de sélecteurs

Parcours (traversing)

• Parcours du DOM dans les trois directions :
  • Depuis le noeud courant (sélectionné)
  • Haut : parent(), parents()
  • Bas : children(), find()
  • Frères : sibling(), next(), prev()
• Filtrage
  • first(), last(), eq()
  • filter(), not()
  • Référence

Modifications de contenu

• Accès au contenu :
  • text() : get/set le texte entre les balises
  • html() : get/set l’élément complet (yc balises)
  • val() : get/set les valeurs d’un formulaire
  • attr() : set la valeur d’un attribut
• Ajout de contenu :
  • append(), prepend() : au début/fin de la sélection (dans l’élément)
  • before(), after() : avant/après la sélection
• Suppression
  • empty() : suppression des enfants
  • remove() : supression de la sélection (possibilité de filtrer)

Accès aux CSS

• Accès aux classes
  • addClass() : ajout de classe(s) à l’élément sélectionné
  • removeClass() : suppression de classe(s)
  • toggleClass() : suppression si présente, ajout sinon
• Attribut style d’un élément : css()

$("p").css("background-color");                 // get
$("p").css({"background-color":"yellow","font-size":"200%"});   // set

Evénements

• Souris
  • click, dblclick, mouseenter, mouseleave
• Clavier
  • keypress, keyup, keydown
• Formulaires
  • submit, change, focus, blur
• Document
  • ready, load, resize, scroll, unload
• Exemple

$("p").click(function(){
  // code à éxecuter ici
}); 

AJAX

• $(selector).load(URL, data, callback)
  • URL : Ressource ciblée par la requête
  • data : éventuel contenu
  • callback : fonction de rappel avec 3 paramètres :
    • responseTxt
    • statusTxt
    • xhr
• $.get(URL, callback)
• $.post(URL, data, callback)

Effets et animations

• hide(), show(), toggle()
• fadeIn(), fadeOut(), fadeToggle()
• slideDown(), slideUp(), slideToggle()
• animate()

Alternatives

• jQuery aussi, ça fait vieux, YBL 17.10.29
• bling.js
• API queryselectorall() au lieu des getElementsBy…

Références

• Site officiel de jQuery
• Tutos w3schools
• SizzleJS : uniquement les sélecteurs
• Comparaison avec Vanilla JS
• You might not need jQuery

Sources