模仿jQuery实现addClass()和text()

今天我们模仿jQuery库实现addClass()方法添加类和text()方法读取或设置文本，要求单个或多个node均可使用：
首先，声明一个全局函数jQuery

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

            nodes.addClass = function (className) {
                for (let i = 0; i < nodes.length; i++) {
                    nodes[i].classList.add(className)
                }
            }
            nodes.setText = function (text) {
                if (text === undefined) {
                    let arr = []
                    for (let i = 0; i < nodes.length; i++) {
                        arr.push(nodes[i].textContent)
                    }
                    return arr
                } else {
                    for (let i = 0; i < nodes.length; i++) {
                        nodes[i].textContent = text
                    }
                }
            }

            return nodes
        }

HTML

    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>

CSS

    .red {
         color: red;
     }

如果我们想通过 $ 符号获取页面元素，可以这样写：

window.$ = jQuery
let $div = $('div')

这样就获取了页面中所有标签为div的元素了，再为它们添加样式：

$div.addClass('red')

image.png

再修改它们的文本内容

$div.setText('hi')

image.png

这只是模仿jQuery实现了几个小功能，真正的jQuery是很强大的，而且方法是要放在原型中的~