Bibliothèque JavaScript créée en 2006
par John Resig / @jeresig
(également créateur de Processing.js et Sizzle.js)

Code libre et open-source, disponible sur Github

Conçu pour faciliter l'écriture de scripts côté client.

Qui l'utilise ?

Google, Amazon, Mozilla, Wordpress, Intel, BBC, Bank of America, IBM, Codeschool, ... et beaucoup beaucoup d'autres !

Pourquoi ?

Développement plus rapide en cycle de production.

Librairie très légère, en comparaison à
ce qu'elle permet de faire.

Compatibilité cross-browsers

De nombreux plugins et une forte communauté.

Que peut-on faire avec ?

Manipulation du DOM (arbre HTML)
Manipulation des styles CSS
Gestion simplifiée des évènements en JavaScript
Effets visuels et animations basiques (fade/slide)
Simplification des requêtes HTTP (Ajax)

Attention

jQuery n'est pas un langage de programmation !
On ne programme pas en jQuery ... on programme en JavaScript !

jQuery n'est pas un framework (≠ Angular, Vue.js)
C'est une librairie qui fournit des fonctions utilitaires

jQuery n'est pas unique
Principal concurrent : Mootools

Installation

jQuery est un fichier JavaScript, facilement téléchargeable via le site officiel.

jquery.js jQuery

jquery.min.js jQuery

Il s'inclut donc dans une page web comme un fichier JS normal :


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


<script src="jquery.min.js"></script>

Versions de jQuery

Laquelle choisir ?

v1.12.4 (~ 96 Ko)
IE6+ / Opera 12 / Safari 5
v2.2.4 (~ 84 Ko)
IE9 -> IE10
v3.2.1 (~ 88 Ko)
Navigateurs modernes (IE11/Edge ...) + nouvelles features

Téléchargement

Via le site web
https://jquery.com

Via un CDN
https://unpkg.com/jquery

Via NPM
npm install jquery

Récapitulatif


<!DOCTYPE html>
<html>
<head>
  <title>Mon site utilisant jQuery...</title>
</head>
<body>

  <script src="https://unpkg.com/jquery"></script>
  <script>
    /*
      jQuery fournit la variable globale « jQuery »,
      aussi connue par le raccourci « $ »
    */
  </script>

</body>
</html>
            index.html

API

La fonction jQuery()

Fonction maîtresse / de haut niveau.

Généralement utilisée pour sélectionner un groupe de balises HTML à la façon d'un sélecteur CSS.

CSS


article > p {
  font-size: 14px;
}

jQuery


jQuery('article > p')
  .css('font-size', '14px');

Cette fonction jQuery() est couramment utilisée et écrite très souvent dans le code JS.

Cela devient fastidieux d'avoir des jQuery() partout dans le code ...

C'est pourquoi, jQuery() possède un alias : $()

CSS


article > p {
  font-size: 14px;
}

jQuery


$('article > p')
  .css('font-size', '14px');

Intéraction DOM

Un code qui intéragit sur le DOM ne doit être exécuté que lorsque le navigateur à construit l'intégralité de l'arbre.

On réagit à l'événement natif DOMContentLoaded

JavaScript natif


document.addEventListener('DOMContentLoaded', function() {
  // Do something cool with the DOM...
}, false);

jQuery


$(document).ready(function() {
  // Do something cool with the DOM...
});


                document

est un objet DOM JavaScript standard.


                $(document)

retourne un objet jQuery.


<button id="btn">Click me</button>


var myButton = document.getElementById('btn');

// JavaScript natif
myButton.style.display = "none";

// jQuery
$(myButton).hide();
  // ou
$('#btn').hide();

Conclusion

jQuery peut être considéré comme un ensemble de méthodes pour faciliter la manipulation du DOM

Il existe de nombreuses méthodes jQuery :

.addClass()
.removeClass()
.toggleClass()
.hasClass()
.attr()
.removeAttr()
.insertAfter()
.insertBefore()

.css()
.text()
.html()
.append()
.prepend()
.remove()
.show()
.hide()

Doc : api.jquery.com

Traversing

Le traversing en jQuery décrit la possibilité de naviguer à travers l'arbre DOM.

Problème :

Comment appliquer la classe CSS .selected au <label> parent de la case cliquée ?

Option 1 Option 2 Option 3


<label>
  <input type="checkbox"> Option 1
</label>
<label>
  <input type="checkbox"> Option 2
</label>
<label>
  <input type="checkbox"> Option 3
</label>


 
$('[type=checkbox]').click(function() {

  $(this)
    .parent('label')
    .toggleClass('visible');

});

find() et parents()

Liens de parenté


<nav>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</nav>


$('nav').find('li') /* À partir du <nav>,
                       trouver les <li>
                       enfants les plus
                       proches */
// OU l'inverse :
$('li').parents('nav') /* À partir du <li>,
                       trouver le <nav>
                       parent le plus
                       proche */

prev() et next()

Liens de proximité


<div class="un">1</div>
<div class="deux">2</div>
<div class="trois">3</div>


$('.un').next().next(); /* Va chercher la
                          div .trois */

$('.deux').prev(); /* Va chercher la div
                      .un */

Grâce au traversing, on peut facilement naviguer et accéder à un ou plusieurs éléments à partir de n'importe quel endroit grâce aux fonctions .find(), .parents(), .prev() et .next()

Liste des méthodes jQuery appartenant à la catégorie du traversing :
https://api.jquery.com/category/traversing/

Évènements

En JavaScript, un évènement représente une action effectuée par le visiteur (clic, mouvement de souris, appui sur une touche, ...)

click : Clic sur un élément
dblclick : Double-clic sur un élément
keydown : Touche enfoncée
keyup : Touche relâchée
input : Touche caractère pressée
mouseenter : Souris arrivant sur un élément
mouseleave : Souris sortant d'un élément
mousemove : Souris bougeant sur un élément
submit : Soumission d'un formulaire
... etc

Événement "click" sur un bouton


              <button id="btn"> Mon bouton </button>


function quandOnClique () {
  alert("Clic détecté");
}

$('#btn').on('click', quandOnClique );
  // ou
$('#btn').click( quandOnClique );

Récupérer l'élément qui a déclanché l'événement:


              this


<button>
  Bouton <strong>1</strong>
</button>

<button>
  Bouton <strong>2</strong>
</button>

<button>
  Bouton <strong>3</strong>
</button>


 
$('button').on('click', function() {

  var nbButton = $(this).find('strong').text();

  alert("Clic sur le  n°" + nbButton);

});

Évènement "mousemove" sur une div


<div id="position-souris"></div>


function quandLaSourisBouge (event) {
  $('#position-souris').text('x : ' + event.pageX + ', y : ' + event.pageY);
}

$('#position-souris').on('mousemove', quandLaSourisBouge);

x : null, y : null

Récupérer des infos sur l'événement: paramètre


                event


function handler(event) {
  console.log( event.type, event.pageX, event.pageY, event.keyCode );
}

$('#myDiv').on('click', handler);
  // "click", 39, 42, undefined);

$('#myDiv').on('mouseenter', handler);
  // "mousenter", 39, 42, undefined);

$(document).on('keydown', handler);
  // "keydown", undefined, undefined, 13

#myDiv

Exemple avec l'évènement "keydown"


<img src="vaisseau.png" id="vaisseau">


function deplacerVaisseau (event) {
  if (event.keyCode === 68) { // 68 => D
    $('#vaisseau').css('margin-left', '+=15px');
  }
  else if (event.keyCode === 81) { // 81 => Q
    $('#vaisseau').css('margin-left', '-=15px');
  }
}

$(document).on('keydown', deplacerVaisseau);

Exemple avec l'évènement "submit"


<form action="#" id="formulaire">
  <input type="text" name="prenom">

  <button type="submit">Soumettre</button>
</form>


function soumettreFormulaire (event) {
  /*
    Empêche le rafraîchissement de la page : le comportement
    par défaut du navigateur
  */
  event.preventDefault();
  
  alert('Bonjour ' + $('input[name=prenom]').val() + ' !');
}

$('#formulaire').on('submit', soumettreFormulaire);

Liste des méthodes jQuery appartenant à la catégorie des évènements :
http://api.jquery.com/category/events/

Effets et animations

L'API jQuery de base fournit quelques méthodes pour créer des animations simples (fondu, slide, transition) et les contrôler (stopper, délayer)

Fading

Le célèbre effet d'apparition/disparition en fondu :

fadeOut()

fadeToggle()

fadeTo('slow', 0.3)

Sliding

Le célèbre effet d'apparition/disparition en défilement :

slideUp()

slideToggle()

Animation

jQuery fournit également une méthode .animate() qui permet d'intéragir sur les propriétés CSS de l'élément en créant une interpolation.


$('#carre').animate({
  'border-width' : '9px',
  'width'        : '150px',
  'height'       : '150px'
});

! CPU/GPU !

Toutes les animations réalisées avec ces méthodes jQuery font appel au CPU (Central Processing Unit)

Les animations CSS3 quant à elles, font appel
au GPU (Graphics Processing Unit)

Ajax

Asynchronous Javascript And Xml

Technologie faisant partie de JavaScript qui permet d'envoyer une requête au serveur dans le but d'obtenir des données.

HTTP Polling

Autres APIs

Ajax : Quand en a t-on besoin ?

Globalement, dès qu'on a besoin de récupérer un contenu distant.

(par exemple : un fichier HTML, ou encore des informations provenant d'un serveur web)

Méthodes de jQuery pour faire de l'Ajax :

.load( filename )

La méthode .load() permet de charger un fichier externe dans une balise HTML de la page principale


Hello! Je suis du <b>HTML</b> qui provient du fichier <code>ajax.html</code>!
            ajax.html


<div id="target"></div>

<button>Lancer la requête</button>

<script>
  $('button').on('click', function() {
    $('#target').load('ajax.html');
  });
</script>
            index.html

Autre exemple


<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Folio</a></li>
  <li><a href="#">Contact</a></li>
</ul>
            menu.html


<nav id="menu"></nav>

<script>
  $('#menu').load( 'menu.html' );
</script>
            index.html

$.getJSON( url )


$.getJSON('https://api.myjson.com/bins/16zla', function(data) {
  console.log(data);
});

$.get( url )

Comparable à $.getJSON , mais pour récupérer un type de contenu plus généraliste.


$.get('https://monsite.com/fichier.txt', function(dataTxt) {
  console.log(dataTxt);
});

$.ajax( options_obj )

La méthode jQuery.ajax() - ou $.ajax() - est un peu plus poussée et permet de configurer une requête de manière plus détaillée, et de traiter sa réponse

Récupération de données


// Lancement de la requête ...
var requete = $.ajax( 'menu.html' );

// En cas de succès
requete.done(function (data) {
  alert("La requête a abouti et les données récupérées sont : " + data);
});

// En cas d'erreur
requete.fail(function (jqXHR, textStatus, errorThrown) {
  alert("La requête n'a pas abouti pour la raison suivante : " + errorThrown);
});

Envoi de données

Ex: Dans le cadre d'une inscription, pour demander au serveur si l'adresse email existe


<form action="#" id="mail-form">
  <input type="email" name="email">
  <input type="submit">
</form>
            index.html


$('#mail-form').on('submit', function (evt) {
  evt.preventDefault();

  var requete = $.ajax('verifier-email.php', {
    data: {
      email: $('[name=email]').val()
    }
  });

  requete.done(function (data) {
    if (data.email.exists) {
      alert("Le serveur indique que cette @ email existe bien dans sa base");
    }
  });
});
            main.js

! Asynchronicité !

Une requête Ajax en JavaScript est asynchrone par défaut !

Qu'est ce que ça veut dire ?

Admettons le code suivant :


var cibles = ['header.html', 'menu.html', 'footer.html'];
for (var i = 0; i < cibles.length; ++i) {
  var requete = $.ajax( cibles[i] );

  requete.done(function (data) {
    alert('Requête effectuée sur ' + cibles[i]);
  });
}

Problème constaté :
cibles[i] renvoie undefined

Explication :
la boucle for() a tourné 3 fois, et à laissé à la fin une variable i à la valeur 3

La réponse du serveur a ensuite été reçue un peu plus tard dans le temps, au moment où i était déjà arrivé à 3

À savoir que l'on peut solutionner ce cas de figure en créant une IIFE


var cibles = ['header.html', 'menu.html', 'footer.html'];
for (var i = 0; i < cibles.length; ++i) {
  (function(i) {
    var requete = $.ajax( cibles[i] );

    requete.done(function (data) {
      alert('Requête effectuée sur ' + cibles[i]);
    });
  })(i)
}

Pour finir, une requête Ajax n'est pas forcément asynchrone, on a la possibilité de le paramètrer avec l'option async : false

Asynchrone (par défaut)


var req = $.ajax('menu.html');

req.done(function() {
  alert("UN");
});

alert("DEUX");

Synchrone


var req = $.ajax('menu.html', {
  async: false
});

req.done(function() {
  alert("UN");
});

alert("DEUX");

A ne faire qu'en bonne connaissance de cause !

Bloquer l'asynchronicité revient à surcharger les temps d'exécution de vos scripts sur une page

jQuery UI

jQuery UI est une couche supplémentaire ajoutée à jQuery

Il permet de mettre rapidement en place des interfaces utilisateur (UI)

Thème

jQuery UI est livré avec un thème par défaut

Pour le personnaliser, il existe le ThemeRoller du site jqueryui.com

Plugins

Les fonctionnalités offertes par jQuery UI sont tout simplement des plugins

Draggable


$('img').draggable();

Resizable


$('img').resizable();

Sortable


$('ul').sortable();

Élément 1
Élément 2
Élément 3
Élément 4
Élément 5

... et pleins d'autres

droppable, selectable, accordion, autocomplete, datepicker, tabs

jqueryui.com

Documentations

jQuery : http://api.jquery.com

jQuery UI : http://api.jqueryui.com