本文转载于:猿2048网站➯jQuery中的常见数据存储及队列处理函数
返回元素上储存的相应名字的数据,可以用data(name, value)来设定。
如果jQuery集合指向多个元素,那将只返回第一个元素的对应数据。
这个函数可以用于在一个元素上存取数据而避免了循环引用的风险。jQuery.data是1.2.3版的新功能。可以在很多地方使用这个函数,另外jQuery UI里经常使用这个函数。
返回值 Any
参数
name (String) :存储的数据名
示例:
$(function() {
//在一个div上存取数据
$("div").data("blah"); // undefined
alert($("div").data("blah"));
$("div").data("blah", "hello world"); // blah设置为hello world
$("div").data("blah"); // hello
$("div").data("blah", 123); // 设置为123
$("div").data("blah"); // 123
alert($("div").data("blah"));
$("div").removeData("blah"); //移除blah
$("div").data("blah"); // undefined
//在一个div上存取名/值对数据
$("div").data("test", { first: 456, last: "jeff wong!" });
alert($("div").data("test").first); //456;
alert($("div").data("test").last); //jeff wong
})
2、removeData(name)
在元素上移除存放的数据
与$(...).data(name, value)函数作用相反
返回值 jQuery
参数
name (String) :存储的数据名
示例:
$(function() {
$("div").data("test", { first: 456, last: "jeff wong!" });
alert($("div").data("test").first); //456;
alert($("div").data("test").last); //jeff wong
$("div").removeData("test"); //移除test
alert($("div").data("test")); //undefined;
})
3、queue([name])
返回指向第一个匹配元素的队列(将是一个函数数组)
返回值 Array<Function>
参数
name (String) :队列名,默认为fx
示例:
//通过设定队列数组来删除动画队列
$("#btnShow").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();
文档片段:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<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>
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<button id="btnShow" type="button">
Show Length of Queue</button>
<span style="color:Red"></span>
</form>
<script src="js/jQTest.js" type="text/javascript"></script>
</body>
</html>
4、queue([name],callback)
在匹配的元素的队列最后添加一个函数
返回值 jQuery
参数
name (String) :队列名,默认为fx
callback (Function) : 要添加进队列的函数
示例:
//插入一个自定义函数 如果函数执行后要继续队列,则执行 jQuery(this).dequeue();
jQuery(document).ready(function() {
$(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();
});
});
文档片段:
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
</head>
<body>
Click here
<div></div>
</body>
</html>
5、queue([name],queue)
将匹配元素的队列用新的一个队列来代替(函数数组).
返回值 jQuery
参数
name (String) :队列名,默认为fx
queue (Array<Function>) : 用于替换的队列。所有函数都有同一个参数,这个值与queue(callback)相同
示例:
//通过设定队列数组来删除动画队列
jQuery(document).ready(function() {
$("#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();
});
});
文档片段:
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
</body>
</html>
6、dequeue([name])
从队列最前端移除一个队列函数,并执行它。
返回值 jQuery
参数
name (String) :队列名,默认为fx
示例:
$("button").click(function() {
$("div").animate({ left: '+=200px' }, 2000);
$("div").animate({ top: '0px' }, 600);
$("div").queue(function() {
$(this).toggleClass("red");
$(this).dequeue(); //用dequeue来结束自定义队列函数,并让队列继续进行下去。
});
$("div").animate({ left: '10px', top: '30px' }, 700);
});
文档片段:
<html>
<head>
<style>
div { margin:3px; width:50px; position:absolute;
height:50px; left:10px; top:30px;
background-color:yellow; }
div.red { background-color:red; }
</style>
</head>
<body>
<button>Start</button>
<div></div>
</body>
</html>
ps:上面的一些示例用到了一些jquery特效函数,因为本篇主要阐述核心函数,对于单个特效函数这里不再详细说明使用细节。
更多专业前端知识,请上 【猿2048】www.mk2048.com