欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js实现类jQuery的addClass和setText方法

程序员文章站 2024-03-24 11:12:40
...

如题:

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');
复制代码