自定義一個類似jquer庫==> Hq庫的具體步驟： // 1.通過$_$('div')方法就可以直接返回一個由Hq構造函數實例化出來的一個對象 // 2.在通過Hq構造函數，獲取你以選擇器為參數的所有節點 // 3.Hq在調用原型上addEles方法將所有的節點，賦值給對應的this的每一項（實例 ...
自定義一個類似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>
