实现一个简单的 jQuery 的 API

问题如下

window.jQuery = ???

window.$ = jQuery

var $div = $('div')

$div.addClass('red') // 可将所有 div 的 class 添加一个 red

$div.setText('hi') // 可将所有 div 的 textContent 变为 hi


整体思路如下

我们考虑构造出一个新的函数,返回一个新的对象,该对象包含addClass和setText两个属性,之后便可以使用jQuery构造一个新的node(即$div)。在此之上,便可以使用$div调用addClass和setText两个属性。


addClass() 实现思路
  • 使用document.querySelectorAll这个API获取当前所有div标签,返回一个nodeList
  • 遍历nodeList中的所有div,给每个div加上相应的class

setText() 实现思路
  • 使用document.querySelectorAll这个API获取当前所有div标签,返回一个nodeList
  • 遍历nodeList中的所有div,将每个div的内容通过textContent方法设置为hi

其中,???部分具体实现如下

    function(node) {
        return {

            addClass: function (ccc) {
                var x = document.querySelectorAll(node)
                for (let i = 0; i < x.length; i++) {
                    x[i].classList.add(ccc)
                }
            },
            setText: function (text) {
                var x = document.querySelectorAll(node)
                for (let i = 0; i < x.length; i++) {
                    x[i].textContent = text
                }
            }
        }
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,914评论 0 1
  • 实际前端开发工作中,我们经常会遇到要获取某些元素,以达到更新该元素的样式、内容等目的。而文档对象模型 (DOM) ...
    _Dot912阅读 6,081评论 0 8
  • 用一辈子时间,野成一株草 在漫长的煎熬后,肆意扑腾在风中 我不想挪动一下脚步 只搬运太阳,这温暖的坐标 从匆忙人世...
    晚树阅读 3,576评论 24 28
  • 【今日话题】读了下面这篇文章,你有什么感想? 什么都不信,可能是见识太少 选择信与不信,决定你行动的方向和执行力。...
    小秦哥哥阅读 1,118评论 2 0
  • 过度的怀旧是一种不健康的心态 聪明的女人,不会相信时间之于男人 无意倾诉无意交流,是容易上瘾的习惯 随心随意随性随...
    24e2f6668318阅读 1,254评论 0 0