阅读 228

js实现类jQuery的addClass和setText方法

如题:

window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
复制代码

实现方式:

首先要明白的一点是jQuery其实就是一个函数。
window.jQuery = function (nodeOrSelector) {
    let nodes = {}; //nodes是一个对象,里面会包含addClass方法还有setText方法,还有其他的
    //首先判断下传进来的node是一个Node还是string
    if (typeof(nodeOrSelector) === 'string') {
        //如果是一个字符串的话
        nodes = document.querySelectorAll(nodeOrSelector);
    } else if (nodeOrSelector instanceof Node) {
        //如果是Node节点
        nodes = {
            0: nodeOrSelector,
            length:1
        }
    }
    //在nodes对象上添加一下两个方法
    nodes.addClass = function (classes) {
        for (var i = 0; i < nodes.length; i ++) {
            nodes[i].classList.add(classes)
        }
    }
    nodes.setText = function (text) {
        for (var i = 0; i < nodes.length; i++) {
            nodes[i].textContent = text;
        }
    }
    return nodes;
}
window.$ = jQuery;
var $div = $('div');
$div.addClass('red');
$div.setText('hello world');
复制代码