This is a jQuery-lite implementation using generator methods for iterability

JQ class using generator method.js

class JQ {
    constructor(list) {
        let i = 0;
        while (list[i] !== undefined) {
            this[i] = list[i];
            i++;
        }
      
        this.length = i;
    }
    
    *generator() {
        for (let i = 0; i < this.length; i++) {
            yield this[i];
        }
    }
  
    splice(...args) {
        return [ ...this ].splice(...args);
    }
  
    addClass(className) {
        const iterable = this.generator();
        
        for (const elem of iterable) {
            elem.classList.add(className);
        }
      
        return $$([ ...this.generator() ]);
    }
  
    append(content) {
        const iterable = this.generator();
      
        for (const elem of iterable) {
            elem.append(content.cloneNode());
        }

        return $$([ ...this.generator() ]);
    }

    attr(name, val) {
        const iterable = this.generator();
      
        for (const elem of iterable) {
            elem.setAttribute(name, val);
        }

        return $$([ ...this.generator() ]);
    }

    on(event, handler) {
        const iterable = this.generator();
        
        for (const elem of iterable) {
            elem.addEventListener(event, handler);
        }

        return $$([ ...this.generator() ]);
    }
}

const $$ = input => {
    if (typeof input === "string") {
        const nodes = document.querySelectorAll(input);
        return new JQ(nodes);
    }

    return new JQ(input);
}