jQuery
Première partie

Cours pour l'ESCEN Paris - 2017

Salut !

  • Lionel JAMAL
  • Développeur Front-End
  • De formation autodidacte
  • J'ai commencé à faire du web il y a 8 ans

Ce qu'on va voir ensemble :

  • Installation jQuery
  • Isoler son code JS
  • Selection d'éléments du DOM
  • Modification du HTML
  • Gérer des évenements utilisateurs
  • Créer des animations
  • Utiliser AJAX

Méthodologie

Apprentissage par la pratique ^^

Installer jQuery

À vous de jouer

  • Installer Sublime Text et le plugin Emmet
  • Créer une page HTML
  • Importer jQuery
  • Vérifier que jQuery est bien chargé grâce à ce code
if (typeof jQuery == 'undefined') {
  console.log('jQuery hasn\'t loaded');
} else {
  console.log('jQuery has loaded');
}

Pourquoi jQuery ?

Sélection d'éléments

Exercice 1

Au chargement de la page, modifier la couleur de fond en noir.

  • Créer une classe CSS qui applique un fond noir à l'élément body
  • Appliquer cette classe à l'élément body avec jQuery

Exercice 2

Copier ce code dans une nouvelle page


  
Lorem ipsum dolor sit amet, consectetur adipisicing
  elit, sed do eiusmod tempor incididunt ut labore et dolore
  magna aliqua.

  
 Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.





  
Lorem ipsum dolor sit amet, consectetur adipisicing
  elit, sed do eiusmod tempor incididunt ut labore et dolore
  magna aliqua.

  
 Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Supprimer la première balise <p>
  • Appliquer une couleur à la deuxième balise <p> de la deuxième <div>