核心二 （jQuery core）
三、数据缓存
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特效函数，因为本篇主要阐述核心函数，对于单个特效函数这里不再详细说明使用细节。
四、插件机制
1、jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
返回值 jQuery
参数
object (Object) :用来扩充 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();
文档片段：
<input type="checkbox" />
<input type="radio" checked="checked"/>
2、jQuery.extend(object)
扩展jQuery对象本身，用来在jQuery命名空间上增加新函数
返回值 jQuery
参数
object (Object) :用来扩充 jQuery 对象。
示例：
//在jQuery命名空间上增加两个函数
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
alert(jQuery.min(2, 3)); // => 2
alert(jQuery.max(4, 5)); // => 5
五、多库共存
1、jQuery.noConflict()
运行这个函数将变量$的控制权让渡给第一个实现它的那个库。这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后，就只能使用jQuery变量访问jQuery对象。
例如，在要用到$("div p")的地方，就必须换成jQuery("div p")。
注意:这个函数必须在导入jQuery文件之后，并且在导入另一个导致冲突的库之前使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后一个导入的。
返回值 jQuery
示例：
//1、将$引用的对象映射回原始的对象。
jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';
//2、恢复使用别名$，然后创建并执行一个函数，在这个函数的作用域中仍然将$作为jQuery的别名来使用。
//在这个函数中，原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。
jQuery.noConflict();
(function($) {
$(function() {
// 使用 $ 作为 jQuery 别名的代码
});
})(jQuery);
// 其他用 $ 作为别名的库的代码
//3、创建一个新的别名用以在接下来的库中使用jQuery对象。
var j = jQuery.noConflict();
// 基于 jQuery 的代码
j("div p").hide();
// 基于其他库的 $() 代码
$("content").style.display = 'none';
2、jQuery.noConflict(extreme)
将$和jQuery的控制权都交还给原来的库(用之前请考虑清楚!)
这是相对于简单的 noConflict 方法更极端的版本，因为这将完全重新定义jQuery。这通常用于一种极端的情况，比如你想要将jQuery嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。
返回值 jQuery
参数
extreme (Boolean) : 传入 true 来允许彻底将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函数封装的方式比直接调用js和dom的各种函数，真是方便直接多了。 振作精神，下一篇接着把jQuery的选择器和属性介绍一下。函数很多，现在记不住就记不住算了，多写多用熟练了就好。以后用到的时候，可以直接当自己的在线参考书。希望对你也有帮助。
原文地址:http://www.cnblogs.com/wjfluisfigo/archive/2009/08/08/1530624.html
如果标题未标有<转载、转>等字则属于作者原创，欢迎转载，其版权归作者和博客园共有。
作 者：温景良
文章出处：http://wenjl520.cnblogs.com/ 或 http://www.cnblogs.com/