jQuery入门

首先直接完成api 用参数传入调用对象

let item3 = document.getElementById('item3');
function getSiblings(node) {
    let allChildren = node.parentNode.children;
    let array = { length: 0 }
    for (let i = 0; i < allChildren.length; i++) {
        if (allChildren[i] !== node) {
            array[array.length] = allChildren[i];
            array.length += 1;
        }
    }
    return array;
}

console.log(getSiblings(item3));

function addClasses(node,classes){
    for(let key in classes){
        let value = classes[key];
        if(value){
            node.classList.add(key);
        }else{
            node.classList.remove(key);
        }
    }
}

addClasses(item3,{'a':true,'b':false,'c':true});

优化函数逻辑

function addClasses(node, classes) {
    for (let key in classes) {
        let value = classes[key];
        let methodName = value ? 'add' : 'remove';
        node.classList[methodName](key);
    }
}

addClasses(item3, { 'a': true, 'b': false, 'c': true });

使用命名空间，减少全局对象数量

window.xxdom = {};
xxdom.getSiblings = function (node) {
    let allChildren = node.parentNode.children;
    let array = { length: 0 }
    for (let i = 0; i < allChildren.length; i++) {
        if (allChildren[i] !== node) {
            array[array.length] = allChildren[i];
            array.length += 1;
        }
    }
    return array;
}

xxdom.addClasses = function addClasses(node, classes) {
    classes.forEach((value) => item3.classList.add(value));
}

直接改写prototype对象，方便使用时调用

Node.prototype.getSiblings = function () {
    let allChildren = this.parentNode.children;
    let array = { length: 0 }
    for (let i = 0; i < allChildren.length; i++) {
        if (allChildren[i] !== this ){
            array[array.length] = allChildren[i];
            array.length += 1;
        }
    }
    return array;
}

Node.prototype.addClasses = function addClasses(classes) {
    classes.forEach((value) => this.classList.add(value));
}

console.log(item3.getSiblings());
item3.addClasses(['a','d'])

使用包装对象，减少冲突

window.jQuery = function (nodeOrSelector) {
    let nodes = {};
    if (typeof nodeOrSelector === 'string') {
        let tmp = document.querySelectorAll(nodeOrSelector);
        for (let i = 0; i < tmp.length; i++) {
            nodes[i] = tmp[i];
            nodes.length = tmp.length;
        }
    } else if (nodeOrSelector instanceof Node) {
        nodes = {
            0: querySelectorAll,
            length: 1
        };
    }


    nodes.addClass = function (classes) {
        classes.forEach((value) => {
            for (let i = 0; i < nodes.length; i++) {
                nodes[i].classList.add(value);
            }

        });
    }

    nodes.setText = function(text){
        for (let i = 0; i < nodes.length; i++) {
            nodes[i].textContent = text;
        }
    }
    return nodes;

}

let node2 = jQuery('ul > li');
node2.addClass(['a', 'e'])