摘要：但它操作的便利性無(wú)出其右。我用寫(xiě)了一個(gè)基于簡(jiǎn)化版的，僅做個(gè)學(xué)習(xí)記錄。包含基礎(chǔ)操作，支持鏈?zhǔn)讲僮?，僅供日常使用。功能基于基本選擇器構(gòu)造，包括基于原生構(gòu)造，將原生對(duì)象轉(zhuǎn)化為對(duì)象。為支持批量操作，構(gòu)造器應(yīng)包含復(fù)數(shù)的。

原文地址：Bougie的博客

jQuery作為曾經(jīng)Web前端的必備利器，隨著MVVM框架的興起，如今已稍顯沒(méi)落。但它操作DOM的便利性無(wú)出其右。我用ES6寫(xiě)了一個(gè)基于class簡(jiǎn)化版的jQuery，僅做個(gè)ES6學(xué)習(xí)記錄。包含基礎(chǔ)DOM操作，支持鏈?zhǔn)讲僮?，僅供日常使用。當(dāng)然，它不支持IE。

構(gòu)造一個(gè)tinyJquery對(duì)象。功能：基于基本選擇器構(gòu)造，包括id、class、tagName；基于原生DOM構(gòu)造，將原生DOM對(duì)象轉(zhuǎn)化為tinyJquery對(duì)象。為支持批量操作，tinyJquery構(gòu)造器應(yīng)包含復(fù)數(shù)的DOM。

class tinyJquery {
    constructor(name) {
        if (typeof name == "string") {
            // 選擇器
            this.dom = document.querySelectorAll(name)
        } else if (name.constructor.name == "NodeList"){
            // 鏈?zhǔn)?            this.dom = name
        } else {
            // 原生DOM轉(zhuǎn)tinyJquery
            this.dom = [name]
        }
    }
}

使用$函數(shù)構(gòu)建tinyJquery對(duì)象

function $(name) {
    return new tinyJquery(name)
}

class tinyJquery {
    constructor(name) {
        if (typeof name == "string") {
            // 選擇器
            this.dom = document.querySelectorAll(name)
        } else if (name.constructor.name == "NodeList"){
            // 鏈?zhǔn)?            this.dom = name
        } else {
            // 原生DOM轉(zhuǎn)tinyJquery
            this.dom = [name]
        }
    }
    // addEventListener
    on(eventName, fn, bubble = false) {
        this.dom.forEach(i => {
            i.addEventListener(eventName, fn, !bubble)
        })
        return new this.constructor(this.dom)
    }
    // removeEventListener
    un(eventName, fn, bubble = false) {
        this.dom.forEach(i => {
            i.removeEventListener(eventName, fn, !bubble)
        })
        return new this.constructor(this.dom)
    }
}

class tinyJquery {
    constructor(name) {
        if (typeof name == "string") {
            // 選擇器
            this.dom = document.querySelectorAll(name)
        } else if (name.constructor.name == "NodeList"){
            // 鏈?zhǔn)?            this.dom = name
        } else {
            // 原生DOM轉(zhuǎn)tinyJquery
            this.dom = [name]
        }
    }
    // addClass
    ac(className) {
        this.dom.forEach(i => {
            i.classList.add(className)
        })
        return new this.constructor(this.dom)
    }
    // removeClass
    rc(className) {
        this.dom.forEach(i => {
            i.classList.remove(className)
        })
        return new this.constructor(this.dom)
    }
    // toggleClass
    tc(className) {
        this.dom.forEach(i => {
            i.classList.toggle(className)
        })
        return new this.constructor(this.dom)
    }
    // containClass
    cc(className) {
        let flag = false
        this.dom.forEach(i => {
            if(i.classList.contains(className)) flag = true
        })
        return flag
    }
}

class tinyJquery {
    constructor(name) {
        if (typeof name == "string") {
            // 選擇器
            this.dom = document.querySelectorAll(name)
        } else if (name.constructor.name == "NodeList"){
            // 鏈?zhǔn)?            this.dom = name
        } else {
            // 原生DOM轉(zhuǎn)tinyJquery
            this.dom = [name]
        }
    }
    // set inline style
    css(obj) {
        this.dom.forEach(v => {
            Object.keys(obj).forEach(i => {
                v.style[i] = obj[i]
            })
        })
        return new this.constructor(this.dom)
    }
    // get or set attribute
    attr(key, val) {
        if(key && !val) {
            return this.dom[0].getAttribute(key)
        } else {
            this.dom.forEach(i => {
                i.setAttribute(key, val)
            })
            return new this.constructor(this.dom)
        }
    }
}

class tinyJquery {
    constructor(name) {
        if (typeof name == "string") {
            // 選擇器
            this.dom = document.querySelectorAll(name)
        } else if (name.constructor.name == "NodeList"){
            // 鏈?zhǔn)?            this.dom = name
        } else {
            // 原生DOM轉(zhuǎn)tinyJquery
            this.dom = [name]
        }
    }
    // get or set input value
    val(val) {
        if(val) {
            this.dom[0].value = val
            return new this.constructor(this.dom)
        } else {
            return this.dom[0].value
        }
    }
    // get or set dom innerHtml
    html(val) {
        if(val) {
            this.dom.forEach(i => {
                i.innerHTML = val
            })
            return new this.constructor(this.dom)
        } else {
            return this.dom[0].innerHTML
        }
    }
}

class tinyJquery {
    constructor(name) {
        if (typeof name == "string") {
            // 選擇器
            this.dom = document.querySelectorAll(name)
        } else if (name.constructor.name == "NodeList"){
            // 鏈?zhǔn)?            this.dom = name
        } else {
            // 原生DOM轉(zhuǎn)tinyJquery
            this.dom = [name]
        }
    }
    // get JSONData
    serializeObject() {
        let dom = this.dom[0], obj = {}
        dom.querySelectorAll("input, textarea").forEach(i => {
            obj[i.getAttribute("name")] = i.value
        })
        return obj
    }
    // get FormData
    serializeForm() {
        let dom = this.dom[0], form = new FormData()
        dom.querySelectorAll("input, textarea").forEach(i => {
            form.append(i.getAttribute("name"), i.value)
        })
        return form
    }
}