实现一个 类似jQuery 的 API

补全下面的代码:

window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
  • 可以看出我们要实现一个函数,调用这个函数传入标签名字的字符串,就能返回一个实例对象;
  • 这个实例对象中有两个方法,增加对应标签的class类名,设置对应标签的文本内容;
  • 我们在所需函数里用原生js和dom操作,即可。
  • 注意:document.getElementsByTagName(element); 返回的是伪数组,遍历操作就能改变对应的样式。

    window.jQuery = function (element) {
        var tags = document.getElementsByTagName(element);
        var obj = {
            addClass: function (color) {
                for (var i = 0; i < tags.length; i++) {
                    tags[i].classList.add(color);
                }
            },
            setText: function (text) {
                for (var i = 0; i < tags.length; i++) {
                    tags[i].innerHTML = text;
                }
            }
        };
        return obj;
    };


    window.$ = jQuery;

    var $div = $('div')
    $div.addClass('red') // 可将所有 div 的 class 添加一个 red
    $div.setText('hi') // 可将所有 div 的 textContent 变为 hi
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,149评论 0 21
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,588评论 1 45
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,682评论 0 7
  • API集锦,需要用时查阅用。 一、节点1.1 节点属性 Node.nodeName //返回节点名称,只读Node...
    littleyu阅读 2,692评论 0 8
  • 在这个春回大地,万物复苏的早晨,我们全家去桑洲看油菜花。 一进入景区,里面只有三尺高般的瀑布和周围的绿...
    youngerWang阅读 223评论 0 2