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

Exercices

Ici je donne quelques exercices dans des fichiers HTML directement.

TP Gallerie photo

  • Voir README

TP Taquin / Puzzle

  • Voir README

Plugins

https://plugins.jquery.com

Slider: https://kenwheeler.github.io/slick

Isotope: https://isotope.metafizzy.co

Animate On Scroll: https://michalsnik.github.io/aos

Gallerie: https://fancyapps.com/docs/ui/fancybox

Made with Slides.com