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方法,多库共存
jQuery链式编程,each方法,多库共存
|
Web App开发 JavaScript 前端开发
jQuery插件编写及链式编程模型小结
  JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效。大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQuery插件,然后像使用jQuery那样来操作DOM.  一、jQuery插件开发快速上手 1、jQuery插件模板 关于jQuery插件的编写,我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件。
1218 0
|
9月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
42 0
|
10月前
|
JavaScript
jQuery 自定义插件
jQuery 自定义插件
28 0
|
10月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
39 0
|
2月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
9天前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
14 1
|
11天前
|
JavaScript PHP Perl
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
|
10月前
|
JavaScript
jQuery 自定义插件(详细步骤)
jQuery 自定义插件(详细步骤)
102 0
|
11月前
|
JavaScript
jQuery插件开发
jQuery插件开发
61 0