0X1 摘要

Typescrip实现的一个简单CSS选择器

0X2 使用

入口是 _ 如 _("#id").html()

0X3 源

let formatElementArray = function (elementArray?: NodeListOf<Element>):
Array<Element> 
{
        let target: Array<Element> = [];
        if (typeof elementArray == 'undefined' || elementArray == null)
            return target;
        for (var i = 0; i < elementArray.length; i++)
            target.push(elementArray[i]);
        return target;
}
let formatElement = function (element: Element): Array<Element> 
{
    let target: Array<Element> = [];
    if (typeof element == 'undefined' || element == null)
        return target;
    target.push(element);
    return target;
}

let _ = function (select: any): _DOM
{
    let _type = typeof select;
    if (_type == 'string') {
        let res = document.querySelectorAll(select);
        return new _DOM(formatElementArray(res));
    }
    if (typeof select._type == 'string' && select._type == '_DOM')
        return select;
    if (typeof select.length == 'undefined')
        return new _DOM(formatElement(select));
    return new _DOM(select);
};

class _DOM {
    private m_array: Array<HTMLElement>;
    private m_length: number;
    public Body: any;
    public _type: string = "_DOM";
    constructor(array: Array<any>) {
        this.m_length = 0;
        if (array == undefined || array == null) return;
        this.m_array = array;
        this.m_length = array.length;
        this.Body = this.m_length == 1 ? array[0] : array;
    }
    public on(action: string, callback: any): void {
        if (this.m_length == 0) return;
        for (let i = 0; i < this.m_length; i++)
            this.m_array[i].addEventListener(action, callback, false);
    }
    public html(html?: string): any {
        if (this.m_length == 0) return null;
        if (html != null)
            for (let i = 0; i < this.m_length; i++)
                this.m_array[i].innerHTML = html;
        else
            return this.m_array[0].innerHTML;
    }
    public css(name: string, target?: string): any {
        if (this.m_length == 0) return null;
        if (target != null)
            for (let i = 0; i < this.m_length; i++)
                this.m_array[i].style.setProperty(name, target);
        else
            return this.m_array[0].style.getPropertyValue(name);
    }
    public attr(name: string, target?: string): any {
        if (this.m_length == 0) return null;
        if (target != null)
            for (let i = 0; i < this.m_length; i++)
                this.m_array[i].setAttribute(name, target);
        else
            return this.m_array[0].getAttribute(name);
    }
    public removeAttr(name: string): void {
        if (this.m_length == 0) return null;
        for (let i = 0; i < this.m_length; i++)
            this.m_array[i].removeAttribute(name);
    }
    public removeCSS(name: string): void {
        if (this.m_length == 0) return null;
        for (let i = 0; i < this.m_length; i++)
            this.m_array[i].style.removeProperty(name);
    }
    public val(target?: string): any {
        if (this.m_length == 0) return null;
        if (target != null) {
            for (let i = 0; i < this.m_length; i++) {
                let inp = this.m_array[i] as any;
                if (!inp.value) continue;
                inp.value = target;
                return;
            }
        }
        else {
            let inp = this.m_array[0] as any;
            if (inp.value) return inp.value;
        }
        return undefined;
    }
    public find(target: string): _DOM {
        if (this.m_length == 0) return null;
        let res = this.m_array[0].querySelectorAll(target);
        return new _DOM(formatElementArray(res));
    }
}