jQuery

Présentation

Développeur web freelance depuis 5 ans
http://www.boxydev.com
Expérience en agence web, E-Commerce (annonceur)
Formation Informatique et Autodidacte
Formateur et fan des OSS, contributeur à mes heures perdues
Solutions phares : Wordpress, Symfony, Magento, Prestashop, Angular
Langages : PHP, MySQL, HTML, CSS, JS
Outils : Git, Docker, Vagrant, Trello
Stack: ArchLinux, Gentoo, Mac OS (Unix addict)

Introduction

- Librairie JavaScript

- Ecrire moins pour faire plus

- Compatibilité navigateur

- Ne pas réinventer la roue...

- Soit disant "vieux" mais encore largement utilisé

si on a pas la nécessité de faire du React ou Angular...

Utilisation

Nouveau projet ? Oui
Pour un projet existant ? Non...
Avec Angular ou React ? Surtout pas...
Avec WordPress, Prestashop ? Oui
Pour mon portfolio ? Oui
Facilite la vie de l'intégrateur pour des éléments communs : Formulaire, AJAX, Slider
En local ou via CDN

Manipulation du DOM


// Sélectionner un ID
$('#monID');
$('#monID > .classe');
$('#monID.classe');

// Sélectionner une classe
$('.maClasse');
$('.maClasse').hide(); // Cache l'élément
$('.maClasse').show(); // Affiche l'élément
$('.maClasse').html(); // Affiche le contenu html de l'élément
$('.maClasse').html('Contenu'); // Modifie le html de l'élément

// Selectionner tous les p ?
$('p');

// Je recherche tous les span dans les div ?
$('div').find('span');

$('div').children(); // enfants de la div
$('div').parent(); // parent de la div
$('div').next(); // élément suivant la div
$('div').prev(); // élément précédent la div

// Et on peut chainer les méthodes sans soucis...
$('div').parent().parent(); // grand parent de la div

Manipulation du CSS


// C'est du CSS
$('#monID').css('background-color', 'blue');

// Ou un objet JS
$('#monID').css({
   'background-color': 'blue',
   'font-size'       : '28px'
});

// Animation
$('#monID').animate({
    left: '+=10' // Ajoute 10 à la valeur actuelle du left
}, {
    duration: 1000 // durée de l'animation en ms
    complete: function () {
        console.log('Quand l\'animation est finie');
    }
});

Tester le fadeIn(), fadeOut(), slideDown(), slideUp()

Et les events ?

$('button').on('click', function () {
    console.log('Je clique');
});

// Ou

$('button').click(function () {
    console.log('Je clique');
});


$('button').off('click'); // Enlève tous les événements au clic

Exercices

Faire un bouton avec une version "On" et "Off". La version "On" est noire avec un fond gris clair comportant une ombre portée, et la version "Off" est grise avec un fond gris foncé sans ombre portée. Au clic, on passe à "On" si c'est "Off" et inversement.

Faire un menu déroulant : au clic sur un bouton, un bloc de texte se déplie. Et quand on reclique dessus, il se referme. Pour l'animer, il faut utiliser la fonction animate() ou slideToggle().

Exercices

Créer un texte qui s'agrandit au clic. Si on reclique dessus, il reprend sa taille d'origine. Pour pouvoir faire cela, il va falloir mettre la taille de police initiale dans une variable.

Créér 5 boutons et un rectangle. Chaque bouton provoque une action sur le rectangle.

Bouton 1 : augmente la hauteur de 10px, si il dépasse 100px, il remet la hauteur à 10px
(fonction height())
Bouton 2 : mettre le rectangle en vert
Bouton 3 : remettre les couleurs initiales
Bouton 4 : faire disparaître le rectangle
Bouton 5 : faire réaparaître le rectangle

Exercices

Renseignez-vous sur .addClass(), .removeClass() et .toggleClass()
Créer 3 carrés transparent avec bordure
Au clic sur le premier carré, changer le background du carré en rouge (avec une classe)
Au clic sur le second carré, changer son background en bleu (avec une classe)
Au clic sur le troisième carré, changer son background en vert et effacer le background des autres carrés (classe)
Un clic sur chaque bouton doit intervertir les choses
Ajouter un bouton "Random" qui ajoute aléatoirement sur les divs une des 3 classes précédentes

Modifier le DOM

On peut créer des éléments en jQuery

// On peut créer des éléments dans le DOM

var title = $('<h1>Texte du h1</h1>'); // Permet de créer un h1 en jQuery
title.text('Nouveau texte du h1');

$('body').append(title); // Ajoute le h1 dans le body

title.after('<p>Paragraphe après le h1</p>'); // Ajoute le p après le h1

$('p').remove(); // Supprime le p

title.before('<p>Paragraphe avant le h1</p>'); // Ajoute le p avant le h1