jQuery

Notes prise durant les leçon du cours vidéo : Learn jQuery in 30 Days

 

Lesson 1

Librairie production : code minifié, non lisible mais plus petit

Sublime Text : éditeur choisi, semble avoir des snippets fantastiques…

Charger les libraires après le HTML, ne bloque pas le rendue de la page

On peut charger jQuery localement

<script src="jquery-1.7.1.js"></script>

Ou en utilisant un CDN :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

jQuery(« sélecteur ») ou $(« sélecteur ») : Appelle jQuery et sélectionne les éléments du DOM mentionnés avec le sélecteur (HTML / CSS)

.css(« propriété CSS », « valeur ») : Ajoute un style CSS, pas une bonne pratique, laisser le CSS dans la feuille de style

.addClass : ajoute une classe CSS

console.log() : affiche un message dans la console des outils de développement de Chrome

 

Lesson 2

Travailler avec le DOM lorsque les éléments sur lesquels on travaille sont chargés, pour cela on met les sélecteurs (code jQuery) en fin de page OU on utilise la fonction ready de jQuery

$(document).ready(function() { ...

ou la version courte :

$(function() { ...

Sélecteur CSS :

:first-child : premier enfant

 

Lesson 3

<div>
   <ul class='emphasis'>
       <li>1</li>
       <li>2</li>
       <ul>
           <li>3</li>
           <li>4</li>
      </ul>
   </ul>
</div>

.children : sélectionne les enfants immédiats, ex :  $(‘ul.emphasis’).children(‘li’) sélectionne les li 1 et 2 mais pas 3 et 4

Équivalent CSS : ul.emphasis > li

.find : permet de rechercher tous les éléments, ex :  $(‘ul.emphasis’).find(‘li’) sélectionnera tous les li

Équivalent CSS : ul.emphasis li

.first : premier élément correspondant, ex :  $(‘ul.emphasis’).children(‘li’).first ne sélectionne que le li 1 (peut aussi être fait avec $(‘ul.emphasis’).children(‘li:first-child’)

Équivalent CSS : li:first-child

.eq(n) : sélectionne le nième élément, ex :  $(‘ul.emphasis’).children(‘li’).eq(1) ne sélectionne que le li 2 (le compteur commence à 0)

Équivalent CSS : li:nth-child(n+1) (le compteur commence à 1 d’où le n+1)

.parent : parent directe de l’élément, ex : $(‘li’).parent() ou $(‘li’).parent(‘ul’) sélectionne ul mais $(‘li’).parent(‘div’) ne fonctionnera pas car le div n’est pas le parent immédiat de li

.parents : renvoi LES parents quelque soit leurs niveau dans le DOM de l’élément, ex : $(‘li’).parents(‘div’) sélectionne le div alors qu’il n’est pas le parent immédiat de li (si il y avait plusieurs div ils les renverrait tous)

.closest : remonte le DOM comme parents mais s’arrête dès qu’il trouve un élément

.removeClass : supprime une classe CSS

 

Lesson 4

Fonction anonyme directement exécutée :

(function() { ... })();

Permet de restreindre la portée des variables à la fonction

.click(function() { … : intercepte l’événement clic, équivalent à .on(‘click’, function() {…

this : élément ayant levé l’événement et pour pouvoir le manipuler il faut le passer à jQuery : $(this)

.attr : renvoi l’attribut (1 seul paramètre = nom de l’attribut) ou le positionne (2 paramètres = nom de l’attribut, valeur)

.removeAttr : supprime un attribut

data-xxx : attribut HTML permettant de stocker des données accessibles en jQuery par .attr(« data-xxx ») ou  .data(« xxx »)

.siblings : sélectionne tous les éléments du DOM au même niveau que celui sur lequel on appel la fonction.

Ex :

<div>
    <button>Day</button>
    <button>Night</button>
</div>

si on clic sur le bouton Day, la variable $(this) s’y référera et $(this).siblings(‘button’) sélectionnera tous les autres bouton (un seul ici)

.end : permet d’interrompre la sélection et revenir à la précédente, ainsi $(this).siblings(‘button’).removeAttr(‘disabled’).end().attr(‘disabled’, ‘disable’), supprime l’attribut (removeAttr) sur tous les boutons « à côté » (siblings) de celui qui a été cliqué (this) puis revient à la sélection du bouton cliqué (end) pour y ajouter l’attribut disabled

 

Bonne pratique : mettre en cache dans une variable les éléments accédés plusieurs fois (évite de re-parcourir le DOM à chaque fois)

 

Lesson 5

NV/chrome-devtools-autosave – GitHub : Plugin Chrome permettant de sauvegarder automatiquement dans les fichiers locaux (js / css) les changements faits via les outils du développeur (Pas testé mais semble génial)

Balises HTML que je ne connaissais pas :

<dl>
    <dt>Question ?</dt>
    <dd>Réponse</dd>
    <dt>Question ?</dt>
    <dd>Réponse</dd>
    <dt>Question ?</dt>
    <dd>Réponse</dd>
</dl>

.hide() : cache un élément du DOM en y appliquant un style display:none, peut donc être fait en appliquant une classe via jQuery (addClass), classe contenant le même display:none

.filter(«  ») : applique un filtre sur le sélecteur, ex : dd.filter(« :nth-child(n+3) ») ne gardera que les dd après le 3ème enfant

.next : élément suivant dans le DOM

.slideUp : cache l’élément ne le faisant glisser vers le haut

.slideDown : Affiche l’élément ne le faisant glisser vers le bas

Bonne pratique pour plus de performance : attacher l’événement au parent et spécifier dans la fonction « on » sur quel enfant il s’applique :

$("dl").on("mouseenter", "dt", function () {...

au lieu de :

$("dt").on("mouseenter", function () {...

N’attache qu’un seul événement au lieu de 3

 

Enfin un autre sélecteur CSS :

:last-child : dernier élément mais ATTENTION dans le cas des dt:last-child cela ne fonctionne pas car le dernier élément du parent (dl) n’est pas dt mais dd, pour sélectionner le dernier dt il faut faire dt:nth-last-child(2) plutôt tordu…

 

Quizz

Mon score 84%, 2 erreurs dues à la syntaxe…

 

Lesson 6

Plusieurs méthode pour gérer les événements, exemple pour le clic.

.on(‘click’, (function() {… : fonction de base, toutes les autres fonction pointe vers celle-ci (avec divers paramètres)

.click(function() {…  : lien simple vers la fonction on = raccourcis

.bind(function() {… : ancienne méthode jQuery, 1 événement attaché par éléments sélectionné. Si l’objet remontant l’événement (this) est cloné la gestion des événements (dont le click) le sera pas cloné par défaut, il faudra pour cela passer true à la méthode clone (pas nécessaire avec les autres méthodes de gestion des événements)

.live(function() {… : méthode dépréciée (deprecated), offre comme avantage d’attacher un seul événement tout le document au lieu d’un par élément correspondant au sélecteur.

.delegate(‘élément’ , ‘click’, (function() {… : méthode appliqué sur le contexte (le conteneur) et non pas sur l’élément lui même.

Autre méthode vues :

.clone() : duplique l’objet

.appendTo(‘sélecteur’) : ajoute l’objet au sélecteur

 

Lesson 7

.append(‘sélecteur/contenu’) : ajoute le contenu à la fin de l’objet sélectionné.

.prepend(‘sélecteur/contenu’) : ajoute le contenu au début de l’objet sélectionné.

.after(‘sélecteur/contenu’) : ajoute le contenu après l’objet sélectionné.

.before(‘sélecteur/contenu’) : ajoute le contenu avant l’objet sélectionné.

[objet].appendTo(‘sélecteur/contenu’) : ajoute/déplace l’objet à la fin du sélecteur / conteneur

[objet].prependTo(‘sélecteur/contenu’) : ajoute/déplace l’objet à la fin du sélecteur / conteneur

[objet].insertAfter(‘sélecteur/contenu’) : ajoute/déplace l’objet après le sélecteur

[objet].insertBefore(‘sélecteur/contenu’) : ajoute/déplace l’objet à la fin du sélecteur

Sélecteur = $(‘h1′) par exemple, contenu = ‘Hello JavaScript’

Mais le sélecteur / contenu peut aussi être le résultat d’une fonction :

$('p').after( function(){
    return $(this).prev()
})

.each : applique la transformation, la fonction sur chacun des éléments sélectionné

 

Création d’HTML en jQuery :

$(‘<h2 class=myClass>Hello</h2>’)

ou mieux

$(‘<h2>Hello</h2>’, {text: ‘Hello’, class: ‘myClass’})

 

Voir l’exemple concret des ces fonctions à la dixième minute de la vidéo, impressionnant…

button

Les commentaires sont fermés.