jQuery学习笔记 第三天

数据缓存
1 data(name) 返回值：Any 
功能:返回返回元素存储上相应名字的数据，可以用data(name,value)来设定。
     如果jQuery指向的集合指向多个元素，那将只返回第一个元素的数据
  --name String 存储的数据名
  eg：在一个div上存取数据
      HTML 代码:
<div></div>jQuery 代码:
$("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描述:
      在一个div上存取名/值对数据

      HTML 代码:
<div></div>jQuery 代码:
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first  //16;
$("div").data("test").last  //pizza!;
2 data(name,value) 返回值：Any
在元素上存放数据，同时也返回value
  --name String 存储的数据名
  --value Any   将要存储的数据
  eg:参考data(name)
3 removeData(name) 返回值：jQuery
  在元素上移除存放的数据
与$(...).data(name,value)函数作用相反
  --name String 要存储的数据名
  eg:参考data(name)
4 query(name) 返回值：Array<Function>
  返回值指向第一个匹配元素的队列(将是一个函数数组)
  --name String 队列名，默认为vfx
  eg：
显示队列长度
  HTML 代码:
<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>

jQuery 代码:
$("#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 query(name,callback) 返回值：jQuery
在匹配的元素的队列最后添加一个函数
  --name String 队列名，默认为fx
  --callback Function 要添加进队列的函数
  eg：插入一个自定义函数如果函数执行后要继续队列，则执行 jQuery(this).dequeue();

HTML 代码:
<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>
jQuery 代码:
$(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 query(name,queue) 返回值：jQuery
  将匹配元素的队列用新的一个队列来代替(函数数组)
  --name String 队列名，默认为fx
  --queue Array<Function> 用于替换的队列。所有函数都有一个参数，这个值与queue(callback)相同
  eg：通过设定队列数组来删除动画队列
7 dequeue(name) 返回值：jQuery
  从队列最前端一处一个队列函数，并执行他
  --name String 队列名，默认为fx