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