jQuery 核心3_数据缓存

data(name)
data(name, value)
removeData(name)
queue(name)
queue(name, callback)
queue(name, queue)
dequeue(name)

=========================================
1. data(name)
返回元素上储存的相应名字的数据，可以用data(name, value)来设定。
   e.g.1:
   H:  <div></div>

   J:  $("div").data("blah");  // undefined
       $("div").data("blah", "hello");  // blah设置为hello
       $("div").data("blah");  // hello
       $("div").data("blah", 86);  // 设置为86
       $("div").data("blah");  //  86
       $("div").removeData("blah");  //移除blah
       $("div").data("blah");  // undefined

--------------------------------------------------
2. data(name, value)
在元素上存放数据，同时也返回value。
    e.g.1:
    H: <div></div>

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

--------------------------------------------------
3. removeData(name)
在元素上移除存放的数据



--------------------------------------------------
4. queue(name)
返回指向第一个匹配元素的队列(将是一个函数数组).

  e.g.1:
     H: 
     <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  span { color:red; }
  </style>
  <button id="show">Show Length of Queue</button>
  <span></span>
  <div></div>

     J:
       $("#show").click(function () {
      var n = $("div").queue("fx");   //队列名默认为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)
在匹配的元素的队列最后添加一个函数

  e.g.1:
     H: 
 <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
  Click here...
  <div></div>

     J:
   $(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)
将匹配元素的队列用新的一个队列来代替(函数数组).

  e.g.1:
     H:
    <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>

  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>

     J:
     $("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      $("div").queue(function () {
          $(this).addClass("newcolor");
          $(this).dequeue();
      });
      $("div").animate({left:'-=200'},1500);
      $("div").queue(function () {
          $(this).removeClass("newcolor");
          $(this).dequeue();
      });
      $("div").slideUp();
  });
  $("#stop").click(function () {
      $("div").queue("fx", []);
      $("div").stop();
  });




--------------------------------------------------
7. dequeue(name)
从队列最前端移除一个队列函数

  e.g.1:
     H:
  <style>
  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px;
        background-color:yellow; }
  div.red { background-color:red; }
  </style>

  <button>Start</button>
  <div></div>

     J:
  $("button").click(function () {
      $("div").animate({left:'+=200px'}, 2000);
      $("div").animate({top:'0px'}, 600);
      $("div").queue(function () {
          $(this).toggleClass("red");
          $(this).dequeue();
      });
      $("div").animate({left:'10px', top:'30px'}, 700);
  });