一、jQuery核心(下)

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)