简单手写一个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 }

 

posted @ 2022-04-01 14:25  musicBird  阅读(40)  评论(0编辑  收藏  举报