自制一个简易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>
posted on 2018-12-28 17:29 65Seeker 阅读(144) 评论(0) 收藏举报
自制一个 简易jQuery 的 API

自制一个简易jQuery 的 API
