实现一个小小的 jQuery API

159 阅读1分钟

代码如下:

<div id=x>aaa</div>
<div id=x>bbb</div>
<div id=x>ccc</div>
<div id=x>ddd</div>

<style>
    .red {color: red;}
</style>


<script>
        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 (classes) {
                for (let i = 0; i < nodes.length; i++) {
                    nodes[i].classList.add(classes)
                }
            }
            nodes.setText = function (text) {
                for (let i = 0; i < nodes.length; i++) {
                    nodes[i].textContent = text
                }
            }
            return nodes
        }


        window.$ = jQuery   //这句可不加,不加下面三行不用$
        var $div = $('div')
        $div.addClass('red')  // 可将所有 div 的 class 添加一个 red
        $div.setText('hi')    // 可将所有 div 的 textContent 变为 hi
    </script>

做一个简单的jQuery(做的时候一点都不简单o(╥﹏╥)o)。
当jQuery拿到一个字符串时,会先分析这个是字符串,或是节点。
如果这是一个字符串的话,新建一个temp来获取这个字符串对应的选择器。
然后遍历这些得到的选择器。
如果拿到的不是字符串而是节点,那么就把这个节点放入伪数组里。
给节点添加class,每当addClass()时,就会遍历这些节点,逐个将class放入这些nodes伪数组的每个元素里。
更改设置元素内的文字,先遍历对应的所有元素,修改元素内文本。