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);
});
jQuery 核心3_数据缓存
最新推荐文章于 2024-03-13 07:00:00 发布