对jQuery的初步认知2018-11-01

jQuery可以看作为多个函数的集合,是一个构造函数,它接受一个参数,这个参数可能是node,然后返回一个方法对象去操作这个node。
下面用addClass来举例说吧。

<div>dota21</div>
<div>dota22</div>
<div>dota23</div>

我需要为每个div增加一个名称为red的class,使之文字颜色变为红色

 let div=document.querySelectorAll('div')
        for(let i=0;i<div.length;i++){
            div[i].classList.add('red')}

这是我一般的写法
把函数封装下

 function addClass(node,classes){
            let div=document.querySelectorAll(node)
            for(let i=0;i<div.length;i++){
                div[i].classList.add(classes)
            }
        }
  addClass('div','red')

这一个函数就好比一个罐子,为了方便搬运,需要放到一个箱子里面去,我们给箱子命名为box,并作为全局变量

window.box=function(node){
            return{
                addClass: function(classes){
                let div=document.querySelectorAll(node)
                for(let i=0;i<div.length;i++){
                    div[i].classList.add(classes)
                }
            }
            }
            
        }
box('div').addClass('red')

jQuery是可以同时传入node和选择器的

window.box=function(nodeOrSelector){
        let nodes={}
        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;
            }
       //如果是选择器,那么取到的对象是大于1的,是个伪数组
        }else if(nodeOrSelector instanceof Node){
            nodes={
                0:nodeOrSelector,
                length:1
            }//为和上面一致,也用数组表示
        }
       //上面代码就是对传参进行处理
        nodes.addClass=function(classes){
            classes.forEach(function(value){
                for(let i=0;i<nodes.length;i++){
                    nodes[i].classList.add(value)
                }//闭包:当一个函数使用了函数外面声明的变量时,我们把这个函数和变量称为闭包。
            })
        }
     
        return nodes;
    }
      box('div').addClass('red')

这个box其实就可以命名为jQuery,下面为完整代码

window.jQuery=function(nodeOrSelector){
        let nodes={}
        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;
            }
            console.log(nodes)
        }else if(nodeOrSelector instanceof Node){
            nodes={
                0:nodeOrSelector,
                length:1
            }
        }
       
        nodes.addClass=function(classes){
            classes.forEach(function(value){
                for(let i=0;i<nodes.length;i++){
                    nodes[i].classList.add(value)
                }
            })
        }
        nodes.setText=function(text){
            for(let i=0;i<nodes.length;i++){
                nodes[i].textContent=text;
            }
        }
        return nodes;
    }
    window.$=jQuery
    var $div=$('div')
    $div.addClass(['red'])
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容