美文网首页
实现一个 类似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