本文主要是介绍数据缓存 队列控制 插件机制 多库共存，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
数据缓存
data([key],[value])
概述
在元素上存放数据,返回jQuery对象。
如果jQuery集合指向多个元素，那将在所有元素上设置对应数据。 这个函数不用建立一个新的expando，就能在一个元素上存放任何格式的数据，而不仅仅是字符串。
参数
key
存储的数据名.
key,value
key:存储的数据名
value:将要存储的任意数据
obj
一个用于设置数据的键/值对
data()
示例
描述:
在一个div上存取数据
HTML 代码:
<div></div>
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 代码:
<div></div>
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>//<style> 标签定义 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>
<span></span>
<div></div>
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>
<button id="stop">Stop</button>
<div></div>
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...
<div></div>
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>
<div></div>
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><!--导入jQuery库，当然网站上用应该使用压文件，开发在VS08下使用jquery-1.3.2-vsdoc.js，会有智能提示-->
<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>
我们就不必在为有多个库使用$而烦脑了。
这篇关于数据缓存 队列控制 插件机制 多库共存的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
