03 - jQuery Flashcards
Qu’est ce que jQuery ?
jQuery est une librairie JS conçue pour simplifier la manipulation du DOM.
Quelle version de jQuery est compatible IE6+ ? IE9+ ?
- x => IE6+
2. x => IE9+
Quelles sont les 2 façons d’ajouter jQuery à une page ?
En local ou via un CDN.
Où doit-on mettre la balise script pour charger jQuery ?
On doit la placer avant le script de la page pour pouvoir le charger et l’utiliser dans ce script.
Quels sont les avantages et désavantages du CDN ?
- Si l’utilisateur l’a déjà téléchargé via un autre site, le fichier sera en cache.
- Une distribution rapide
- Dépendance du site au CDN
- Nécessite une connexion Internet (pas pratique pour développer en hors ligne, etc…)
Comment savoir si jQuery a bien été ajouté à un site web ?
Il suffit de faire un console.log($), $ étant un alias de la variable générale jQuery. Si ce log renvoie quelque chose (un objet jQuery), jQuery est bien ajouté à la page.
Comment améliorer les performances de jQuery lors du processus de sélection des éléments ?
Pour être plus performant, il vaut mieux assigner les sélections jQuery dans des variables pour éviter que jQuery “parse” à chaque fois le DOM.
Citez au moins 3 fonctions pour parcourir le DOM.
- children() = Sélectionne l’enfant d’un élément du DOM
- first() = Sélectionne le 1er enfant d’un élément du DOM
- last() = Sélectionne le dernier enfant d’un élément
- eq(X) = Sélectionne l’enfant d’index X d’un élément.
- find(X) = Sélectionne un élément X dans un élément parent.
- parent() = Sélectionne le parent le plus proche d’un élément.
- parents() = Sélectionne un ou plusieurs parents spécifiques d’un élément.
- closest() = Sélectionne l’élément spécifié le plus proche d’un autre élément.
- filter() = Sélectionne tous les éléments particuliers contenus dans un autre élément.
- not() = Sélectionne tous les éléments sauf ceux spécifiés.
Comment créé-t-on un élément DOM en jQuery ? Citez les 4 principales méthodes jQuery pour ajouter un nouvel élément dans le DOM.
On créé un nouvel élément via une nouvelle variable, par example :
var new_element_1 = $('<div></div>')
Il suffit ensuite d’utiliser une des fonctions jQuery pour l’ajouter au DOM :
- Y.append(X) = Ajoute un nouvel élément X à l’intérieur et à la fin d’un élément Y.
- prepend() = Ajoute un nouvel élément à l’intérieur et au début d’un élément.
- before() = Ajoute un nouvel élément avant l’élément sélectionné.
- after() = Ajoute un nouvel élément après l’élément sélectionné.
Quelles sont les 2 méthodes jQuery pour supprimer un élément du DOM ?
Les 2 méthodes pour supprimer un élément du DOM sont :
- remove() = Supprime l’élément sur lequel la méthode est appliquée.
- empty() = Vide les éléments contenus dans l’élément sélectionné.
À quoi servent les méthodes .html() et .text() ?
- .html() sert à modifier le contenu HTML du DOM
- .text() sert à modifier le texte d’un élément du DOM.
Quelles sont les particularités de la méthode .css() ?
La méthode .css() :
- Permet de modifier le CSS des éléments du DOM
- Permet aussi de récupérer la valeur css de l’élément
- Le css sera appliqué directement dans la balise style de l’élément sélectionné
- Les propriétés css s’y expriment en camelCase
- Rajoute automatiquement px si non-spécifié
Il vaut mieux changer le CSS des éléments en changeant leur classe et éviter d’utiliser d’utiliser cette méthode.
Quelles sont les méthodes jQuery utilisées pour modifier les classes CSS ?
Les méthodes utilisées pour modifier les classes sont :
- addClass() = Rajoute une classe à l’élément sélectionné
- removeClass() = Supprime une classe
- toggleClass() = Supprime / Rajoute une classe suivant si elle est présente ou pas dans l’élément.
- hasClass () = Renvoie true/false suivant si la classe est présente ou pas dans l’élément.
Même si il es préférable d’utiliser des classes pour animer un élément jQuery propose quelques méthodes pour animer des éléments du DOM. Citez-en quelques unes.
Fade :
- fadeIn() = Fait apparaître l’élément
- fadeOut() = Fait disparaître l’élément
- fadeToggle() = Fait apparaître ou disparaître l’élément suivant son état.
- fadeTo() = Effectue un fade jusqu’à un certain point.
Slide :
- slideDown() = Fait apparaître un élément avec une animation slide
- slideUp() = Fait disparaître un élément
- slideToggle() = Fait apparaître/disparaître un élément suivant son état.
animate() = Anime les propriétés quantifiables d’un élément, sauf la couleur où il faudra rajouter jQuery UI.
Sur quel principe se base les méthodes d’animations jQuery ?
Quels contraintes cela amène-t-il ?
Quelle méthode permet d’y remédier partiellement ?
Toutes les méthodes jQuery, et donc les méthodes d’animation, se basent sur un système de queue. jQuery va lancer les méthodes d’animation les unes après les autres, et ne lancera pas la 2e animation tant que la 1ere n’est pas terminée.
Cela peut poser des soucis lorsque l’on souhaite lancer une animation alors que la première n’est pas terminée. Pour se faire il faudra stopper la première animation via la méthode stop() qui permet de stopper toute une queue d’animations ou bien juste une animation en particulier.
