jQuery的链式编程

简介: jQuery的链式编程

在jQuery中,如果一直对同一个元素进行函数操作,那么可以使用 函数操作名,一直写下去。

        //这是普通的事件绑定
        $("button").click(function() {
          console.log("1")
        })
 
        $("button").mouseenter(function() {
          console.log("2")
        })
 
        $("button").mouseleave(function() {
          console.log("3")
        })
 
        //与上文功能相同的链式编程
        $("button").click(function() {
          console.log("1")
        }).mouseenter(function() {
          console.log("2")
        }).mouseleave(function() {
          console.log("3")
        })    

实现链式编程的核心,是函数调用结束之后返回的this对象,指的是当前调用者。这里的$("button").click(function(){})调用结束之后,返回this对象,它相当于$("button"),这样和后面的合在一起就实现了$("button").mouseenter(function() {})的函数调用,以上就是链式编程实现的一般步骤。

使用jQuery链式编程,比使用原生js更简单。


相关文章
|
JavaScript
jQuery链式编程,each方法,多库共存
jQuery链式编程,each方法,多库共存
112 0
jQuery链式编程,each方法,多库共存
|
Web App开发 JavaScript 前端开发
jQuery插件编写及链式编程模型小结
  JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效。大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQuery插件,然后像使用jQuery那样来操作DOM.  一、jQuery插件开发快速上手 1、jQuery插件模板 关于jQuery插件的编写,我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件。
1243 0
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
58 0
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
62 2
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
64 1
|
1月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
47 4
jQuery Growl 插件(消息提醒)
|
1月前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
42 4
jQuery Cookie 插件
|
22天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
30 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】