Jquery核心(三) Data

jQuery数据

[1] data( name )      Returns: Any
      name ：  String 存储的数据的标识。
      说明：  返回data(name, value)设置的名为name的数据。如果一个jQuery集合中有多个元素，则返回第一个元素的值。该方法用于避免循环引用的风险地获取存储的数据。
     

Js代码

1. $("button").click(function(e) {   
2.       var value;   
3.   
4.       switch ($("button").index(this)) {   
5.         case 0 :   
6.           value = $("div").data("blah");   
7.           break;   
8.         case 1 :   
9.           $("div").data("blah", "hello");   
10.           value = "Stored!";   
11.           break;   
12.         case 2 :   
13.           $("div").data("blah", 86);   
14.           value = "Stored!";   
15.           break;   
16.         case 3 :   
17.           $("div").removeData("blah");   
18.           value = "Removed!";   
19.           break;   
20.       }   
21.   
22.       $("span").text("" + value);   
23.     });  

$("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 存储的数据。 
      说明：  设置数据。
     

Js代码

1. $("div").data("test", { first: 16, last: "pizza!" });   
2.    $("span:first").text($("div").data("test").first);   
3.    $("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 存储的数据的标识。
      说明：  移除数据。
     

Js代码

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

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

[4] queue( [name] )        Returns: Array<Function>
      name ：  String 队列的标识(默认为fx)。
      说明：  返回第一个匹配元素的队列（为一个函数数组an array of functions）。
     

Js代码

1. $("#show").click(function () {   
2.     var n = $("div").queue("fx");   
3.     $("span").text("Queue length is: " + n.length);   
4.   });   
5.   function runIt() {   
6.     $("div").show("slow");   
7.     $("div").animate({left:'+=200'},2000);   
8.     $("div").slideToggle(1000);   
9.     $("div").slideToggle("fast");   
10.     $("div").animate({left:'-=200'},1500);   
11.     $("div").hide("slow");   
12.     $("div").show(1200);   
13.     $("div").slideUp("normal", runIt);   
14.   }   
15.   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 增加到队列的函数。
      说明：  在所有匹配元素的队列尾部添加一个函数并立即执行。
     

Js代码

1. $(document.body).click(function () {   
2.      $("div").show("slow");   
3.      $("div").animate({left:'+=200'},2000);   
4.      $("div").queue(function () {   
5.        $(this).addClass("newcolor");   
6.        $(this).dequeue();   
7.      });   
8.      $("div").animate({left:'-=200'},500);   
9.      $("div").queue(function () {   
10.        $(this).removeClass("newcolor");   
11.        $(this).dequeue();   
12.      });   
13.      $("div").slideUp();   
14.    });  

 $(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)。
      说明：  将队首函数出队，并执行。