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

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()

Développement web il3

jQuery

jQuery

Utilisation

Sélection dans le DOM

Parcours (traversing)

Modifications de contenu

Accès aux CSS

Evénements

AJAX

Effets et animations

Alternatives

Références

Sources