Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jQuery — fonctionnalités avancées

jQuery — fonctionnalités avancées

Présentation donnée le 9 mars 2011 à ConFoo 2011 (Montréal).

Rémi Prévost

March 09, 2011
Tweet

More Decks by Rémi Prévost

Other Decks in Programming

Transcript

  1. var noms = ["jack", "kate", "john", "james", "claire"] $.map(noms, function(nom)

    { return nom.toUpperCase(); }); => ["JACK", "KATE", "JOHN", "JAMES", "CLAIRE"]
  2. var personnes = [ { nom: "Jack Sheppard", evil: false

    }, { nom: "Benjamin Linus", evil: true }, { nom: "Kate Austen", evil: false } ]; $.grep(personnes, function(p) { return p.evil }); => [{ nom: "Benjamin Linus", evil: true }] $.grep(personnes, function(p) { return p.evil }, false); => [{ nom: "Jack Sheppard", … }, { nom: "Kate Austen", … }]
  3. var numeros = [4, 8, 15, 16, 23, 42]; $.inArray(numeros,

    16); => 3 $.inArray(numeros, 64); => -1
  4. var tailies = ["libby", "bernard", "eko"]; var middlies = ["jack",

    "charlie", "eko"]; $.merge(tailies, middlies); => ["libby", "bernard", "eko", "jack", "charlie", "eko"]
  5. function push_button(options) { options = $.extend({ delay: 108, input: [4,

    8, 15, 16, 23, 42] }, options); return "Wait for "+options.delay+" minutes."; } push_button({ delay: 64 }); => "Wait for 64 minutes."
  6. $(".element").bind("click", function() {}); $(".element").bind("dblclick", function() {}) $(".element").bind("mouseover", function() {}); $(".element").bind("mouseout",

    function() {}); $(".element").bind("keyup", function() {}); $(".element").bind("keydown", function() {}); $(".element").bind("keypress", function() {});
  7. function VoteCount(selecteur) { this.element = $(selecteur); this.increase = function() {

    this.element.text(parseInt(this.element.text()) + 1); } } vote_count = new VoteCount("#vote-count"); $("#upvote-button").bind("click", function() { vote_count.increase(); });
  8. var Island = { is_magic: true }; $(Island).bind("move", function() {

    alert(this.is_magic); // true }); $(Island).trigger("move");
  9. $("#tweets a.user").live("click", function() { // Faire quelque chose }); $(document).bind("click",

    function(event) { if ($(event.target).is("#tweets a.user")) { // Faire quelque chose } })
  10. $("#tweets").delegate("a.user", "click", function() { // Faire quelque chose }); $("#tweets").bind("click",

    function(event) { if ($(event.target).is("a.user")) { // Faire quelque chose } })
  11. $("#tweets a.user").live("click", function() { // Faire quelque chose }); $("a.user").die("click");

    // ne fonctionnera pas $("#tweets a.user").die("click"); // fonctionne!
  12. $("#tweets").delegate("a.user", "click", function() { // Faire quelque chose }); $("#tweets").undelegate("a",

    "click"); // ne fonctionne pas! $("body").undelegate("#tweets a.user", "click"); // non plus! $("#tweets").undelegate("a.user", "click"); // fonctionne!
  13. // contenu de application.js $("#contenu a.user").bind("click", function() { // Faire

    quelque chose avec un utilisateur… }); // contenu de janalytics.js $("a").bind("click", function() { // Enregistrer ce “click” }); $("a").unbind("click"); // retire *tous* les “click”
  14. // contenu de janalytics.js $("a").bind("click.jAnalytics", function() { // Enregistrer ce

    “click” }); $("a").unbind("click.jAnalytics"); // tous les “click” $("a").unbind(".jAnalytics"); // tous les événements
  15. $("#element").animate({ left: "-=200px", height: "toggle", width: "toggle" },{ duration: 1000,

    easing: "linear", complete: function() {}, step: function() {}, queue: false, specialEasing: { height: "easeIn", width: "easeOut" } });
  16. $("#element-1") .animate({ fontSize: "14em" }) .animate({ width: "+=200px" }) .animate({

    height: "+=200px" }); $("#element-2") .animate({ fontSize: "14em" }, { queue: false }) .animate({ width: "+=200px" }) .animate({ height: "+=200px" });
  17. if ($.browser.webkit) { // Chose que seulement Webkit supporte (pour

    l’instant) } else if ($.browser.mozilla) { // Chose que seulement Gecko supporte (pour l’instant) } else if ($.browser.msie) { // Chose que seulement IE supporte (pour l’instant) }
  18. if (typeof window.WebSocket != "undefined") { // Quelque chose de

    cool avec les sockets } else { // Quelque chose de cool en… AJAX? }
  19. $.extend($.support, { webSockets : (function() { return typeof window.WebSocket !=

    "undefined" }).call(), canvas : (function() { var canvas = document.createElement("canvas"); return !!(canvas.getContext && canvas.getContext("2d")); }).call() });
  20. if ($.support.canvas) { // Quelque chose de cool avec <canvas>

    } else { // Quelque chose de cool… des images? }
  21. var ennemi = $("<div />", { "class": "ennemi", text: "|---0-0---|",

    data: { name: "Blinky" }, click: function() { alert($(this).data("name")+ " a été cliqué!"); } }); ennemi.appendTo(".planche-de-jeu") ennemi.css("background", "cyan");
  22. $("#lacet").bind("boucler", function() { alert("yay!") }); var lacet = $("#lacet").detach(); //

    #lacet n’est plus dans le DOM lacet.appendTo("#souliers"); // #lacet est de retour dans le DOM lacet.trigger("boucler"); // yay!
  23. var data = '{ "name": "John Locke" }'; var person

    = $.parseJSON(data); person.name => "John Locke"
  24. var data = "<personne><nom>John Locke</nom></personne>"; data += "<personne><nom>James Ford</nom></personne>"; var

    personnages = $($.parseXML(data)); personnages.find("personne").map(function() { return $(this).find("nom").text().split(" ")[0]; }); => ["John", "James"]
  25. // Afficher le “count” du bouton $(".report-button").bind("click", function() { var

    count = $(".unstoppable-button").data("count"); alert("The other button has been clicked "+count+" times"); }); // Remettre le "count" à zéro $(".reset-button").bind("click", function() { $(".unstoppable-button").data("count", 0); }); // Supression de toutes les méta-données du bouton $(".unstoppable-button").removeData();
  26. // Modification du "get" $(".unstoppable-button").bind("getData", function(event, key) { if (key

    == "count") { return jQuery.data(this, key) * 2; } }); $(".unstoppable-button").data("count", 10); $(".unstoppable-button").data("count"); => 20
  27. $("#slideshow").data("position", 0).bind({ "forward" : function() { $(this).data("position", $(this).data("position") + 1);

    }, "backward" : function() { $(this).data("position", $(this).data("position") - 1); }, "changeData", function(event, key, value) { if (key != "position") { return true; } if (value >= $(this).children().length) { jQuery.data(this, "position", 0); } else if (value == -1) { jQuery.data(this, "position", $(this).children().length - 1); } } }); $("#slideshow").trigger("forward"); // position=1 $("#slideshow").trigger("forward"); // position=2 $("#slideshow").trigger("forward"); // position=0 $("#slideshow").trigger("backward"); // position=2
  28. <!-- HTML --> <li rel="5" class="story"><a href="#">Show</a></li> // Javascript $("li.story

    a").click(function() { var id = $(this).parent().attr("rel"); $("#content").load("/stories/"+id); });
  29. <!-- HTML --> <li rel="5|remi" class="story"><a href="#">Show</a></li> // Javascript $("li.story

    a").click(function() { var data = $(this).parent().attr("rel").split("|"); var id = data[0]; var user = data[1]; $("#content").load("/"+user+"/stories/"+id); });
  30. <!-- HTML --> <li class="story {id:5}"><a href="#">Show</a></li> // Javascript $("li.story

    a").click(function() { var data = $(this).parent().metadata(); $("#content").load("/stories/"+data.id); });
  31. <!-- HTML --> <li class="story {id:5,user:'remi',category:6}"><a href="#">Show</a></li> // Javascript $("li.story

    a").click(function() { var data = $(this).parent().metadata(); $("#content").load("/"+data.user+"/stories/"+data.id); });
  32. <!-- HTML --> <li data-id="5" class="story"><a href="#">Show</a></li> // Javascript $("li.story

    a").click(function() { var id = $(this).parent().data("id"); $("#content").load("/stories/"+id); });
  33. <!-- HTML --> <div data-remote="foo" class="block-1"></div> <div data-remote="true" class="block-2"></div> //

    Javascript $("div.block-1").data("remote"); => "foo" $("div.block-2").data("remote"); => true
  34. • $.fn.data • Événements « getData » + « setData

    » • $.fn.attr • $.metadata • $.fn.data + HTML5 Data
  35. var request = $.Deferred(); request.done(function() { alert("succes!"); }); request.fail(function() {

    alert("erreur!"); }); request.resolve(); => "succes!" // OU request.reject(); => "erreur!"
  36. var request1 = $.get("/feed") var request2 = $.get("/users") $.when(request1, request2)

    .then( function() { alert("everything has succeed!") }, function() { alert("something has failed.") } );
  37. // Exemple par Michael Bleigh (intridea.com) Twitter = { search:

    function(query) { var dfr = $.Deferred(); $.ajax({ url: "http://search.twitter.com/search.json", data: { q: query }, dataType: "jsonp", success: dfr.resolve }); return dfr.promise(); } } Twitter.search("#confoo").done(function(data) { alert(data.results[0].text); });