美文网首页
任务二十九 实现一个 jQuery 的 API

任务二十九 实现一个 jQuery 的 API

作者: 23f43267337f | 来源:发表于2019-02-13 16:06 被阅读0次

在我看来,DOM的一些方法过于反直觉了,jQuery就是使用DOM的API包装成更好用的方法。
下面是学习jQuery举的一个例子

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

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

填写???,能够使用addClasssetText方法。

function (x){
    let nodes = {}
    if(typeof x === 'string'){
        let temp = document.querySelectorAll(x)
        for( let i=0; i <temp.length;i++){
            nodes[i]=temp[i]
        }
        nodes.length=temp.length
    }else if(x instanceof node){
        nodes = {
            0:x,
            length:1
        }
    }

首先,检查传入的参数的类型,是字符串则调用document.querySelectorAll传入临时变量,传入临时变量的目的是把用document.querySelectorAll选出来的对象的原型从Nodelist转换为Object,于是就有下面遍历的步骤。

    nodes.addClass =function (classes){
                for(let i=0;i<nodes.length;i++){
                    nodes[i].classList.add(value)
            }
        }
    nodes.setText = function(someText){
            for(var i=0; i<nodes.length; i++){
                nodes[i].textContent = someText
        }
    }
return nodes
}

添加addClass方法:
读取传入的参数,使用for循环遍历,用DOM的classList.add方法添加class
添加setText方法:
读取传入的参数,使用for循环遍历,用DOM的textContent方法添加class

相关文章

网友评论

      本文标题:任务二十九 实现一个 jQuery 的 API

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