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