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

实现一个 jQuery 的 API

作者: 梅林1993 | 来源:发表于2017-12-18 23:44 被阅读0次

    jQuery 实质上是一个构造函数,接受一个参数(这个参数可能是节点)并返回一个方法去操作这个节点。

    window.jQuery = function(nodeOrSelector){   //获取节点或者字符串
        let node = { }//将字符串或者节点放入数组中
        if(typeof nodeOrSelector ==='string'){//获取内容为字符串,将其放入伪数组中
            let temp  = document.querySelectorAll(nodeOrSelector)
            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 = function(classes){//获取参数后,通过遍历操作相关节点
        classes.forEach((value) =>{
            for(let i = 0; i< nodes.length;i++){
                node[i].classList.add(value)
            }
        }  )
    }
    nodes.text = function(text){
        if(text ===undefined){  //如果文本为空,则添加文本
            var 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
            }
        }
    }
    
    window.$ = jQuery
    
    var $div = $('div')
    $div.addClass('red') // 可将所有 div 的 class 添加一个 red
    $div.setText('hi') // 可将所有 div 的 textContent 变为 hi
    

    相关文章

      网友评论

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

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