Jquery
Debutant
Quiz-Jquery-Debutant
Selecteurs-Css
Manipulation-Dom
Evenements-Jquery
Questions-Entretien-Jquery
Qcm-Jquery
Apprendre-Jquery
Effets-Animations
Javascript
Front-End
Legacy-Frontend
Jquery-Fondamentaux
📝
jQuery Débutant — DOM & Sélecteurs
20 questions sur les bases de jQuery : sélecteurs CSS, manipulation du DOM, gestion des événements, traversal, attributs et effets visuels. Idéal pour valider les fondamentaux jQuery avant un entretien.
Banque de révision : les 60 questions corrigées
Voici l'intégralité des 60 questions de « jQuery Débutant — DOM & Sélecteurs », chacune avec sa bonne réponse et son explication. Le quiz interactif ci-dessus en tire une sélection aléatoire à chaque tentative — utilisez cette liste complète pour réviser.
Explication :
En jQuery, le sélecteur
#monId cible un élément dont l'attribut id vaut monId. Le préfixe # est hérité de la syntaxe CSS et est le sélecteur le plus performant car l'id est unique dans le DOM.
Explication :
Le sélecteur de classe en jQuery utilise le préfixe
. : $(".actif") retourne tous les éléments ayant class="actif". Un élément peut avoir plusieurs classes, donc ce sélecteur peut retourner plusieurs éléments.
En entretien, mentionnez que les sélecteurs de classe sont moins performants que les sélecteurs d'id car jQuery doit parcourir le DOM entier.
Explication :
Le sélecteur d'élément
$("p") retourne un objet jQuery (une collection) contenant tous les éléments <p> présents dans le document. jQuery applique ensuite les méthodes chaînées à chaque élément de cette collection.
Explication :
Le sélecteur universel
$("*") cible absolument tous les éléments du DOM. Son utilisation est déconseillée pour des raisons de performance car jQuery doit parcourir l'intégralité de l'arbre DOM.
Explication :
Le sélecteur d'attribut
$('[data-type]') cible tous les éléments possédant cet attribut, quelle que soit sa valeur. Pour cibler une valeur précise, on utilise $('[data-type="valeur"]').
Ce sélecteur est très utile avec les attributs
data-* HTML5. En entretien, montrez que vous connaissez aussi $("[attr=val]"), $("[attr^=val]") et $("[attr$=val]").
Explication :
Le pseudo-sélecteur
:first ne retourne que le premier élément de l'ensemble correspondant dans tout le document. Attention à ne pas le confondre avec :first-child (CSS) qui agit sur chaque parent.
Explication :
Le pseudo-sélecteur
:eq(n) cible l'élément à l'index n (base 0). Ainsi $('li:eq(2)') cible le 3e <li>. C'est l'équivalent de la méthode .eq(2) dans une chaîne jQuery.
Explication :
Le sélecteur
:contains(texte) filtre les éléments dont le contenu textuel (y compris les descendants) contient la chaîne spécifiée. La recherche est sensible à la casse.
Mentionnez en entretien que
:contains() est sensible à la casse et qu'il n'est pas un sélecteur CSS standard — c'est une extension jQuery.
Explication :
Le pseudo-sélecteur
:visible cible les éléments qui prennent de la place dans la page (non masqués). Un élément est considéré visible s'il a display différent de none, visibility différent de hidden et opacity supérieur à 0.
Explication :
Le pseudo-sélecteur
:checked cible les éléments <input type="checkbox"> et <input type="radio"> dont l'état est coché. Il ne s'applique pas aux champs texte ou aux boutons.
Explication :
Les deux sélecteurs ciblent des éléments désactivés, mais
:disabled est un pseudo-sélecteur jQuery qui s'applique à tous les éléments de formulaire (input, select, button...), tandis que [disabled] cible l'attribut HTML brut.
En entretien, précisez que
:disabled est plus sémantique et recommandé. Évitez le sélecteur *:disabled pour des raisons de performance.
Explication :
La virgule est l'opérateur de sélection multiple en jQuery (et en CSS).
$("h1, p, span") retourne un objet jQuery contenant tous les <h1>, <p> et <span> du document.
Explication :
La méthode
.html() sans argument est un getter qui retourne le contenu HTML interne (innerHTML) du premier élément de la sélection. Elle préserve les balises HTML contrairement à .text().
Explication :
Avec
.html("<b>test</b>"), le mot "test" apparaît en gras. Avec .text("<b>test</b>"), la chaîne est échappée et affichée littéralement : <b>test</b>. Utilisez .text() pour éviter les injections XSS.
En entretien, soulignez que
.text() est plus sûr pour afficher du contenu utilisateur car il prévient les attaques XSS.
Explication :
La méthode
.val() est spécialement conçue pour lire (getter) et définir (setter) la valeur des éléments de formulaire : <input>, <select>, <textarea>. Les méthodes .html() et .text() ne fonctionnent pas pour les champs de formulaire.
Explication :
La méthode
.attr("href") lit la valeur de l'attribut HTML href tel qu'il est écrit dans le code source. Pour obtenir l'URL absolue résolue par le navigateur, on utilise .prop("href").
Explication :
.attr('checked') retourne 'checked' ou undefined selon l'HTML initial. .prop('checked') retourne true ou false selon l'état actuel de la case — c'est ce qu'il faut utiliser pour les checkboxes.
Utilisez toujours
.prop() pour les propriétés booléennes (checked, disabled, selected) et .attr() pour les attributs HTML personnalisés.
Explication :
jQuery offre deux façons :
.attr('data-user-id') lit l'attribut HTML directement, et .data('userId') utilise le cache interne jQuery avec conversion camelCase automatique. .data() est préférable car il convertit aussi les types (nombres, booléens, objets JSON).
Explication :
La méthode
.css(propriété, valeur) modifie le style CSS inline d'un élément. On peut aussi passer un objet : .css({"background-color": "red", "color": "white"}) pour modifier plusieurs propriétés en une fois.
Explication :
La méthode
.addClass() ajoute une ou plusieurs classes CSS à l'élément sans toucher aux classes déjà présentes. Pour remplacer toutes les classes, il faudrait utiliser .attr('class', 'actif').
Explication :
La méthode
.removeClass('masqué') supprime uniquement la classe spécifiée. Appelée sans argument, .removeClass() supprime toutes les classes de l'élément.
En entretien, mentionnez
.toggleClass() comme alternative quand on veut alterner l'ajout et la suppression d'une classe selon son état actuel.
Explication :
La méthode
.toggleClass() bascule une classe : si la classe est absente elle l'ajoute, si elle est présente elle la supprime. C'est très pratique pour créer des effets d'activation/désactivation sans gérer l'état manuellement.
Explication :
La méthode
.hasClass() retourne un booléen : true si au moins un élément de la sélection possède la classe spécifiée, false sinon. Utile dans les conditions : if ($('#box').hasClass('open')) { ... }.
Explication :
La méthode
.find(selecteur) recherche tous les descendants (enfants, petits-enfants, etc.) de l'élément courant correspondant au sélecteur. C'est l'équivalent de $("#container span") mais souvent plus performant dans les DOM complexes.
Explication :
.children() parcourt uniquement un niveau de profondeur (enfants directs), tandis que .find() parcourt toute la sous-arborescence. Les deux acceptent un sélecteur optionnel pour filtrer les résultats.
En entretien, expliquez que
.children() est plus performant quand vous savez que les éléments sont au premier niveau.
Explication :
La méthode
.parent() remonte d'un seul niveau dans l'arborescence DOM pour retourner l'élément parent direct. Elle accepte un sélecteur optionnel : .parent('.conteneur') retourne le parent uniquement s'il correspond.
Explication :
La méthode
.parents(sélecteur) (avec un s) remonte dans toute la chaîne des ancêtres jusqu'à la racine du document et retourne ceux qui correspondent au sélecteur. Sans argument, elle retourne tous les ancêtres.
Explication :
.closest(sel) commence par l'élément courant lui-même et remonte jusqu'au premier ancêtre correspondant (1 résultat max). .parents(sel) ignore l'élément courant et retourne tous les ancêtres correspondants (n résultats possibles).
En pratique, utilisez
.closest() pour la délégation d'événements (ex: trouver le formulaire parent d'un input cliqué).
Explication :
La méthode
.siblings() retourne tous les éléments frères — ceux qui partagent le même parent — en excluant l'élément courant. On peut passer un sélecteur pour filtrer : .siblings('.actif').
Explication :
La méthode
.next() retourne l'élément frère immédiatement suivant dans le DOM pour chaque élément de la sélection. Si le <p> est suivi d'un <div>, c'est ce <div> qui est retourné.
Explication :
Deux approches équivalentes :
.first() est un raccourci sémantique pour .eq(0), les deux retournent un objet jQuery contenant uniquement le premier élément de la sélection.
Explication :
La méthode
.filter(sélecteur) réduit une sélection existante aux éléments correspondant au sélecteur (ou à une fonction callback). Contrairement à .find(), elle opère sur les éléments de la sélection courante, pas sur leurs descendants.
Exemple pratique :
$(\"li\").filter(function() { return $(this).text().length > 10; }) — .filter() accepte aussi une fonction pour des critères complexes.
Explication :
La méthode
.not(sélecteur) exclut de la sélection les éléments correspondant au critère. C'est l'inverse de .filter(). On peut aussi utiliser la pseudo-classe :not() directement dans le sélecteur : $("p:not(.exclure)").
Explication :
La méthode
.append() insère du contenu à l'intérieur de l'élément cible, après tout son contenu existant. Moyen mnémotechnique : "append" = "ajouter à la fin".
Explication :
La méthode
.before() insère le contenu en dehors de l'élément, juste avant lui dans le DOM (comme un frère précédent). À ne pas confondre avec .prepend() qui insère à l'intérieur de l'élément, au début de son contenu.
Explication :
La méthode
.remove() supprime l'élément et tous ses enfants du DOM, ainsi que tous les gestionnaires d'événements jQuery et les données associées. À distinguer de .empty() qui vide l'élément de son contenu sans le supprimer lui-même.
En entretien, mentionnez
.detach() comme alternative qui préserve les données et événements jQuery pour réinsérer l'élément plus tard.
Explication :
La méthode
.empty() supprime tout le contenu interne de l'élément (enfants, texte, etc.) mais l'élément lui-même reste dans le DOM. C'est équivalent à définir innerHTML = '' en JavaScript natif.
Explication :
La méthode
.clone() crée une copie profonde de l'élément. Avec .clone(true), les gestionnaires d'événements jQuery sont également copiés. Sans argument ou avec false, seule la structure HTML est dupliquée.
Explication :
La méthode
.show() modifie la propriété CSS display pour rendre l'élément visible, en restaurant sa valeur d'origine (block, inline, flex...). Elle accepte une durée : .show(400) pour une animation.
Explication :
La méthode
.fadeOut() anime l'opacité de 1 à 0 puis définit display: none. Elle accepte une durée en millisecondes ou les mots-clés 'slow'/'fast', et un callback exécuté à la fin de l'animation.
Mentionnez
.stop(true, true) avant une animation pour éviter les effets de queue si l'utilisateur déclenche l'animation plusieurs fois rapidement.
Explication :
La méthode
.slideToggle() bascule la visibilité d'un élément avec une animation de glissement vertical. Si visible → slideUp (masque), si masqué → slideDown (affiche). L'argument 300 est la durée en millisecondes.
Explication :
La méthode
.animate(propriétés, durée) permet d'animer des propriétés CSS numériques. Le premier argument est un objet CSS, le second la durée en ms. jQuery interpole les valeurs entre l'état actuel et la cible.
Explication :
La méthode
.stop(clearQueue, jumpToEnd) arrête les animations. Avec true, true : le premier true vide toute la file d'attente d'animations, le second true saute immédiatement à l'état final de l'animation en cours.
Pattern courant : appeler
.stop(true, true) avant chaque animation déclenchée par l'utilisateur pour éviter les animations en cascade (\"queue buildup\").
Explication :
La méthode
.click(handler) est un raccourci pour .on('click', handler). Les deux sont valides en jQuery. .on() est la méthode recommandée car elle permet la délégation d'événements et de gérer plusieurs événements à la fois.
Explication :
La délégation d'événements attache le listener sur un ancêtre (ici
document) et vérifie si la cible correspond au sélecteur. Ainsi, les éléments créés dynamiquement après le chargement déclenchent bien l'événement, contrairement à .click() qui n'agit que sur les éléments existants au moment de l'appel.
En pratique, utilisez un ancêtre proche plutôt que
document pour de meilleures performances : $(\"#container\").on(\"click\", \".item\", fn).
Explication :
La méthode
.off() est le pendant de .on() pour supprimer les gestionnaires d'événements. .off('click') supprime tous les handlers de clic, et .off('click', maFonction) supprime uniquement un handler spécifique.
Explication :
La méthode
event.preventDefault() annule l'action par défaut associée à l'événement : empêche un lien de naviguer, un formulaire de se soumettre, etc. Elle ne bloque pas la propagation de l'événement aux éléments parents.
Explication :
preventDefault() empêche le comportement navigateur (ex: soumettre le form). stopPropagation() empêche l'événement de remonter dans le DOM (bubbling). return false dans jQuery fait les deux à la fois.
Évitez
return false par défaut car il combine les deux effets, ce qui peut causer des bugs subtils. Soyez explicite avec preventDefault() ou stopPropagation() selon votre besoin.
Explication :
Dans un callback jQuery,
this est l'élément DOM natif sur lequel l'événement a été déclenché. $(this) l'enveloppe dans un objet jQuery pour utiliser toutes les méthodes jQuery. C'est un pattern fondamental en jQuery.
Explication :
La méthode
.each(callback) itère sur chaque élément de la sélection. La fonction reçoit l'index (0-based) et l'élément DOM natif. À l'intérieur, this est aussi l'élément DOM et $(this) sa version jQuery.
Explication :
La propriété
.length (sans parenthèses car c'est une propriété, pas une méthode) retourne le nombre d'éléments dans l'objet jQuery. La méthode .size() existait mais a été supprimée en jQuery 3.x.
La propriété
.length sert aussi de test de présence : if ($(\"#monId\").length) { /* existe */ }.
Explication :
La méthode
.is(sélecteur) retourne un booléen : true si au moins un élément de la sélection correspond au critère. C'est différent de .filter() qui retourne un objet jQuery. Utile dans les conditions.
Explication :
La méthode
.index() retourne la position (base 0) d'un élément parmi ses frères ou dans une sélection. Ex: $("#item").index() retourne sa position parmi les frères. Avec un sélecteur : $("li").index($("#item")).
Explication :
La méthode
.get(index) retourne l'élément DOM natif (non enveloppé par jQuery) à l'index spécifié. $('el')[0] est un raccourci équivalent. C'est utile pour passer à des APIs qui attendent des éléments DOM natifs.
En entretien, montrez que vous savez passer de l'API jQuery à l'API DOM native :
$(\"el\").get(0) ↔ $(nativeDomEl) pour l'inverse.
Explication :
La méthode
.offset() retourne la position absolue de l'élément relativement au document (pas au parent). Elle retourne un objet {top: number, left: number}. À distinguer de .position() qui est relative au parent positionné.
Explication :
La méthode
.width() retourne la largeur du contenu uniquement (sans padding, border ni margin). .innerWidth() inclut le padding, et .outerWidth() inclut padding et border (avec true, inclut aussi la margin).
Explication :
La méthode
.serialize() encode les données d'un formulaire en chaîne URL-encodée (ex: nom=Jean&age=30). Elle n'inclut que les éléments qui seraient soumis normalement (champs avec name, non désactivés). Pour obtenir un tableau d'objets, utilisez .serializeArray().
Explication :
La méthode
$.noConflict() rend le contrôle du symbole $ à l'autre bibliothèque (Prototype, MooTools...). On utilise ensuite jQuery à la place de $, ou on crée un alias : var jq = $.noConflict();.
En entretien, montrez l'alternative avec une IIFE :
(function($) { /* code utilisant $ ici */ })(jQuery); — c'est la méthode recommandée.
Explication :
Les deux syntaxes sont équivalentes et attendent que le DOM soit entièrement analysé (sans attendre les images).
$(function() {}) est le raccourci moderne préféré. Contrairement à window.onload, ce code s'exécute dès que le DOM est parsé, avant le chargement des ressources.
Explication :
La méthode
.hover(fnIn, fnOut) est un raccourci pour attacher à la fois mouseenter et mouseleave. Ces événements ne se déclenchent pas lors du survol des éléments enfants, contrairement à mouseover/mouseout.
En entretien, expliquez la différence entre
mouseenter/mouseleave (ne bubble pas, uniquement sur l'élément) et mouseover/mouseout (bubble, se déclenche aussi sur les enfants). 
Quiz
Débutant
20 questions
15 min
Entretien Vanilla JS Débutant — DOM et Événements
Quiz
Junior
20 questions
15 min
Entretien jQuery Junior : AJAX, plugins et perf
Quiz
Débutant
20 questions
15 min
Entretien CSS Débutant — Sélecteurs et Box Model
Quiz
Débutant
20 questions
15 min
Vue Débutant — Composants & Router
Quiz
Débutant
20 questions
15 min
Entretien React Débutant — Composants, Props et State
Quiz
Débutant
20 questions
15 min
AngularJS — Entretien Débutant
Quiz
Débutant
20 questions
15 min
Entretien JavaScript Débutant : variables et syntaxe
Quiz
Senior
20 questions
15 min
jQuery Senior — Architecture patterns
Quiz
Débutant
20 questions
15 min
HTML Débutant — Balises et structure
Quiz
Débutant
20 questions
15 min
Entretien TypeScript Débutant — Types et Interfaces
Quiz
Débutant
20 questions
15 min
Entretien Tailwind CSS Débutant — Utilities et Bases
Quiz
Junior
20 questions
15 min
Entretien JavaScript Junior — Closures, DOM et Async
Quiz
Débutant
20 questions
15 min
Entretien Angular Débutant — Composants, Pipes et Routing
Quiz
Débutant
20 questions
15 min
Entretien Next.js Débutant : pages, routing et SSR
Quiz
Senior
20 questions
15 min
AngularJS — Entretien Senior
Quiz
Débutant
20 questions
15 min
NestJS Débutant — Modules & Services
Quiz
Senior
20 questions
15 min
Entretien JavaScript Senior — Event Loop et Prototypes
Quiz
Intermediate
20 questions
15 min
AngularJS — Entretien Junior
Quiz
Débutant
20 questions
15 min
Python Django/FastAPI Débutant — Routes & Modèles
Quiz
Débutant
20 questions
15 min