1、数据缓存，暂时将数据存放在页面标签元素中，方便数据的交换。
①、取值
/** * 返回标签元素上储存的相应名字的数据，(是通过用data(name, value)来设定的),使用 * 该方法之前，请先将标签元素转换成jQuery对象，再调用该方法，如果jQuery对象为一 * 个集合，则返回第一个元素的对应数据。 * * @param name 用于取值的键，可选参数，不指定时，则会把所有数据作为一个JavaScript对象来返回 * * @return 任何类型的值(Any) */ data([name])
示例：下面有两个span标签元素，现在先存数据，在取数据。
<span id="span1"></span>
<span id="span2"></span>
设置值：
$("span").data('name',"zhangsan");//在所有span标签上都存放名为name，值为zhangsan的缓存数据。
$("#span1").data('name',"zhangsan");//只在第一个span标签(id='span1')的标签中存放数据。
$("#span2").data('name',"lisi");//只在第二个span标签(id='span2')的标签中存放数据。
取值：
value = $('span').data('name')或者value = $('#span1').data('name');
alert(value);//打印第一个span标签中存放的名为name对应的值。
value = $('#span2').data('name');
alert(value);//打印第二个span标签元素中存放的名为name对应的值。
②、存值(一般采用键值对的形式进行)
/** * 在元素上存放数据 * * @param name 存放数据的键(String) * @param value 存放数据的值(Any) * * @return jQuery对象 */ data(name, value)
示例：
参考上面取值方法data([name])中设置值部分。
③、存放一组数据
/** * 存放一组数据，也就是存放对象类型的数据，该方法会覆盖之前存放在该标签元素上的所有数据 * (不明白？请参考示例) * * @param obj 要存放在标签元素上的对象数据 * * @return jQuery对象 */ data(obj)
示例1：
<span id="span1"></span>
<span id="span2"></span>
存值：
var obj = new Object();
obj.name='zhangsan';
obj.age=12;
obj.text='测试';
$("#span1").data(obj);//先存对象，后存键值对
$("#span1").data('rr',"rr");
$("#span1").data('tt',"tt");
取值：
var obj = $("#span1").data();
alert(obj.text);//打印“测试”
alert($("#span1").data('rr'));//打印“rr”
alert($("#span1").data('tt'));//打印“tt”
示例2：
存值：
var obj = new Object();
obj.name='zhangsan';
obj.age=12;
obj.text='测试';
$("#span1").data('rr',"rr");//先存键值对，后存对象
$("#span1").data('tt',"tt");
$("#span1").data(obj);
取值：
var obj = $("#span1").data();
alert(obj.text);//打印“测试”
alert($("#span1").data('rr'));//打印“undefined”
alert($("#span1").data('tt'));//打印“undefined”
④、移除数据
/** * 从标签元素上移除指定名称的值 * * @param name 存放数据时的数据名称(键) * * @return jQuery对象 */ removeData(name)
示例：略
⑤、存值(底层方法)
/** * 存值的另一种方法，这是一个底层方法，不建议使用，你可以直接使用上面②中的data(name, value)来代替， * 不过该方法无需提前创建存放数据的，目标标签元素的jQuery对象。 * * @param element 要关联数据的DOM对象(数据暂存地) * @param key 存放数据的名称(键) * @param value 存放的数据的值(值) * * @return jQuery对象 */ jQuery.data(element, key, value)
示例：见下面的取值示例。
⑥、取值(底层方法)
/** * 取值的另一种方法，与⑤中的存值方法匹配使用，这也是一个比较底层的方法，同样不建议使用，你可以直接使 * 用①中的data([name])方法来代替 * * @param element 查找数据对应的DOM对象(也就是数据暂存地)，可选，不指定则会返回元素上 * 面存放的所有数据，以Object的形式返回。 * @param key 取数时使用的键,也就是数据名 * * @return Object，如果不指定参数，则会返回元素上面存放的所有数据，以Object的形式返回。 */ jQuery.data([element], [key])
示例1：
<span id="span1"></span>
<span id="span2"></span>
存值：
$.data(document.getElementsByTagName("span"),'rr','rrValue')
取值：
alert($.data(document.getElementsByTagName("span"),'rr'));//打印rrValue
示例2：
存值：
$.data(document.getElementById("span1"),'rr','span1--rrValue');
$.data(document.getElementById("span2"),'rr','span2--rrValue');
取值：
alert($.data(document.getElementById("span1"),'rr'));//打印span1--rrValue
alert($.data(document.getElementById("span2"),'rr'));//打印span2--rrValue
示例3：
存值：
$.data(document.getElementsByTagName("span"),'rr','rrValue')
取值：
alert($.data(document.getElementById("span1"),'rr'));//打印null
从上面示例3可以看得出⑤中的存值方法与⑥中的取值方法的element参数必须一致(DOM对象必须是同一个对象)
2、队列控制，高版本中新增功能，暂未弄明白，明白后补上，暂略……
3、插件机制，扩展jQuery的功能。
①、扩展 jQuery 元素集来提供新的方法（通常用来制作插件） /** * 扩展 jQuery 元素集来提供新的方法 * * @param object 用来扩充jQuery元素的对象，说白了就是为jQuery对象新增的方法 * * @return jQuery对象 */ jQuery.fn.extend(object)
示例：
//先定义扩展方法：
$(function(){
//扩展两个方法
$.fn.extend({
extendMethodOne:function() {
alert("这是扩展方法1！");
},
extendMethodTwo:function() {
alert("这是扩展方法2！");
}
});
//在扩展一个方法
$.fn.extend({
extendMethodThree:function() {
alert("这是扩展方法3！");
}
});
});
//调用
$("#testInput1").extendMethodTwo();//打印"这是扩展方法2！"
$("#testInput2").extendMethodThree();//打印"这是扩展方法3！"
②、扩展jQuery对象本身
/** * 扩展jQuery对象本身，用来在jQuery命名空间上增加新函数。 * 与①的区别在于，①的这种扩展方法是针对页面具体元素对象的，二②是全局的，说直白一点， * 使用①总扩展的方法，必须首先针对页面中的标签元素创建一个对象，而使用②中扩展的方法 * 则无需提前创建对象，直接使用全局的jQuery对象($或者jQuery)即可访问。打个比方，①类似 * java语言中类的实例方法，需创建对象访问，而②中扩展的方法，类似于java语言中的静态方法 * 通过类名便可直接访问。 * * @param object 用来扩充jQuery对象的对象，说白了就是为jQuery对象新增的方法 * * @return jQuery对象 */ jQuery.extend(object)
示例：
$(function(){
$.extend({
max:function(a, b) {
if (a > b) {
return a;
} else {
return b;
}
},
min:function(a, b) {
if (a > b) {
return b;
} else {
return a;
}
}
});
});
function testMethod() {
alert(11);
alert("the max of 5 and 6 : " + $.max(5, 6));
alert("the min of 5 and 6 : " + $.min(5, 6));
}
4、多库共存(也就是从jQuery中动态取消或绑定用$代表jquery对象，从而解决多库同时使用$符号造成的冲突)
①、取消$代表jquery对象，也就是将变量$的控制权让渡给第一个实现它的那个库。
/** * 取消jquery对$符的绑定和使用，运行该函数以后，对jquery的任何访问都只能通过变量jQuery对象来进行。 * 该方法也可用于为 jQuery 变量规定新的自定义别名或转移到新的命名空间进行访问，具体来说就是将执行 * 将该方法的返回值赋值给另一个变量或对象内属性即可。 * * 该方法一般用在，在使用了jquery库的同时，又使用了另一个使用了$符号的js库的地方，分两种情况 * a、先导入jquery库，后导入其他使用了$的库，此时无需调用该方法来解决冲突，对于jquery的使用已经不能 * 使用$，可以直接用jQuery来访问，对于后导入的其他js库中的$可以直接有效使用。 * b、先导入其他使用了$的库，后导入jquery库，此时在使用其他库中的$之前，必须先调用该方法将jquery对 * $控制权让渡给其他库，然后即可使用其他库中的$对象或变量了。 * * @return jQuery对象，可以赋值给另一个变量，以便可以像$一样的代替jQuery对象使用。 * */ jQuery.noConflict()
示例：
假如现在有一个js库，other.js,它使用了$作为其全局访问对象，且有一个全局方法$.random(),用于求随机数，那么
现在分别针对各种情况的使用，分别举例说明：
a、先导入jquery库，后导入other.js。
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/other.js"></script>
<script type="text/javascript">
//访问jquery对象，此时对于jquery而言，$符已经失效，不能作为jquery的别名使用,应直接使用jQuery
jQuery.trim(" de ");//jQuery的去除空字符方法
//访问other库的$对象，无需调用noConflict();
$.random();
</script>
b、先导入other.js，后导入jquery.js库
<script type="text/javascript" src="js/other.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
$.trim(" fddd ");或jQuery.trim(" ggtt ")//访问jquery有效
$.random();//调用other.js库中的方法无效
//让jQuery对象让渡对$符的控制
jQuery.noConflict();
$.random();//调用other.js库中的方法有效
c、当jQuery让出对$符的控制后，可以为jQuery指定新的别名以替代$，如指定@为别名，则可以如下进行：
var @ = jQuery.noConflict();
@.trim(" rr ");
d、完全将 jQuery 移到一个新的命名空间：
var dom = {};
dom.query = jQuery.noConflict(true);
dom.query.trim(" ff ");
②、上面方法①的加强版，将$和jQuery的控制权都交还给原来的库，也就是执行下面方法后$和jQuery都不再是jquery的对象引用，
如果当前上下文中有对应使用$和jQuery的库，则此时可有效使用。
/** * 取消jquery对$和jQuery变量字符的控制 * * @return boolean 是否彻底将jQuery变量还原 */ jQuery.noConflict(removeAll)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
