美文网首页
实现一个简单的 jQuery 的 API

实现一个简单的 jQuery 的 API

作者: ttcs1991 | 来源:发表于2017-12-25 20:58 被阅读0次

    问题如下

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

    相关文章

      网友评论

          本文标题:实现一个简单的 jQuery 的 API

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