自己实现一个JQuery

通过添加如下代码中的???部分模拟一个JQuery构造函数

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

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

???部分如下

function(nodeOrSelector){
    let nodes = {}
    //判断参数nodeOrSelector是节点还是一个字符串
    if(typeof nodeOrSelector === 'string'){
        let temp = document.querySelectorAll(nodeOrSelector)  //temp是一个伪数组
        for(let i = 0;i < temp.length;i++){
            nodes[i] = temp[i]
        }
        nodes.length = temp.length
    }else if(nodeOrSelector instanceof Node){
        nodes = {
            0:nodeOrSelector,
            length:1
        }
    }
    //在nodes中添加addClass方法,用于给传进来的elements添加class
    nodes.addClass = function(classes){
        for(let i =0;i < nodes.length;i++){
            nodes[i].classList.add(classes)
        }
    }
    //setText()方法用于更改传进来的elements的文本内容,如果参数为空,则获取原本的elements的内容并返回一个数组
    nodes.setText = function(text){
        if(text === undefined){
            let texts = []
            for(let i = 0;i < nodes.length;i++){
                texts.push(nodes[i].textContent)
            }
            return texts
        }else{
             for(let i = 0;i < nodes.length;i++){
               nodes[i].textContent = text
            }
        }
    }
    return nodes
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容