简历上看你用过 jQuery 是吧?行,那你简单讲讲它的链式调用吧。

前言

面试是一个查漏补缺的过程,学习是一个学了又忘,忘了又学的过程。天上下雨地上滑,自己跌倒自己爬,简单记录一下自己的面试经历,希望大家勘误。

这是一场来得快也去得快的面试

我:可能我懂得比较的浅薄,只能简单的说一下。我理解的链式调用就是当我们使用选择器选取了一个元素时,可以对这个元素进行一系列的操作。比如修改样式,添加事件等等。

面试大佬:那它这个链式调用是怎么实现的呢?

我 :懵逼了一会。想了想自己花了三个小时又是地铁,又是公交,跟去西天取经一样。最终只能说出了一句,"不好意思,这个我没有深入的去了解过。毕竟这是我毕业后的第一个项目,后期项目交付了,就没有再去学过 jquery 了"。

说完之后我就知道我该拎包走了。这三个小时的车程就当做是 "来也匆匆去也匆匆,恨不能成功吧"。

虽然现在很少用 jQuery,但它还是很强大的

它是一个 js 框架,封装了很多 js 常用功能。相比于 dom 操作代码量少了很多。值得一提的是它的 链式调用,在我们对一个元素进行一系列操作时就会变得很方便。

它差不多长这个样子:

js 复制代码
$("#num-input").addClass("border").css("margin-left","10px").focus()

链式调用是一种很精辟 的语法技巧,它的精妙之处在于调用对象方法后返回对象本身,以满足后续的继续调用。专业一点说就是 管道风格的 DSL 链式代码,但是这种风格也只能在特定的情况下使用,如果方法需要返回特定的值,那这种方法就不适用了。

举个例子

js 复制代码
function Div(){
  this.className = "box";
  this.innerText = "hello";
}
div.prototype.getClass = function(){
  // ...进行操作
  return this
}
div.prototype.getInnerText = function(){
  // ...进行操作
  return this
}

const div = new Div();
div.getClass().getInnerText();

参考文章

相关推荐
变与不变8062 天前
jQuery 核心语法与 jQuery AJAX
前端·ajax·jquery
ycydynq2 天前
django用Bootstrap 模态框 在同一页面实现增删改查
django·bootstrap·jquery
传人once9 天前
选择文件按钮样式如何美化
前端·html·css3·jquery·html5
传人once12 天前
网页文字滚动效果如何做
前端·css·html·jquery·html5
传人once13 天前
多图片上传预览功能如何写
前端·css·html·jquery·html5
传人15 天前
网页文字滚动效果如何做
前端·javascript·jquery
研☆香18 天前
jQuery + Swiper.js 实现动态渲染轮播图
前端·javascript·jquery
刺客码1 个月前
Layui 表格固定列行高错位问题解决方案
前端框架·layui·jquery·web
এ慕ོ冬℘゜1 个月前
前端实战:基于jQuery递归实现通用树形组织菜单(可直接复用)
前端·javascript·jquery
零域码客1 个月前
一文掌握 jQuery + Flask 全栈核心知识点(前端交互 + 后端接口 + 前后端联调)
前端·python·ajax·flask·jquery·前后端联调·web全栈