自制一个 简易jQuery 的 API

Posted 65Seeker

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自制一个 简易jQuery 的 API相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>简易jQuery</title>
    <style>
        .blue {
            color: blue;
        }

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

<body>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
</body>
<script>
    window.jQuery = function (divs) {
        let div = {}
        if (typeof divs === ‘string‘) {
            let temp = document.querySelectorAll(divs)
            console.log(temp)
            for (let i = 0; i < temp.length; i++) {
                div[i] = temp[i];
            }
            div.length = temp.length
        } else if (divs instanceof Node) {
            div = {
                0: divs,
                length: 1
            }
        }
        div.addClass = function (classes) {
            classes.forEach((value) => {
                for (let i = 0; i < div.length; i++) {
                    div[i].classList.add(value)
                }
            })
        }
        div.text = function (text) {
            if (text === undefined) {
                var texts = []
                for (let i = 0; i < div.length; i++) {
                    texts.push(div[i].textContent)
                }
                return texts
            } else {
                for (let i = 0; i < div.length; i++) {
                    div[i].textContent = text;

                }
            }
        }
        return div
    }

    var $div = jQuery("div")
    $div.addClass([‘red‘])
    $div.text(‘hi‘)


</script>
</html>

 

以上是关于自制一个 简易jQuery 的 API的主要内容，如果未能解决你的问题，请参考以下文章

java自制简易函数式编程库初出炉

Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE

每个人都能制作的简易版QQ音乐（HTML+CSS+JQuery）

用java自制简易线程池(不依赖concurrent包)

React-Redux自制简易贪吃蛇小游戏

React-Redux自制简易贪吃蛇小游戏