我用这篇文章来梳理一下如何用js实现封装jQuery的简单方法。 在本文中，js实现了jquery的以下方法，我把这些方法分成八个小目标来实现$(“. box 1”)。click()方法实现$(“div”)。click()方法考虑$()中参数实现jq中on方法、jq中链操作实现eq方法、jq中end方法和jq中css方法三种情况。希望评论部分有不正确的地方。 1.实现$(“. box 1”)。click()方法。首先我们设定第一个小目标，就是如何一步步实现下面jQuery代码的功能。 & lt！DOCTYPE html & gt& lthtml lang = " en " & gt& lthead & gt& ltmeta charset="UTF-8 " >& ltmeta name = " viewport " content = " width =设备宽度，initial-scale=1.0 " >& lttitle & gt文档& lt/title & gt；//如果在同一个文件下操作，记得删除下面介绍的CDN < script src = " https://CDN . bootcdn . net/Ajax/libs/jquery/3 . 5 . 0/jquery . min . js " & gt；& lt/script & gt；& ltstyle & gt. box1 {宽度:100px高度:100px背景:红色；} & lt/style & gt；& lt/head & gt；& ltbody & gt& ltdiv class="box1 " >& lt/div & gt；& lt/body & gt；& lt脚本& gt$(".box1 ")。单击(()= & gt{ console . log(456)；})& lt；/script & gt；& lt/html & gt；将代码复制到这里。不了解jquery也不要慌。只需要花10分钟在jQuery教程上简单了解一下。 $(".box1 ")。单击(()= & gt{ console . log(456)；})复制代码。让我们言归正传。我们来分析一下上面jQuery的代码。 $(“. box 1”)实现了选择器的功能。 $(".box1 ")。click是选择器+调用click方法，最后在click中传入函数。 第一个小目标是封装js实现上面代码的功能。 我们采取三步走的策略来实现它。 Js实现$(“. box 1”)实现$(“. box 1”)。click()实现$(“. box 1”)。单击(()= >；{console.log("123")})第一步用js实现$(".box1 ")，对//实现$(" . box 1 ")class jquery { constructor(arg){ console . log(document . query selector(arg))；} } function $(arg) {返回新的jquery(arg)；}//实现$(" . box 1 ")let RES = $(" . box 1 ")；console . log(RES)；复制代码是通过构建()方法并返回jquery实例来实现(“box1”)的吗？ 好了，接下来，第二步就是实现$(“. box 1”)。单击() 我相信你可以看到jquery类中有一个click方法。 //实现$ (".box1 ")。click()class jquery { constructor(arg){ console . log(document . query selector(arg))；} click() {console.log("执行了click方法")；} } function $(arg) {返回新的jquery(arg)；}//实现$ (".box1 ")。单击()let res = $ (".box1 ")。单击()；console . log(RES)；复制代码接下来，我们采取的第三步是实现$(“. box 1”)。单击(()= >；{ console.log("123") }) //实现$ (".box1 ")。单击(()= >；{console.log("123")})类jquery { constructor(arg){ this . element = document . query selector(arg)；//console . log(element)；} click(fn){ this . element . addevent listener(" click "，fn)；} } function $(arg) {返回新的jquery(arg)；}//实现$ (".box1 ")。单击(()= >；{console.log("123")}) $(".box1 ")。单击(()= & gt{ console . log(" 123 ")})；复制代码到此为止，我们已经实现了第一个小目标。你觉得简单吗？好了，接下来说第二个小目标。 2.实现$(“div”)的第二个小目标并不难。click()方法，这是考虑到有多个div元素需要与click事件绑定。如果我们用selectSelectorAll来获取元素，那么怎么解决其实挺简单的，就是click方法中多了一个循环来获取NodeList中的值。 我直接上代码，你试试就知道了。 & lt！DOCTYPE html & gt& lthtml lang = " en " & gt& lthead & gt& ltmeta charset="UTF-8 " >& ltmeta name = " viewport " content = " width =设备宽度，initial-scale=1.0 " >& lttitle & gt文档& lt/title & gt；& ltstyle & gt. box1 {宽度:100px高度:100px背景:红色；} .box2 {宽度:100px高度:100px背景:蓝色；} & lt/style & gt；& lt/head & gt；& ltbody & gt& ltdiv class="box1 " >& lt/div & gt；& ltdiv class="box2 " >& lt/div & gt；& lt/body & gt；& lt脚本& gt//实现$ (".box1 ")。单击(()= >；{ console . log(" 123 ")})class jquery { constructor(arg){/下面的元素存储NodeList对象，是一个类数组，长度属性this . element = document . query selector all(arg)；} click(fn) { for(设I = 0；我& ltthis . element . length；i++) { this.element[i]。addEventListener("click "，fn)；} } } function $(arg) {返回新的jquery(arg)；}//实现$ (".box1 ")。单击(()= >；{console.log("123")}) $("div ")。单击(()= & gt{ console . log(" 123 ")})；& lt/script & gt；& lt/html & gt；复制代码，你就完成了两个小目标。我相信你很有成就感。 3.考虑$()中参数的三种情况。接下来，让我们考虑$()中不同参数的三种情况。我先列举三个案例。 (可能还有其他情况，这里就不说了。) 1.案例1:当$()参数是字符串$(“. box 1”)时复制代码。2.案例2:$()参数是一个函数。 //参数是函数$(function(){ console . log(" 123 ")；})复制代码3。案例3:$()参数是NodeList对象或者是selectSelect得到的节点。//Case 3 $(document . query selectorall(" div "))。单击(()= >；{ console . log(" 123 ")；})$(document . query selector(" div "))。单击(()= & gt{ console . log(" 456 ")；})复制代码。下一个小目标是手写函数实现三种情况。 首先我们添加addEles方法，修改click方法addEles(eles){ for(让I = 0；我& lt长度；i++){ this[I]= eles[I]；} this.length = eles .长度；}//实现$ (".box1 ")。单击(()= >；{ console . log(" 123 ")})click(fn){ for(设I = 0；我& ltthis .长度；i++) {这个[我]。addEventListener("click "，fn)；}}复制代码。接下来实现三个不同参数的求解，constructor(arg){//Case I if(type of arg = = ' string '){ this . addles(document . query selectorall(arg))；} else if(type of arg = = = ' function '){//Case 2 document . addevent listener(" domcontentloaded "，arg)；}else {// case三if(type of arg . length = = ' undefined '){ this[0]= arg；this . length = 1；} else { this . addeles(arg)；}}}复制代码4。在jq中实现on方法。接下来，实现第四个小目标。实现jq的on方法。// on方法on (eventname，fn){ let event array = event name . split(" ")；//考虑多个节点for(设I = 0；我& ltthis .长度；++){//考虑多个事件for(设j = 0；j & lteventArray.lengthj++) {这个[我]。addEventListener(eventArray[j]，fn)；}}}复制代码，在方法$(“div”)上测试ok No //。On ("mouse over mouse down "，function () {console.log ("on方法")；})复制代码5。实现连锁经营。接下来实现第五个小目标实现jq的连锁经营。添加return this到on并点击实现链式//链式操作//焦点。添加return this到on并点击实现链// click方法click(fn) {for(设I = 0；我& ltthis .长度；i++) {这个[我]。addEventListener("click "，fn)；}还这个；//console . log(this)；} // on方法on (eventname，fn){ let event array = event name . split(" ")；//考虑多个节点for(设I = 0；我& ltthis .长度；++){//考虑多个事件for(设j = 0；j & lteventArray.lengthj++) {这个[我]。addEventListener(eventArray[j]，fn)；} }还这个；}复制代码6。实现jq中的eq方法。接下来，实现第六个小目标。实现jq//EQ method EQ(index){ return new jquery(this[index])；}把代码复制到这里，大家应该都清楚了，通过一个jquery实现new的过程。我们来回顾一下:执行函数自动创建一个空对象，将空对象的原型指向构造函数的prototype属性，在函数内部用这个绑定空对象。如果renturn后跟对象，则返回该对象。 如果没有，它会自动返回到这个对象。7.实现jq中的end方法，实现第七个小目标，实现jq中的end方法。 要实现这个函数，除了添加end()方法，还要在构造函数上实现。构造函数在eq方法中添加了参数root、属性prevObject和参数this。 constructor(arg，root){ if(type of root = = = " undefined)){ this . prev object =[document]；} else { this.prevObject = root} //eq方法eq(index){ return new jquery(this[index]，this)；} //end方法end(){返回this.prevObject}复制代码8。在jq中实现css方法。在jq中，css可以获取样式并设置一种或多种样式。//案例一:获取样式(只获取第一个元素)让RES = $(“div”)。CSS(“后台”)；console . log(RES)；//Case 2(设置样式)$(“div”)。CSS("背景"，"黄色")；////案例三(设置多种样式)$(“div”)。CSS({背景:“黑色”，宽度:200，不透明度:0.3 })；复制代码然后实现css方法//css方法css(...args){ if(args . length = = 1){//情况1:获取样式if(type of args[0]= = = ' string '){ return this . Get style(this[0]，args[0])；}else {//情况3:为(设i = 0)设置多个样式；我& ltthis .长度；i++){ for(let j in args[0]){ this . set style(this[I]，j，args[0][j])；}}} }else {// case三for(设I = 0；我& ltthis .长度；i++) { this.setStyle(this[i]，args[0]，args[1])；}}} //css方法css(...args) {if (args.length = = 1) {// 1:获取样式if(type of args[0]= ' string '){ return this . get style(this[0]，args[0])；}else {//情况3:为(设i = 0)设置多个样式；我& ltthis .长度；i++){ for(let j in args[0]){ this . set style(this[I]，j，args[0][j])；}}} }else {// case三for(设I = 0；我& ltthis .长度；i++) { this.setStyle(this[i]，args[0]，args[1])；}}}复制代码添加cssNumber方法确定不含px的属性名。//css方法使用$。CSS Number = { AnimationiterationCount:true，columnCount: true，fillOpacity: true，flexGrow: true，flexShrink: true，fontWeight: true，gridArea: true，gridColumn: true，gridColumnStart: true，gridRow: true，gridrownend:true，gridRowStart: true，lineHeight: true，Opacity: true，order: true，orbonds:true，widows: true，ZIndex: true，zoom: true}复制代码，最后呈现完整的代码。如果大佬们觉得不错，就给他们点个赞<！DOCTYPE html & gt& lthtml lang = " en " & gt& lthead & gt& ltmeta charset="UTF-8 " >& ltmeta name = " viewport " content = " width =设备宽度，initial-scale=1.0 " >& lttitle & gt文档& lt/title & gt；& ltstyle & gt. box1 {宽度:100px高度:100px背景:红色；} .box2 {宽度:100px高度:100px背景:蓝色；转换原点:0 100% 0；转场:0.3s} . box 2:hover { transform:scaleX(2)；宽度:200px高度:100px} & lt/style & gt；& lt/head & gt；& ltbody & gt& ltdiv class="box1 " >& lt/div & gt；& ltdiv class="box2 " >& lt/div & gt；& ltbutton & gt单击；{//console . log(" 123 ")//})；////实现情况2:参数为函数// $(function() {// console.log('情况2 ')；//})///Case 3//$(document . query selector all(" div "))。单击(()= >；{//console . log(" 123 ")；//})//$(document . query selector(" div "))。单击(()= & gt{//console . log(" 456 ")；//})///在方法//$ ("div ")上。on ("mouse over mouse down "，function () {//console.log ("on方法")；//})//链式操作//$(“div”)。单击(()= >；{//console . log(" click method ")/})。on ("mouseover "，function(){//console . log(' chain on method ')；//})//$(“div”)。on ("mouseover "，function(){//console . log(' chained on method ')；// }).单击(()= & gt{//console . log(" click method ")//})///eq method//$(" div ")。等式(0)。单击(()= >；{//console . log(" eq method ")/})//endf method//let RES = $(" div ")。等式(0)。等式(0)。等式(0)。end()；//console . log(RES)；//css方法//案例一:获取样式(只获取第一个元素)//let res = $ ("div ")。CSS(“后台”)；//console . log(RES)；//Case 2(设置样式)//$(“div”)。CSS("背景"，"黄色")；////情况三(设置多种样式)//$(“div”)。CSS({背景:“黑色”，宽度:200，不透明度:0.3 })；& lt/script & gt；& lt/html & gt；