js 链式操作

关注

原创最新推荐文章于 2026-11-08 16:39:50 发布 1k 阅读 AI 写同款· GEO 优化 ›

js实现jQuery的简单方法和链式操作我用这篇文章来理一理如何用js去实现封装jQuery的简单方法。本文js实现了下面jquery的几种方法，我将它分为8个小目标实现$(".box1").click( )方法实现$(“div”).click( )方法考虑$( )中参数的三种情况实现jq中的on方法实现链式操作实现jq中的eq方法实现jq中的end方法实现jq中的css方法有不正确的地方还望大家在评论区指出来，谢谢啦。 1. 实现$(".box1").click( )方法首先，我们定第一个小目标，就是如何一步一步去阅读详情

$(“elem”).show().css(“color”,“red”); 这就是jq里面的链式操作了是不是很方便啊
可是以前只是用的比较方便没仔细了解过是怎么实现的被问到了也不知所措所以我就借鉴了下面资料来了解下js的链式操作

https://segmentfault.com/a/1190000008724608
http://www.jb51.net/article/75476.htm

$\color{red}{最常见的，是jQuery直接返回this的方式}$
先理解下最简单的链式调用法

我们可以用简单的构建对象的方法来实现
let Obj = {
    a: 0,
    add: function(){
        this.a += 1;
        return this
    }
}
Obj.add().add();
console.log(Obj.a);    //2

这个只是最简单的实现链式调用的方法

实现Obj.add(1).add(2).add(3) // 6
let Obj = {
    a: 0,
    add: function(b){
        this.a = b+this.a;
        return this
    }
}
Obj.add(1).add(2).add(3);
console.log(Obj.a);    //6

return this 是链式调用的核心

多个方法的链式调用

function Dog(){
    this.run= function(){
      alert("The dog is running....");
      return this;//返回当前对象 Dog
    };
    this.eat= function(){
      alert("After running the dog is eatting....");
      return this;//返回当前对象 Dog
 
    };
    this.sleep= function(){
      alert("After eatting the dog is running....");
      return this;//返回当前对象 Dog
 
    };
  }
  //一般的调用方式；
/* var dog1 =new Dog();
  dog1.run();
  dog1.eat();
  dog1.sleep();*/
  var dog2 = new Dog();
  dog2.run().eat().sleep();