Jquery核心(三) Data

jQuery數據

[1] data( name )      Returns: Any
      name ：  String 存儲的數據的標識。
      說明：  返回data(name, value)設置的名爲name的數據。如果一個jQuery集合中有多個元素，則返回第一個元素的值。該方法用於避免循環引用的風險地獲取存儲的數據。
     

$("button").click(function(e) {
      var value;

      switch ($("button").index(this)) {
        case 0 :
          value = $("div").data("blah");
          break;
        case 1 :
          $("div").data("blah", "hello");
          value = "Stored!";
          break;
        case 2 :
          $("div").data("blah", 86);
          value = "Stored!";
          break;
        case 3 :
          $("div").removeData("blah");
          value = "Removed!";
          break;
      }

      $("span").text("" + value);
    });

$("button").click(function(e) {
      var value;

      switch ($("button").index(this)) {
        case 0 :
          value = $("div").data("blah");
          break;
        case 1 :
          $("div").data("blah", "hello");
          value = "Stored!";
          break;
        case 2 :
          $("div").data("blah", 86);
          value = "Stored!";
          break;
        case 3 :
          $("div").removeData("blah");
          value = "Removed!";
          break;
      }

      $("span").text("" + value);
    });

[2] data( name, value )      Returns: jQuery
      name ：  String 存儲的數據的標識。
      value：   Any 存儲的數據。 
      說明：  設置數據。
     

$("div").data("test", { first: 16, last: "pizza!" });
   $("span:first").text($("div").data("test").first);
   $("span:last").text($("div").data("test").last);

 $("div").data("test", { first: 16, last: "pizza!" });
    $("span:first").text($("div").data("test").first);
    $("span:last").text($("div").data("test").last);

[3] removeData( name )       Returns: jQuery
      name ：  String 存儲的數據的標識。
      說明：  移除數據。
     

$("div").data("test1", "VALUE-1");
$("div").removeData("test1");

 $("div").data("test1", "VALUE-1");
 $("div").removeData("test1");

[4] queue( [name] )        Returns: Array<Function>
      name ：  String 隊列的標識(默認爲fx)。
      說明：  返回第一個匹配元素的隊列（爲一個函數數組an array of functions）。
     

$("#show").click(function () {
    var n = $("div").queue("fx");
    $("span").text("Queue length is: " + n.length);
  });
  function runIt() {
    $("div").show("slow");
    $("div").animate({left:'+=200'},2000);
    $("div").slideToggle(1000);
    $("div").slideToggle("fast");
    $("div").animate({left:'-=200'},1500);
    $("div").hide("slow");
    $("div").show(1200);
    $("div").slideUp("normal", runIt);
  }
  runIt();

  $("#show").click(function () {
      var n = $("div").queue("fx");
      $("span").text("Queue length is: " + n.length);
    });
    function runIt() {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").slideToggle(1000);
      $("div").slideToggle("fast");
      $("div").animate({left:'-=200'},1500);
      $("div").hide("slow");
      $("div").show(1200);
      $("div").slideUp("normal", runIt);
    }
    runIt();

[5] queue( [name], callback )        Returns: jQuery
      name ：  String 存儲的數據的標識(默認爲fx)。
      callback ：  Function 增加到隊列的函數。
      說明：  在所有匹配元素的隊列尾部添加一個函數並立即執行。
     

$(document.body).click(function () {
     $("div").show("slow");
     $("div").animate({left:'+=200'},2000);
     $("div").queue(function () {
       $(this).addClass("newcolor");
       $(this).dequeue();
     });
     $("div").animate({left:'-=200'},500);
     $("div").queue(function () {
       $(this).removeClass("newcolor");
       $(this).dequeue();
     });
     $("div").slideUp();
   });

 $(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });

[6] queue( [name], queue )        Returns: jQuery
      name ：  String 存儲的數據的標識(默認爲fx)。
      queue ：  Array<Function>替換原隊列的隊列。
      說明：  用一個新隊列替換匹配的元素的隊列。


[7] dequeue( [name] )        Returns: jQuery
      name ：  String 存儲的數據的標識(默認爲fx)。
      說明：  將隊首函數出隊，並執行。