数据缓存队列控制插件机制多库共存

数据缓存

data([key],[value])

概述

在元素上存放数据,返回jQuery对象。

如果jQuery集合指向多个元素，那将在所有元素上设置对应数据。这个函数不用建立一个新的expando，就能在一个元素上存放任何格式的数据，而不仅仅是字符串。

参数

key

存储的数据名.

key,value

key:存储的数据名

value:将要存储的任意数据

obj

一个用于设置数据的键/值对

data()

示例

描述:

在一个div上存取数据

HTML 代码:

jQuery 代码:

$("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

描述:

在一个div上存取名/值对数据

HTML 代码:

jQuery 代码:

$("div").data("test", { first: 16, last: "pizza!" });

$("div").data("test").first //16;

$("div").data("test").last //pizza!;

removeData([name|list])

概述

在元素上移除存放的数据

与$(...).data(name, value)函数作用相反

参数

[name]

存储的数据名

[list]

移除数组或以空格分开的字符串

示例

描述:

从元素中删除之前添加的数据：

jQuery 代码:

$("#btn2").click(function(){

$("div").removeData("greeting");

alert("Greeting is: " + $("div").data("greeting"));

});

jQuery.data(element,[key],[value])

概述

在元素上存放数据,返回jQuery对象。

注意：这是一个底层方法。你应当使用.data()来代替。

参数

element,key,value

element:要关联数据的DOM对象

key:存储的数据名

value:将要存储的任意数据

//跟$(element).date(key,value);一样

element,key

element:要查询数据的DOM对象

key:存储的数据名

element

要查询数据的DOM对象

示例

jQuery 代码:

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

jQuery.data(document.body, 'bar', 'test');

队列控制

queue(element,[queueName])

概述

显示或操作在匹配元素上执行的函数队列

参数

element,[queueName]

element:检查附加列队的DOM元素

queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

element,queueName,newQueue

element:检查附加列队的DOM元素

queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

newQueue:替换当前函数列队内容的数组

element,queueName,callback()

element:检查附加列队的DOM元素

queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

callback():要添加进队列的函数

示例

描述:

显示队列长度

HTML 代码:

//在 style 元素中，您规定的是 HTML 元素如何在浏览器中呈现。

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>

jQuery 代码:

$("#show").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 代码:

<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>

jQuery 代码:

$("#start").click(function () {

$("div").show("slow");

$("div").animate({left:'+=200'},5000);

$("div").queue(function () {

$(this).addClass("newcolor");

$(this).dequeue();//使用 dequeue() 终止一个自定义的队列函数：

});

$("div").animate({left:'-=200'},1500);

$("div").queue(function () {

$(this).removeClass("newcolor");

$(this).dequeue();

});

$("div").slideUp();

});

$("#stop").click(function () {

$("div").queue("fx", []);

$("div").stop();

});

描述:

插入一个自定义函数如果函数执行后要继续队列，则执行 jQuery(this).dequeue();

HTML 代码:

<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...

jQuery 代码:

$(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();

});

dequeue([queueName])

概述

从队列最前端移除一个队列函数，并执行他。

参数

[queueName]

队列名，默认为fx// f出自英语单词function(函数)
设集合A 是一个非空的数集，对A 中的任意数x按照确定的法则f，都有唯一确定的数y与它对应，责这种关系叫做集合A 上的一个函数。

示例

描述:

使用 dequeue() 终止一个自定义的队列函数

jQuery 代码:

$("div").queue(function () {

$(this).toggleClass("red");

$(this).dequeue();

});

描述:

用dequeue来结束自定义队列函数，并让队列继续进行下去。

HTML 代码:

<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>

jQuery 代码:

$("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);

});

clearQueue([queueName])

概述

清空对象上尚未执行的所有队列

如果不带参数，则默认清空的是动画队列。这跟stop(true)类似，但stop()只能清空动画队列，而这个可以清空所有通过 .queue() 创建的队列。

参数

queueName

含有队列名的字符串。默认是"Fx"，动画队列。

示例

描述:

停止当前正在运行的动画：

jQuery 代码:

$("#stop").click(function(){

$("#box").clearQueue();

});

插件机制

jQuery.fn.extend(object)

概述

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

查看这里<a href="http://docs.jquery.com/Plugins/Authoring" title="Plugins/Authoring">Plugins/Authoring</a>可以获取更多信息。

参数

Object Object

用来扩充添加 jQuery 对象。

示例

描述:

增加两个插件方法。

jQuery 代码:

jQuery.fn.extend({

check: function() {

return this.each(function() { this.checked = true; });

uncheck: function() {

return this.each(function() { this.checked = false; });

}

});

结果:

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();

jQuery.extend(object)

概述

扩展jQuery对象本身。

用来在jQuery命名空间上增加新函数。查看 'jQuery.fn.extend' 获取更多添加插件的信息。

参数

object

用以扩展 jQuery 对象

多库共存

jQuery.noConflict([extreme])

概述

运行这个函数将变量$的控制权让渡给第一个实现它的那个库。

这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$("div p")的地方，就必须换成jQuery("div p")。 '''注意:'''这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库'''之前'''使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后一个导入的。

参数

Extreme Boolean

传入 true 来允许彻底将jQuery变量还原

示例

描述:

将$引用的对象映射回原始的对象。

jQuery 代码:

jQuery.noConflict();

// 使用 jQuery

jQuery("div p").hide();

// 使用其他库的 $()

$("content").style.display = 'none';

描述:

恢复使用别名$，然后创建并执行一个函数，在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中，原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。

jQuery 代码:

jQuery.noConflict();

(function($) {

$(function() {

// 使用 $ 作为 jQuery 别名的代码

});

})(jQuery);

// 其他用 $ 作为别名的库的代码

描述:

创建一个新的别名用以在接下来的库中使用jQuery对象。

jQuery 代码:

var j = jQuery.noConflict();

// 基于 jQuery 的代码

j("div p").hide();

// 基于其他库的 $() 代码

$("content").style.display = 'none';

描述:

完全将 jQuery 移到一个新的命名空间。

jQuery 代码:

var dom = {};

dom.query = jQuery.noConflict(true);

结果:

// 新 jQuery 的代码

dom.query("div p").hide();

// 另一个库 $() 的代码

$("content").style.display = 'none';

// 另一个版本 jQuery 的代码

jQuery("div > p").hide();

这有助于确保jQuery不会与其他库的$对象发生冲突。
在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$("div p")的地方，就必须换成jQuery("div p")。
注意:这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库之前使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后一个导入的。
OK，这样一来的话，$这个函数就没办法用了，这不是很郁闷，我可不想习惯了$在去投奔其它的函数名了。怎么办呢？办法还是有的，如下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html http://www.w3.org/1999/xhtml" target=_blank>http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $ = document.getElementById;//定义一个$函数，与jQuery的$函数发生冲突
        (function($) {//使用匿名方法（闭包{具体叫法尚不明朗，先这么叫吧}），接收一个参数$
            $(function() {
                $("#show").css({ border: "1px dotted #336699", width: "200px", height: "150px", color: "red" }).html("今天天气不错，挺风和日丽的！");
            });
        })(jQuery);//给前的匿名函数传参，最终前面$里面存储的是jQuery,
    </script>
</head>
<body>
    <div id="show"></div>
</body>
</html>