jQuery et jQuery UI

jQuery : une librairie 

jQuery est une librairie qui apporte au développeur un ensemble de fonctions qui vont lui faciliter la tâche.

La fonction  principale (celle qu'on utilise tout le temps) s'appelle : $ 

Ses principales utilités sont :

• La sélection d'éléments grâce à des sélecteurs CSS
• Gestion des événements
• Effets visuels (animations)
• Ajax
• Compatibilité entre navigateurs

jQuery : une librairie 

jQuery apporte à la fois des fonctions et un wrapper (enveloppeur).

On peut prendre n'importe quelle variable ou élément HTML, et le "wrapper" avec jQuery.

Le fait de "wrapper" une variable avec jQuery lui apporte des fonctions et des propriétés supplémentaires supplémentaires

Votre premier code

document.getElementById('bouton').onclick = function(){
    console.log("Tu as cliqué !");
}

// Cela donne avec jQuery :
$('#bouton').click(function(){
    console.log("Tu as cliqué !");
});

var tableau = [10, 20, 30, 40];
for(var i = 0; i < tableau.length; i++){
    console.log(tableau[i]);
}

// avec jQuery
$(tableau).each(function(index, element){
    console.log(element);
});

Gérer les événements

// pour attacher une fonction à un événement on peut :
$('#monBouton').click(function(){
    console.log("Tu as cliqué");
}

// ou
$('#monBouton').on("click", function(){
    console.log("Tu as cliqué");
}

// on peut du coup détacher une fonction d'un événement :
$('#monBouton').off("click");

Des événements en boucle

// imaginez : je sélectionne tous les boutons de ma page
$('a.bouton').click(function(){
    console.log("Tu as cliqué");
}

// ici, j'ai pris tous les éléments <a> qui ont la classe "bouton"
// et je leur attache une fonction ! Cool !

// en javascript j'aurai du faire :

var boutons = document.querySelectorAll('a.bouton');
for(var i = 0; i < boutons.length; i++){
    boutons[i].onclick = function(){
        console.log("Tu as cliqué");
    }
}

Attention au wrapper !

var monBouton = $('#monBouton');
console.log(monBouton);
// monBouton est un objet jQuery
// il est enveloppé par une "coquille" qui lui donne
// plein de fonctionnalités supplémentaires

var monBouton = document.getElementById('monBouton');
console.log(monBouton);
// ici, monBouton est un objet DOMElement
// c'est juste un élément du DOM avec ses fonctions 
// classiques

Attention au wrapper !

// Je peux prendre n'importe quelle variable
// et lui donner une "armure" ou une "coquille"
// (on appelle ça un "wrapper", un enveloppeur)
// jQuery

var tableau = [10, 20, 30, 40];
// Ce tableau n'a que des fonctions classiques de tableaux

var tableau2 = $(tableau);
// dans tableau2, je prend le premier tableau
// mais je l'enveloppe avec jQuery ($)
// ce sera le même tableau mais avec tout plein de 
// fonctions supplémentaires

tableau.each(); // renvoie une erreur, ça n'existe pas
$(tableau).each(); // ca existe, car jQuery enveloppe 
// le tableau et lui procure cette fonction qui n'existait pas
// auparavant

Etudiez !

// jQuery apporte des fonctionnalités cools !

// pour cacher un élément par exemple :
document.getElementById('bouton').style.display = 'none';
// donne :
$('#bouton').hide();

// pour afficher un élément :
document.getElementById('bouton').style.display = 'block';
// donne :
$('#bouton').show();

// on peut même donner une vitesse d'animation 
$('#bouton').hide(500);
$('#bouton').hide('slow');

Etudiez !

// jQuery apporte des fonctionnalités cools !

// on veut rendre un élément graphiquement différent :
var monParagraphe = document.getElementById('mon-paragraphe');
monParagraphe.style.fontSize = '20px';
monParagraphe.style.color = 'white';
monParagraphe.style.backgroundColor = 'red';

// en jQuery :
$('#mon-paragraphe').css({
    fontSize: '20px',
    color: 'white',
    backgroundColor: 'red'
});

// on se répète moins

Etudiez !

• Les animations avec la fonction "animate" de jQuery
• Les fonctions de manipulation des classes CSS (addClass, hasClass, removeClass)
• Le principe Ajax et la fonction $.ajax (ou jQuery.ajax)