jquery选择器$('selector')返回的不是数组,而是一个被封装好的jQuery对象,查询到的每一个节点,都被以下标为属性的方式添加到jQuery对象,jQuery对象上的方法包含对象本身的方法和定义在原型上的方法两种,无论何种方法,在每次调用方法后,都会在方法内部返回一个this对象,指向当前的jQuery对象,方便下次链式调用,当然这只是一种非常基本的实现思路,具体思路见:jQuery的链式调用浅析_jquery_脚本之家 (jb51.net)

eg:要实现如下的效果:

$("#idbox").width("100px").height("100px");

则基础原理如下:

let Fun={
fn1:function(){
console.log("fn1");
return this;
},
fn2:function(){
console.log("fn2");
return this;
},
fn3:function(){
console.log("fn3");
return this;
}
} Fun.fn1().fn2();

jquery链式调用原理的更多相关文章

  1. jquery中链式调用原理

    (1).链式调用 $("#mybtn").css("width","100px") .css("height",&quo ...

  2. js链式调用 柯里化

    var d = 1; d.add(2).add(3).add(4) //输出10 写出这个add函数 Number.prototype.add = function(x){ return this + ...

  3. mark jquery 链式调用的js原理

    我们在使用jquery的时候会用到类似$("#id").css('color','red').show(200); 这样写有点减少代码量,减少了逐步查询DOM的性能损耗: js 原 ...

  4. [js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数

    一.我们从一个简单的构造函数+原型程序开始 var G = function(){}; G.prototype = { length : 5, size : function(){ return th ...

  5. 34、[源码]-AOP原理-链式调用通知方法

    34.[源码]-AOP原理-链式调用通知方法

  6. promise链式调用的应用

    then在链式调用时,会等前一个then或者函数执行完毕,返回状态,才会执行回调函数. (1)代码顺序执行,第一步调用了函数cook ,cook执行返回了一个promise,promise返回的是成功 ...

  7. 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用

    1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...

  8. jQuery链式操作[转]

    用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...

  9. jQuery源码:从原理到实战

    jQuery源码:从原理到实战 jQuery选择器对象 $(".my-class"); document.querySelectorAll*".my-class" ...

  10. Javascript链式调用案例

    jQuery用的就是链式调用.像一条连接一样调用方法. 链式调用的核心就是return this;,每个方法都返回对象本身. 下面是简单的模拟jQuery的代码, <script> win ...

随机推荐

  1. LeetCode-807 保持城市天际线

    来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/max-increase-to-keep-city-skyline 题目描述 在二维数组grid ...

  2. Kronecker convolution 克罗内克卷积理解

    在了解空洞卷积时候发现了Kronecker convolution是对空洞卷积的改进,于是学习了一下 ,原文连接:1812.04945v1.pdf (arxiv.org) 个人理解如下: 首先,对于一 ...

  3. Qt实现简单的TCP协议(客户端的实现)

    1.QT提供了QTcpSocket类,可以直接实例化一个客户端.需要在pro文件中添加   QT += network 2.连接服务端 connect(connectbutton,SIGNAL(cli ...

  4. No.2.2

    空间转换(使用transform属性实现元素在空间的位移.旋转.缩放等效果) 空间:是从坐标轴角度定义的.x.y.和 z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同. 空间转换也叫3D转换(属 ...

  5. Linux查询CPU,内存,硬盘使用率以及网卡流量指令

    Linux查询CPU,内存,硬盘使用率以及网卡流量指令 1.获取cpu使用率 //cpu `top -b -n1 | fgrep "Cpu" | awk '{print 100-$ ...

  6. 1405. 最长快乐字符串 (Medium)

    问题描述 1405. 最长快乐字符串 (Medium) 如果字符串中不含有任何 'aaa', 'bbb' 或 'ccc' 这样的字符串作为子串,那么该字符串就是一个「快乐字符串」. 给你三个整数 a, ...

  7. libuv 网络库设计概览译

    设计概览 libuv 是一种支持跨平台的网络库,最初是为了NodeJS作为某个模块实现的,主要基于事件驱动的I/O 模型设计的. 这个库不仅仅对不同的I/O polling 机制提供简单的抽象. ha ...

  8. File类-绝对路径 相对路径

    绝对路径:通过给定的路径能够直接在我的电脑中找到的文件 相对路径:文件相对于应用程序的路径 结论: 我们在开发中要尽量使用相对路径 File方法只能读取小文件,是一下子全读出来.如果读大文件则使用文件 ...

  9. python 获取近几周日期

    import datetimedef get_Next_day(count): today = datetime.datetime.today().date() for i in range(coun ...

  10. 新的学习历程-python1 Hello World

    1 print('hello world!') 2 if 2 > 0: 3 print('ok') 4 print('yes') 5 6 x = 3; y = 4 7 print(x + y) ...