jQuery源码学习，

3672Js.Com2023-04-13 00:03 来源:未知阅读:13150 关注度2

jQuery源码学习，

自定义一个类似jquer库==> Hq库的具体步骤：

// 1.通过$_$('div')方法就可以直接返回一个由Hq构造函数实例化出来的一个对象 // 2.在通过Hq构造函数，获取你以选择器为参数的所有节点 // 3.Hq在调用原型上addEles方法将所有的节点，赋值给对应的this的每一项（实例化对象） // 4.进而这个对象又可以使用Hq原型对象prototype上所有的方法 // 5.所以接下来，我们只需要封装各种方法即可，（设置形参） // 6.为了可以进行链式调用，只需在每个方法后面在返回该实例化对象 (return this)--紧接着调用其它方法 // 7.链式调用 --- 关键就是在于JQ源码中所有的方法最后都会返回 return this

第一步：

// 自定义Hq 就是相当于一个构造函数 function Hq(ele) { if (typeof ele == 'string') { // querySelectorAll 可以获取节点 let eles = document.querySelectorAll(ele) // for (var i = 0; i < eles.length; i++) { //可以将这一部分单独抽出来封装成一个方法addEles // this[i] = eles[i] // } // this.length = eles.length // 将节点传给addElEs（）方法 this.addEles(eles) } } 第二步：在其prototype原型上添加方法 -- 将节点对象每个内容（节点名字）赋值给构造函数中的this // ================ prototype原型上添加方法=============== Hq.prototype.addEles = function (ele) { // 将节点对象每个内容（节点名字）赋值给构造函数中的this for (var i = 0; i < ele.length; i++) { this[i] = ele[i] } this.length = ele.length } 第三步：在根据其用法，逆向添加其它的方法：例如css样式的方法 // ===============================添加css样式方法============================ { Hq.prototype.Style = function (parm, parn) { if (parm == 'yanse') { for (let i = 0; i < this.length; i++) { this[i].style.color = parn } } else if (parm == 'beijing' || parm == 'background-color') { for (let i = 0; i < this.length; i++) { this[i].style.background = parn } } else if (parm == 'biankuang') { for (let i = 0; i < this.length; i++) { this[i].style.border = parn } } return this } } 第四步：添加常见事件方法 // ===============================常用事件方法添加========================== // 添加鼠标点击方法 { Hq.prototype.Dj = function (cb) { //cb就是形参用来接收要执行的function函数 // addEventListener给节点添加事件 for (let i = 0; i < this.length; i++) { this[i].addEventListener('click', cb); //这里绑定的是一个事件侦听（'事件类型' ,function(){} -- 要执行的函数） } return this } // 添加鼠标移动方法 Hq.prototype.mouOver = function (cb) { for (let i = 0; i < this.length; i++) { this[i].addEventListener('mouseover', cb); } return this } } 第五步：添加常用的特效方法 // ==========================常用的特效方法================================= { Hq.prototype.yinCang = function () { for (let index = 0; index < this.length; index++) { this[index].style.display = 'none' } } Hq.prototype.xianShi = function () { for (let index = 0; index < this.length; index++) { this[index].style.display = 'block' } } } 第六步：最后定义一个函数$() -- 实例化出jquery对象 function $_$(argument) { // 构造函数实例化 return new Hq(argument) } ///////////////////==================以上就是自定义Hq库中的一些功能===================/////////////////////// 接下来我们在html网页文件实际使用Hq库： <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>源码解析</title> <script src="./script/Yunlong.js"></script> </head> <body> <div> <ul> <li><img src="./img/img/1.jpg" alt=""></li> <li><img src="./img/img/1.jpg" alt=""></li> <li><img src="./img/img/1.jpg" alt=""></li> <li><img src="./img/img/1.jpg" alt=""></li> </ul> <button>dianji</button> <p>45454545</p> </div> <script> // console.log(new Hq('img')); //自已手动的实例化对象 // console.log($_$('img')); //同过调用$_$方法实例化对象 // $_$('img').Myclick(function () { // console.log('这是云龙，自定义的点击方法'); // })
$_$('li').Style('yanse', 'red').Style('beijing', "#3f3").Style('biankuang', "2px solid #f33") // $_$('button').Dj(function () { // console.log('点击事件'); // })
// $('button').click(function () { // $('p').toggle() // })
</script> </body> </html>

本站文章为3672js教程网友分享投稿，版权归原作者，欢迎任何形式的转载，但请务必注明出处。同时文章内容如有侵犯了您的权益，请联系我们处理。