摘要：但它操作的便利性無出其右。我用寫了一個基于簡化版的，僅做個學習記錄。包含基礎操作，支持鏈式操作，僅供日常使用。功能基于基本選擇器構造，包括基于原生構造，將原生對象轉化為對象。為支持批量操作，構造器應包含復數的。

原文地址：Bougie的博客

jQuery作為曾經Web前端的必備利器，隨著MVVM框架的興起，如今已稍顯沒落。但它操作DOM的便利性無出其右。我用ES6寫了一個基于class簡化版的jQuery，僅做個ES6學習記錄。包含基礎DOM操作，支持鏈式操作，僅供日常使用。當然，它不支持IE。

構造一個tinyJquery對象。功能：基于基本選擇器構造，包括id、class、tagName；基于原生DOM構造，將原生DOM對象轉化為tinyJquery對象。為支持批量操作，tinyJquery構造器應包含復數的DOM。

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

使用$函數構建tinyJquery對象

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"){
            // 鏈式
            this.dom = name
        } else {
            // 原生DOM轉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"){
            // 鏈式
            this.dom = name
        } else {
            // 原生DOM轉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"){
            // 鏈式
            this.dom = name
        } else {
            // 原生DOM轉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"){
            // 鏈式
            this.dom = name
        } else {
            // 原生DOM轉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"){
            // 鏈式
            this.dom = name
        } else {
            // 原生DOM轉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
    }
}