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 动态加载 css 方法总结
Jul 11 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
js实现简单选项卡功能
Mar 23 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 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
改造一台复古桌面收音机
2021/03/02 无线电
PHP详细彻底学习Smarty
2008/03/27 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
js实现验证码功能
2020/07/24 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
Python while 循环使用的简单实例
2016/06/08 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
Python 必须了解的5种高级特征
2020/09/10 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
平安工地建设方案
2014/05/06 职场文书
环保倡议书50字
2014/05/15 职场文书
英语系毕业生求职信
2014/07/13 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
医院党员公开承诺书
2014/08/30 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS