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. P4349 [CERC2015]Digit Division

    题目传送门 思路 以下纯考场思路. 今天模拟赛考到了这题的加强版,然后预处理写炸了,\(100\) 变成 \(70\),当是给 CSP 攒 rp 了. 首先一眼看到题目可能会没有思路,没什么关系,手推 ...

  2. swiper列数 slidesPerView属性决定

    swiper轮播一行有几列如下决定 slidesPerView为3是三列,不写一列 // 初始化文章swiper var newsSwiper = new Swiper('#news-swiper', ...

  3. log 函数

    什么是对数 对数用 log 符号来表示.根据底数的不同,log 可以变换成 lg.ln.lg 是以 10 为底的对数,ln 是以 e 为底的对数. logax=y,是一个以 a 为底,x 为真数的对数 ...

  4. LeetCode-622 设计循环队列

    来源:力扣(LeetCode)链接:https://leetcode.cn/problems/design-circular-queue 题目描述 设计你的循环队列实现. 循环队列是一种线性数据结构, ...

  5. Reverse for 'blog_detail.html' not found.解决方法

    初学django遇到了以下问题: 查找解决方法的时候发现有以下几个原因: 1.字母打错 2.多加了空格 随后 我发现 报错的代码中多加了'.html'..删掉后就没问题了.

  6. Python爬虫-爬取手机应用市场中APP下载量

    一.首先是爬取360手机助手应用市场信息,用来爬取360应用市场,App软件信息,现阶段代码只能爬取下载量,如需爬取别的信息,请自行添加代码. 使用方法: 1.在D盘根目录新建.tet文件,命名为Ap ...

  7. k8s-分布式系统架构master-worker

    K8S系列一:概念入门 - 知乎 (zhihu.com) 大白话先了解k8s. k8s是为容器服务而生的一个可移植容器的编排管理工具 概述 Master-Workers 架构(粗译为主从架构)是分布式 ...

  8. 两行CSS让页面提升了近7倍渲染性能

    参考:https://juejin.cn/post/7168629736838463525 content-visibility.contain-intrinsic-size属性

  9. 如何批量删除office文档属性

    在文件资源管理器界面全选所有office文档, 右键->属性->详细信息->删除属性和个人信息->从此文件中删除以下信息->全选->确定,即可.

  10. WPF 布局控件

    <!--Horizontal水平竖直排放元素默认Vertical竖直排放 加属性Orientation--> <StackPanel Orientation="Horizo ...