SOURCE

console 命令行工具 X clear

                    
>
console
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)
            })
        }
    }

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

    // 复写(造轮子)
    class myJQuery extends jQuery {
        constructor(selector) {
            super(selector)
        }
        // 扩展自己封装的方法
        sayHi(elem) {
            console.log(elem);
        }
    }

    const $p = new myJQuery('p');
    console.log($p);
    console.log($p.get(1));
    $p.each((elem) => console.log(elem.nodeName));
    $p.on('click', () => alert('clicked'));
    $p.dialog('HelloWorld');
    $p.sayHi('this is myJQuery');
    <p>一段文字1</p>
    <p>一段文字2</p>
    <p>一段文字3</p>