实现一个jQuery API

先上代码

HTML代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  
    <style>
        .red {
            color: red;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <script src="./demo.js"></script>

</body>

</html>

JS代码如下

#传入参数，如果参数是string类型，则调用DOM的querySelectorAll方法，将获取到的元素用伪数组返回；如果参数是Node，则返回nodes伪数组
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,
            lenght: 1
        }
    }
#遍历nodes，给每一个元素添加上classes类
    nodes.addClass = function (classes) {
        for (let i = 0; i < nodes.length; i++) {
            nodes[i].classList.add(classes)
        }
    }
#遍历nodes，将每一个元素的文本设置成参数的内容
    nodes.setText = function (text) {
        for (let i = 0; i < nodes.length; i++) {
            nodes[i].textContent = text
        }
    }
    return nodes;
}


window.$ = jQuery
var $div = $('div') //获取div元素
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('Rony') // 可将所有 div 的 textContent 变为 Rony

终上，通过对DOM方法的封装。实现了一个简单的jQuery功能，可以通过选择器，选到元素。再通过添加的API，对元素进行操作。

优化Text函数

nodes.Text = function (text) {
        if (text === undefined) {
            var texts = []
            for (let i = 0; i < nodes.length; i++) {
                texts.push(nodes[i].textContent)
            }
            console.log(texts)
            return texts
        }
        else {
            for (let i = 0; i < nodes.length; i++) {
                nodes[i].textContent = text
            }
        }
    }

该函数，带参数情况下实现setText()的功能；不带参数的情况下，实现getText()的功能；

如果不带参数，即text === undefined，则声明一个texts数组，将获取到的元素的文本放入texts数组中

如果带有参数，则将每一个获取到的元素的文本修改为参数的内容

猜你喜欢