Résultats du Quiz jQuery moyen

  1. Comment peut-on définir un même gestionnaire d'événement au clic et au focus sur une image ?

    • $("img").click().focus().function() { ... };
    • $("img").bind("focus click",function() { ... });
    • $("img").event("focus,click", { ... });
    • $("img").bind("focus").bind("click", { ... });

    Seule la méthode bind permet de déclarer 2 types d'événements JavaScript en premier argument.

  2. Quelle est la meilleure façon de dupliquer sur la page l'élément portant l'id #test ?

    • $("#test").clone();
    • $("#test").clone().insertAfter("#test");
    • $("#test").clone().insertAfter($(this));
    • $("#test").clone().after();

    La méthode clone se charge bien de dupliquer un élément mais ne l'insère pas dans le DOM, il faut pour cela l'exploiter en combinaison avec (par exemple) insertAfter et préciser un autre sélecteur cible pour définir l'endroit d'insertion.

  3. Comment peut-on copier l'alternative texte des images de la page dans leur attribut titre ? (Pratique déconseillée en terme d'accessibilité)

    • $("img").attr("title",$(this).attr("alt"));
    • $("img").attr("title","alt");
    • $("img").each(function() { $(this).attr("title",$(this).attr("alt")) });
    • $("img").each(function() { $(this).attr("title") = $(this).attr("alt"); });

    Il faut itérer pour chacun des éléments présents grâce à $.each et modifier leur attribut avec la méthode attr(). Celle-ci prend en 2e argument la valeur à considérer.

  4. Comment peut-on cocher le premier bouton radio d'un formulaire ?

    • $("form input.radio:first").attr("checked");
    • $("form radio:first").attr("checked","true");
    • $("form :radio:first").attr("checked","checked");
    • $("form input:radio[0]").attr("checked","checked");

    La combinaison de filtres :radio:first permet de s'adresser au premier élément de type radio dans le formulaire, puis de lui affecter l'attribut checked.

  5. Comment peut-on ajouter un texte en bas de document avant la fin de l'élément <body> ?

    • $("body").append("<p>texte</p>");
    • $("body").prepend("<p>texte</p>");
    • $("<p>texte</p>").prepend("body");
    • $("<p>texte</p>").append("body");

    La méthode append() ajoute du contenu à un élément, avant sa balise fermante.

  6. A partir d'un jeu d'éléments, comment peut-on sélectionner uniquement ceux qui ne sont pas de type <span> ?

    • $("*").filter(":not(span)");
    • $("*").not("");
    • $("*").find(":not(span)");
    • $("*").is(":not(span)");

    La méthode filter combinée au sélecteur de pseudo-classe :not() est la seule à même de répondre à cette condition.

  7. Comment peut-on déclarer un nouveau plug-in pour jQuery ?

    • jQuery.add(function monplugin() { ... });
    • jQuery.monplugin { function() { } };
    • $.extend.monplugin { ... return true; };
    • $.fn.monplugin = function() { ... };

    L'extension des possibilités de l'objet jQuery peut s'écrire simplement grâce à l'extension des fonctions de $.fn

  8. Comment peut-on charger dans un élément portant l'id #cible présent sur la page, l'élément #liste d'une page externe "resultats.html" ?

    • $.ajaxLoad("#liste","test.html").append("#cible");
    • $("#cible").load("resultats.html #liste");
    • $("#liste").load("resultats.html","#cible");
    • $("#cible").get("resultats.html #liste");

    L'appel Ajax load dispose de la capacité de ne charger qu'un élément portant un identifiant précis.

  9. Comment peut-on effectuer une requête Ajax de type XML sur un script PHP ?

    • $.ajaxStart(type:"xml", url:"script.php", success:function data(); );
    • $.getJSON("script.php", function(xml) { ... });
    • $.ajax({type:"POST",dataType: "xml", url:"script.php"});
    • $.post(dataType:"xml",url:"script.php", function() { ...} );

    Seule la syntaxe proposée est valide, considérant l'appel de fonction et ses arguments.

  10. Comment affiche-t-on dans la console le retour texte d'un appel Ajax s'étant bien déroulé ?

    • $.ajax({ url: 'test.html', success: function(data) { console.log(data); } );
    • $.ajax({ url: 'test.html', complete: function(text) { alert(text); } );
    • $.ajax({ url: 'test.html', onready: function(text) { console.log(text); } );
    • $.ajax({ url: 'test.html', function(data) { console(data); } );

    L'événement de succès est géré par une fonction de callback qui appelle elle-même console.log.

Score 0/10

Le verdict de Morpheus

As-tu bien compris le principe de cocher les cases ?