Data

Posted on Edited on In Views: Disqus:

 

用來提供資料暫存的指令，但其中有很多方法跟Effects動畫操作有關。

一、.clearQueue()

把已經排進demo queue的動作都給排清，

也就是說全都從demo queue移出並呈現完畢。

 

二、.data()

請參考使用jQuery的.data()來設定與取得資料

 

三、.dequeue()

將指定動作從demo queue移出並呈現。

.dequeue( [ String queueName ] )

 

四、jQuery.data()

用來設定與取得資料。

這是一個底層操作方法，高階的操作方法請參考.data()方法。

有三種多載方法。

1、jQuery.data( Element element, String key, Anything value )

對一元素設定資料。

jQuery.data( document.body, "foo", 52 );

 

2、jQuery.data( Element element, String key )

取得某一元素值。

jQuery.data( document.body, "foo" );

 

3、jQuery.data( Element element )

取得某一元素所有被設定資料。

jQuery.data( document.body );

 

五、jQuery.dequeue()

將指定動作從demo queue移出並呈現。他是.dequeue()的底層方法。

jQuery.dequeue( Element element [, String queueName ] )

 

六、jQuery.hasData()

用來判斷一元素是否存有jQuery data。

jQuery.hasData( Element element )

 

七、jQuery.queue()

用來秀出queue裡將要執行的方法。他是.queue()的底層方法。

jQuery.queue( Element element [, String queueName ] )

jQuery.queue( Element element, String queueName, Array newQueue )

jQuery.queue( Element element, String queueName, Function callback )

 

八、jQuery.removeData()

用來移除一元素的jQuery data。他是.removeData()的底層方法。

jQuery.removeData( Element element [, String name ] )

 

九、.queue()

用來秀出queue裡將要執行的方法。

共有三種多載方法。

1、.queue( [ String queueName ] )

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>queue demo</title>
    <style>
        div {
            margin: 3px;
            width: 40px;
            height: 40px;
            position: absolute;
            left: 0px;
            top: 60px;
            background: green;
            display: none;
        }

            div.newcolor {
                background: blue;
            }

        p {
            color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p>The queue length is: <span></span></p>
    <div></div>

    <script>
        var div = $("div");

        function runIt() {
            div
              .show("slow")
              .animate({ left: "+=200" }, 2000)
              .animate({ left: "-=200" }, 1500)
              .hide("slow")
              .slideUp("normal", runIt);
        }

        function showIt() {
            var n = div.queue("fx");
            $("span").text(n.length);
            setTimeout(showIt, 100);
        }

        runIt();
        showIt();
    </script>
</body>
</html>

如上範例，queue原本的預設名稱是 fx，

而div.queue的長度就是.show + .animate + .animate + .hide + .slideUp。

 

2、.queue( [ String queueName ], Array newQueue )

一個Array組成的function用來替代現有的queue。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>queue demo</title>
    <style>
        div {
            margin: 3px;
            width: 40px;
            height: 40px;
            position: absolute;
            left: 0px;
            top: 30px;
            background: green;
            display: none;
        }

            div.newcolor {
                background: blue;
            }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <div></div>

    <script>
        $("#start").click(function () {
            $("div")
              .show("slow")
              .animate({ left: "+=200" }, 5000)
              .queue(function () {
                  $(this).addClass("newcolor").dequeue();
              })
              .animate({ left: '-=200' }, 1500)
              .queue(function () {
                  $(this).removeClass("newcolor").dequeue();
              })
              .slideUp();
        });
        $("#stop").click(function () {
            $("div")
              .queue("fx", [])
              .stop();
        });
    </script>
</body>
</html>

如上範例，籍由傳入空的Array來取代原本已在queue裡的動作，

來達到暫停的效果。

 

3、.queue( [ String queueName ], Function callback )

將新function加入queue，並可使用dequeue方法將function及時呈現出來。

請參考上一個範例。

 

十、.removeData()

用來移除一元素的jQuery data。

.removeData( [ String name ] )

.removeData( [ list list ] ) Type: Array or String

 

.removeData()不帶參數的方法將會刪除所有的jQuery data。