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插件。
1215 0
|
8月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
39 0
|
9月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
32 0
|
30天前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
10月前
|
JavaScript
jQuery编写插件的两种方法
jQuery编写插件的两种方法
60 0
|
30天前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
23 0
|
30天前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
36 0
|
30天前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
63 1
|
7月前
|
JavaScript
jQuery年月日(年龄)选择插件
jQuery年月日(年龄)选择插件
36 0