Cours pour l'ESCEN Paris - 2017
Pour utiliser jQuery dans votre page web, il faut l'appeler avant la fermeture de la balise </body> suivie de votre/vos script(s)
Dans votre fichier script, vous englobez votre code dans un module pour l'isoler
// Méthode 1 (ancienne méthode, évitez de l'utiliser)
$(document).ready(function() {
// Votre code JavaScript
});
// Méthode 2
$(function() {
// Votre code JavaScript
});
// Méthode 3 (à préférer, car isole mieux votre code)
(function($) {
// Votre code JavaScript
})(jQuery);$('votre_element')…$('votre_element').methode(…)$('body').css('background-color', 'black');Vous trouverez toutes les méthodes dans la documentation de jquery,
sur le site officiel
ou sur le site Devdocs.io
Avec jQuery il existe plein de sélecteurs différents, vous allez le plus souvent vous baser sur les sélecteurs CSS.
// sélectionner les éléments qui ont la classe .toto
$('.toto')…
// sélectionner l'élément qui a l'#id .tata
$('#tata')…
// sélectionner le footer
$('footer')…Vous trouverez les autres sélecteurs ici.
// Modifie tous les liens
$('a').attr('href', 'http://www.google.fr');
// Modifie le troisième lien
$('ul li:nth-child(3) a').attr('href', 'http://www.google.fr');Remplacer le texte du dernier lien par autre chose (exemple : Salut).
// première solution possible
$('a:last').text('Salut');
// autre solution
$('a:last').html('Salut');Ajouter du texte à la fin de la div#test1.
var $div = $('#test1');
var $p = $('<p>Texte ajouté<p/>');
$div.append($p);Ajouter du texte au début de la div#test1.
var $div = $('#test1');
var $p = $('<p>Texte ajouté<p/>');
$div.prepend($p);En JavaScript, on peut effectuer quelque chose en réponse à une action d'un utilisateur.
Avec jQuery, on fait ça avec différentes méthodes.
$(element).click(function() {
// Code JS à exécuter en réponse à un clic de souris.
});$('a').click(function() {
$('a').removeClass('active');
$(this).addClass('active');
$('.textTab').hide();
$($(this).attr('href')).show();
});Maintenant vous allez utiliser les méthodes .fadeOut() et .fadeIn() pour cacher et afficher les textes selon le lien cliqué.
$('a').click(function() {
var $target = $($(this).attr('href'));
$('a').removeClass('active');
$(this).addClass('active');
$target.siblings(':visible').fadeOut(500, function() {
$target.fadeIn(500);
})
});La console du navigateur
Pour l'afficher
Cliquer sur l'onglet console
Afficher quelque chose dans la console en insérant la ligne suivante dans le fichier script.js
console.log('afficher quelque chose');Les fonctions
Une fonction commence par le mot clé function suivie d'un nom si on veut l'appeler plus tard, de parenthèses où l'on peut mettre des arguments et d'accolades.
On écrit le code à exécuter entre les accolades.
function afficherAlert(argument) {
// le code à executer
alert(argument);
}
// on appelle la fonction
afficherAlert('Coucou !'); // Va afficher 'Coucou !'Écrire une fonction qui affiche un message dans la console du navigateur.
function afficherMessage(argument) {
console.log(argument);
}
afficherMessage('Coucou !');Les tableaux s'écrivent entre crochets.
// Un tableau
var fruits = ['Pomme', 'Banane', 'Ananas'];Javascript possède une méthode pour parcourir tous les éléments d'un tableau. Cette méthode c'est forEach().
Copier le tableau fruits de la slide précédente dans le fichier script.js et afficher dans la console chaque élément du tableau.
var fruits = ['Pomme', 'Banane', 'Ananas'];
fruits.forEach(function(element) {
console.log(element);
});Les objets s'écrivent entre accolades, chaque élément d'un tableau doit avoir un couple de clé/valeur.
// Un objet
var individu = { "nom": "Doe", "prenom": "John", "age": 35 };Copier l'objet individu de la slide précédente dans le fichier script.js et afficher dans la console le prénom de l'individu.
var individu = { "nom": "Doe", "prenom": "John", "age": 35 };
console.log(individu.prenom);L'AJAX (pour les curieux, la page Wikipedia) permet de charger du contenu dans la page sans recharger complètement celle-ci.
On fait appel à la méthode .ajax() de jquery pour l'utiliser.
Si vous allez à cette url vous verrez une liste d'utilisateur.
Récupérez cette liste grâce à la méthode .ajax() et affichez là dans la console.
$.ajax({
url: "http://jsonplaceholder.typicode.com/users"
}).done(function(data) {
console.log(data);
}).fail(function() {
console.log('erreur de chargement');
});$.ajax({
url: "http://jsonplaceholder.typicode.com/users"
}).done(function(data) {
data.forEach(function(element) {
// affiche les éléments en entier
console.log(element);
// affiche le nom des utilisateurs
console.log(element.name);
});
}).fail(function() {
console.log('erreur de chargement');
});button$('#button1').click(function() {
$.ajax({
url: "http://jsonplaceholder.typicode.com/users"
}).done(function(data) {
data.forEach(function(element) {
console.log(element.name);
});
}).fail(function() {
console.log('erreur de chargement');
});
});Maintenant, au clic sur le bouton, au lieu d'afficher la liste des noms dans la console, vous allez :
<ul id="list"></ul>$('#button1').click(function() {
$.ajax({
url: "http://jsonplaceholder.typicode.com/users"
}).done(function(data) {
$('#button1 + p').remove();
$('#test1').append('<ul id="list"></ul>');
data.forEach(function(element) {
$('#list').append($('<li>').text(element.name));
});
}).fail(function() {
console.log('erreur de chargement');
});
});