美文网首页
实现一个 类似jQuery 的 API

实现一个 类似jQuery 的 API

作者: LikySis | 来源:发表于2018-11-08 01:28 被阅读18次

补全下面的代码:

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>

相关文章

网友评论

      本文标题:实现一个 类似jQuery 的 API

      本文链接:https://www.haomeiwen.com/subject/adhixqtx.html