jQuery中的常见数据存储及队列处理函数

本文转载于:猿2048网站➯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特效函数，因为本篇主要阐述核心函数，对于单个特效函数这里不再详细说明使用细节。

更多专业前端知识，请上【猿2048】www.mk2048.com

jQuery中的常见数据存储及队列处理函数

猜你喜欢