手写JQuery

最新推荐文章于 2023-05-20 21:02:09 发布

史学娇

最新推荐文章于 2023-05-20 21:02:09 发布

阅读量67

点赞数

分类专栏：面试题文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46151381/article/details/128706724

版权

面试题专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章展示了如何创建一个名为myJQuery的类，它继承自jQuery并扩展了额外的方法如addClass和style。通过这种方式，作者演示了如何构建一个轻量级的库，以模仿和扩展jQuery的功能，包括选择器、事件绑定和自定义对话框插件。

摘要由CSDN通过智能技术生成

class jQuery {
    constructor(selector) {
        const result = document.querySelectorAll(selector)
        const length = result.length
        for (let i = 0; i < length; i++) {
            this[i] = result[i]
        }
        this.length = length
        this.selector = selector
    }
    get(index) {
        return this[index]
    }
    each(fn) {
        for (let i = 0; i < this.length; i++) {
            const elem = this[i]
            fn(elem)
        }
    }
    on(type, fn) {
        return this.each(elem => {
            elem.addEventListener(type, fn, false)
        })
    }
    // 扩展很多 DOM API
}

// 插件
jQuery.prototype.dialog = function (info) {
    alert(info)
}

// “造轮子”
class myJQuery extends jQuery {
    constructor(selector) {
        super(selector)
    }
    // 扩展自己的方法
    addClass(className) {

    }
    style(data) {
        
    }
}

// const $p = new jQuery('p')
// $p.get(1)
// $p.each((elem) => console.log(elem.nodeName))
// $p.on('click', () => alert('clicked'))