jQuery对象的链式操作

原创 2012年03月22日 08:11:47

jQuery对象的链式操作

首先来看一个例子:

$(“#myphoto”).css(“border”,”solid 2px#FF0000”).attr(“alt”,” good”);

对一个jQuery对象先调用了css()函数修改样式,然后使用attr()函数修改属性,这种调用方式象链一样,所以称为“链式操作”。

链式操作能够让代码变得简洁,因为往往可以在一条语句中实现以往多条语句才能完成的任务。比如如果不使用链式操作,需要用两条语句才能完成上面的任务:

$(“#myphoto”).css(“border”,”solid 2px#FF0000”);

$(“#myphoto”).arrt(“alt”,”good”);

除了增加了代码量,还调用了两次选择器,降低了速度。

在一个较短的链式操作中,往往语句比较清晰,可以分步骤地对jQuery对象实现各种操作。但是链式操作不应该太长,否则会造成语句难以理解,因为要查看jQuery对象当前的状态并不是容易的事,尤其如果涉及jQuery对象中元素的增删操作是更加难以判断。

并不是所有的jQuery函数都可以使用链式操作。这与链式操作的原理有关,之所以可以实现链式操作是因为其中的每个函数返回的都是jQuery对象本身。在jQuery类库的内部实现中,虽然很多的函数都返回jQuery对象本身,但都是通过调用内部有限的几个函数实现的,比如attr()函数设置属性石,实际上最后调用了”jQuery.each(object,callback,args)”方法。注意此方法不是jQuery对象方法,jQuery对象方法也有一个each()函数,为”jQuery.fn.each(callback,args)”,此函数最后同样调用jQuery.each函数:

Each:function(callback,args){

         ReturnjQuery.each(this,callback,args);

}

下面看一看jQuery.each函数的返回结果:

Each.function(object,callback,args){

         Retumobject;

}

Object是jQuery.fn对象,即jQuery对象。最后返回的还是jQuery对象。

可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作。

除了获取某些数据的函数,比如获取属性值“attr(name)”,获取集合大小“size()”这些函数明显是返回数据的。除了这些函数之外的jQuery函数都可以用于链式操作,比如设置属性“attr(name.value)”。

“$”变量的使用

“$”变量是“jQuery”变量的引用。“jQuery”变量是全局变量,jQuery对象是指“jQUery.fn”,不要混淆。“jQuery”变量类似于静态类,上面的方法都是静态方法,可以在任何时刻调用。比如“jQuery.each”。“jQuery.fn”是实例方法,只能在jQuery对象上调用。比如“jQuery.fn.each()”方法只能通过”$(‘#id’).each”这种形式调用。

前面提到,可以使用”$”代替“jQuery”,因为在jQuery的内部有如下实现:

jQuery=window.jQuery=window.$

所以“$”变量和“jQuery”变量实际上是Window对象的属性,也就是全局变量。可以在页面上得任何地方调用。


jQuery链式调用理解

链式代码 $('input[type="button"]') .eq(0).click(function() { alert('点击我!'); }).end().eq(1) ....

浅谈jQuery的链式调用

实现链式的基本条件就是要实例对象先创建好,调用自己的方法。 链式调用是通过return this的形式来实现的。通过对象上的方法最后加上return this,把对象再返回回来,对象就可以继续调用方法...

jQuery文档对象的操作

1、创建属性:在DOM规范中,属性节点比较特殊,用户无法通过node对象提供的方法遍历或者定位属性节点,必须使用element对象定义的特定方法来创建和访问属性节点。jQuery创建属性节点和创建文本...

js的链式调用-如何实现类似jquery的链式调用

这里我是参考别人的一篇博客写的。如果有冲突请及时联系,我会立马修改的。 不知道我的理解对不对。请大家指教。 首先介绍一下链式调用的特点和优点把:他的优点是代码简洁易读,减少了多次重复使用同一个变量...
  • sufubo
  • sufubo
  • 2015年10月07日 20:35
  • 4200

css清除浮动float的七种常用方法总结和兼容性处理

7、万能清除法 **after伪类** 清浮动(现在**主流**方法,**推荐使用**) ``` 选择符:after{ content:"."; clear:both; ...

jQuery对象的链式操作

jQuery对象的链式操作 首先来看一个例子: $(“#myphoto”).css(“border”,”solid 2px#FF0000”).attr(“alt”,” good”); 对一个jq...
  • mzd8341
  • mzd8341
  • 2017年07月17日 11:25
  • 113

jQuery随笔 之 链式操作和对象转换

链式操作、对象转换

JQuery对象操作(附对应JS方法)

JQuery作为一种JS库,继承并优化了JS访问DOM对象的特性,更加方便的操作DOM对象,在本文,结合《JQuery内核详解》这本书,罗列了一系列JQuery中对文档对象的操作方法,并附有对应的JS...
  • lyozhou
  • lyozhou
  • 2013年07月04日 12:20
  • 949

JQuery对象操作(附对应JS方法)

JQuery作为一种JS库,继承并优化了JS访问DOM对象的特性,更加方便的操作DOM对象,在本文,结合《JQ内核详解》这本书,罗列了一系列JQ中对文档对象的操作方法,并附有对应的JS方法,作为一份参...
  • lyshiba
  • lyshiba
  • 2011年10月17日 17:15
  • 5708

Jquery -- JQuery对象操作(附对应JS方法)

大类                                JQ方法                      备注 创建元素 var $h1 = $(“”) 将内含的HTM...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery对象的链式操作
举报原因:
原因补充:

(最多只允许输入30个字)