一、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)

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值