未登录
登 录
×
<返回上一级
jQuery中的常见数据存储及队列处理函数
jQuery
 1、data(name)

返回元素上储存的相应名字的数据,可以用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特效函数,因为本篇主要阐述核心函数,对于单个特效函数这里不再详细说明使用细节。