码迷,mamicode.com
首页 > Windows程序 > 详细

自制一个 简易jQuery 的 API

时间:2018-12-28 17:47:42      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:classlist   nod   let   charset   .text   def   jquer   ddc   console   

<!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

标签:classlist   nod   let   charset   .text   def   jquer   ddc   console   

原文地址:https://www.cnblogs.com/65Seeker/p/10191845.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!