jQuery对象的链式操作用法分析


Posted in Javascript onMay 10, 2016

本文实例讲述了jQuery对象的链式操作用法。分享给大家供大家参考,具体如下:

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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 #Javascript
Bootstrap按钮下拉菜单组件详解
May 10 #Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 #Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 #Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 #Javascript
Bootstrap模仿起筷首页效果
May 09 #Javascript
基于jquery实现智能表单验证操作
May 09 #Javascript
You might like
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
Python selenium如何设置等待时间
2016/09/15 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
个人工作表现评价材料
2014/09/21 职场文书
田径运动会通讯稿
2015/07/18 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技