1. 程式人生 > 其它 >簡單手寫一個jqurey

簡單手寫一個jqurey

 1 /**
 2  * @description 手寫jquery
 3  * @author ddxldxl
 4  */
 5 class Jquery {
 6     constructor(selector) {
 7         //遍歷dom樹
 8         let res = document.querySelectorAll(selector)
 9         let length = res.length
10         for( let i=0; i<length; i++) {
11             this[i] = res[i]
12         }
13 this.length = length 14 this.elements = res 15 } 16 17 get(index) { 18 return this[index] 19 } 20 21 each(fn) { 22 for( let i=0; i<this.length; i++ ) { 23 let elment = this[i] 24 fn(elment) 25 } 26 } 27 28 on(type, fn) {
29 return this.each(elem => { 30 elem.addEventListener(type, fn, false) 31 }) 32 } 33 } 34 35 //原型擴充套件 36 Jquery.prototype.dialog = function (){ 37 alert(123) 38 } 39 40 //繼承擴充套件 41 class myJquery extends Jquery { 42 constructor(selector) { 43 super(selector)
44 } 45 46 addClass(){ 47 48 } 49 50 style(){ 51 52 } 53 }