随便写了个 js 的类

class Elem {

    /**
        可以通过  #id | .class | <tag>| name  四种形式来查找元素
    **/
    constructor(selecter) {

        this.selecter = selecter;
        this.elements = [];
        selecter = this.selecter.replace(/#(.+)/, '$1');
        if (this.selecter != selecter){
              this.element = this.elements[0] = document.getElementById(selecter);
        }else{
            selecter = this.selecter.replace(/<(.+)>/, '$1');
            if (this.selecter != selecter) {
                this.elements = document.getElementsByTagName(selecter);

            }else{
                selecter = this.selecter.replace(/\.(.+)/, '$1');
                if (this.selecter != selecter){
                     this.elements = document.getElementsByClassName(selecter);
                }else {
                    document.getElementsByName(this.selecter);
                }
            }
        }
    }

    static one(selecter){
        this.element = this.elements = document.querySelector(selecter);
        return this;
    }

    static all(selecter) {
        this.elements = document.querySelectorAll(selecter);
        return this;
    }

    static save(name, value){
        sessionStorage.setItem(name,  value);
        return this;
    }

    static take(name){
        return  sessionStorage.getItem(name);
    }

    item(index=0){
        this.element = this.elements[index];
        return this;
    }

    get(index = 0) {
        return this.elements[index];
    }

    attr(name = 'value', value = undefined){
        return (value != undefined)? this.element.setAttribute(name, value) : this.element.getAttribute(name);
    }

    get attrs() {
        return this.element.attributes;
    }

    parent(){
        return this.element.parentNode;
    }

    childNode(index){
        return this.element.childNodes.item(index);
    }

    rmChild(index){
        this.element.removeChild(this.element.childNodes[index]);
        return this;
    }

    listen(event, func){
        this.element.addEventListener(event, func);
        return this;
    }
    

}
    
new Elem('#abc').listen('click',  ()=>{  alert('clicked me!');  })

Elem.save('name', "张三").take('name')

 

上一篇:Setting up jQuery Unobtrusive Validation


下一篇:Netty源码解析 -- 对象池Recycler实现原理