jQuery初体验

学习了DOM api 之后,做些简单的小练习

在HTML写5个无序列表

<ul>
    <li id="item1">选项1</li>
    <li id="item2">选项2</li>
    <li id="item3">选项3</li>
    <li id="item4">选项4</li>
    <li id="item5">选项5</li>
</ul>

获取item3的所以的兄弟节点如何做呢?

DOM 提供了nextSbiling`previousSbiling,有人说用parentNode.children获取,但是这样做item3`也在里面了,所以就自己做一个API,
我把这个名字叫做getSiblings

//node 是参数,传递item3进来,传出item3的所有兄弟节点。
function getSiblings(node){
    var allChildren = node.parentNode.children    //先获取item3所有兄弟节点,保存在allChildren中,是一个伪数组
    
    //剔除item3节点
    var array = {length:0};    //创建一个伪数组,存储item3节点的所有兄弟节点,因为是伪数组,所以给它添加length:0
    for(var i=0; i<allChildren.length; i++){     //用for循环遍历allChildren数组
       if(allChildren[i] !== node){    //用if循环判断如果有allChildren[i]是item3剔除出去
           array[array.length] = allChildren[i];    //因为array是伪数组,没有push,所以用array[array.length]添加进去
           array.length++;    //伪数组,length不会自动加1
        }
    }   
    return array;    //返回出去
}

getSiblings(item3);

如果要给item3添加或删除class,用自带的API 只能一个个添加,看下面

item3.classList.add('a')
item3.classList.add('b')
item3.classList.add('c')
item3.classList.remove('b')

如果自己做一个API,是不是可以实现批量添加呢

//node classes 是参数,要添加或删除class的节点,这里传递的classes是伪数组
 function addOrRemoveClass(node,classes){
    for(var aaa in classes){   //用for循环遍历classes的key
        var a = classes[aaa];    //用一个变量来存储classes的value
        if(a){    //用if循环判断classes的value是true还是false
            node.classList.add(aaa);   //如果是true,则添加key
        }else {
            node.classList.remove(aaa);//否则移除
        }
    }
}
addOrRemoveClass(item3,{'a':true,'b':false,'c':true});

上面代码if...else...中有重复代码,可优化成下面这样。

优化代码的原则就是提出重复的代码。

var methondName = a?'add':'remove';    //add、remove要用字符串
node.classList[methondName](aaa)

下面先看添加class怎么实现。
foreach接受一个函数参数,函数参数是数组的valuekey,可以看之前总结的Array基本概念

//node classes 是参数,要添加或删除class的节点,这里classes是数组
function addClass(node,classes){
    classes.forEach(value => node.classList.add(value))  //把数组的`value`添加到class中
}
addClass(item3,[a,b,c])

用这样的方法创建好用的API,但有个不足的地方,这些都是全局变量,如果在大项目中,很容易覆盖别人的变量。

所以把自己写的API 添加到Node的原型上

Node.prototype.getSiblings = function(){
    var allChildren = this.parentNode.children;    //this指代调用时前面的那个
    var array = {length:0};
    for(var i=0; i<allChildren.length;i++){
        if(allChildren[i] !== this){    //this指代调用时前面的那个
            array[array.length] = allChildren[i];
            array.length++;
        }
    }
    return array
}

Node.prototype.addClass = function(classes){
    classes.forEach(value => this.classList.add(value))
}

item3.getSibllings.call(item3)    //用call的话,直接指定this,不用call的话,是隐示指向`.`前面那个
item3.addClass.call(item3,['a','b','c'])

不理解this的可以看函数小知识点

在原型上面添加方法也和上面一样有弊端,第一项目一大,所有人都在原型上面添加,就会造成原型里面很混乱;第二你也不知道别人有没写和你一样的方法,这又会造成覆盖的问题。
因为这是在Node上直接写的,那我能不能自己写一个Node这样就不会和人家重名了,就算遇到,改一个名字呗。

新的Node叫它Node2,它返回一个对象,对象里面有两个函数,也就是getSiblingsaddClass,并用node2初始化。

//Node2相当于原来的Node
window.Node2 = funcuntion(){    
    return{        //返回2个方法
        getSiblings:function(){},
        addClass:function(){}
    }
}

var node2 = Node2(''item3)    //初始化
node2.getSiblings.call()    //正常调用
node2.addClass.call()

getSiblingsaddClass方法还是和前面一样,之前我们用this来指代node,但是这里用this的话会指向node2,而我们要操作的是node,所以要把this变成node才行。

window.Node2 = function(node){    //参数是要操作的节点
    return{
        getSiblings:function(){
            var allChildren = node.parentNode.children;     //这里不能用this 了,因为用this会变成前面的.node2,而这里我们要操作的是node
            var array = {length:0};
            for(var i = 0; i < allChildren.length;i++){
                if(allChildren[i] !== node){
                    array[array.length] = allChildren[i];
                    array.length++;
                }
            }
            return array;
        },
        
        addClass:function(classes){
            classes.forEach(value => node.classList.add(value))
        }
    }
}

var node2 = Node2(item3);
node2.getSiblings();    //这里为什么不需要传入节点,因为在初始化的时候,已经把节点传进去了
node2.addClass(['a','b','c']);

如果把Node2改成jQuery其他都不变,是不是也可以,看下面,getSiblingsaddClass里面的方法就不写了。

window.jQuery = funcuntion(){    
    return{
        getSiblings:function(){},
        addClass:function(){}
    }
}

var node2 = jQuery(item3)    
node2.getSiblings.call()
node2.addClass.call()

jQuery就是一个升级的DOM,它接受一个参数,然后返回一个新的对象,这个新对象有新的API,就是这边的getSiblingsaddClass,它们的内部是怎么实现的呢,还是去调用浏览器提供的API,区别是你就写下面调用的API,一句话就可以了,而jQuery是在里面调用老的API,进行复杂的转换。

简单的说jQuery就是接收一个参数,返回给你一个新对象,你调用它提供的API 就可以了。

当然了这只是jQuery的基本原理,实际远比它复杂。

再来看下面的例子,如果我传递的是选择器怎么操作呢?

window.jQuery = function(nodeOrSelector){
    var node;    //存储if判断后的参数
    if(typeof nodeOrSelector === 'string'){  //因为选择器是以字符串的形式传递进来的,所以先要用if进行判断,typeof用来判断类型的
        node = document.querySelector(nodeOrSelector);   //如果是字符串,就是选择器,根据选择器找到对应的节点,并保存在声明的变量中
    }else{
        node = nodeOrSelector;  //如果不是,直接保存在变量中
    }
    
    return{
        getSiblings:function(){
            var allChildren = node.parentNode.children;
            var array={length:0};
            for(var i = 0 ;i < allChildren.length;i++){
                if(allChildren[i] !== node){
                    array[array.length] = allChildren[i];
                    array.length++;
                }
            }
            return array;
        },
        
        addClass:function(classes){
            classes.forEach(value => node.classList.add(value))
        }
    }
    
}

var node2 = jQuery('#item3');    //传递选择器,使用字符串的形式表示
node2.getSiblings();
node2.addClass(['red']);

初始化的时候传递了一个选择器,jQuery 内部先进行判断,传进来的是不是字符串,如果是,我就找到对应的节点;后面的操作和之前讲的一样。

我们再来升级下jQuery,如果我想同时操作5个节点呢?看下面:

window.jQuery = function(nodeOrSelector){
    var nodes = {}; //querySelectorAll输出的是伪数组,所以用来存储的变量也要初始化成伪数组
    if(typeof nodeOrSelector === 'string'){     //用typeof判断传进来的类型
        var temp = document.querySelectorAll(nodeOrSelector);//如果传进来的是选择器,就获取对应所有的节点,querySelectorAll输出的是伪数组
        //因为获取到的不是纯净的伪数组(原型不是直接指向Object),先用临时变量存储,再用for循环遍历一遍就可以了
        for(var i = 0; i < temp.length; i++){
            nodes[i] = temp[i]
        }
        nodes.length = temp.length;     //把临时变量的length长度赋值给nodes,下面遍历时需要用到
    }else if(nodeOrSelector instanceof node){   //instanceof用来判断传进来的是不是节点,因为节点只能传进来一个
        nodes = {   //因为上面用的是伪数组,所以这边也要一致,虽然节点是一个,但也要做成伪数组的形式
            0:nodeOrSelector,
            length:1
        };
    }
    
    //这时伪数组内部是{0,1,2,3,4}的属性,没有addclass的方法,所以这边可以直接往里面添加方法
    nodes.addClass = function(classes){ 
        for(var i = 0; i < nodes.length; i++){
            classes.forEach(value => nodes[i].classList.add(value));    //nodes不是元素,这边操作是在元素身上,所以要for循环遍历,动态添加
        }
    }
    
    nodes.text = function(text){    
        if(text === undefined){     //这里默认没传参数就是获取节点文本
            var texts = [];     //文本最终是数组的形式
            for(var i = 0; i < nodes.length; i++){  //遍历nodes,就可以获取到了
                texts.push(nodes[i].textContent);
        }
        return texts;
        }else{      //有参数就是设置文本
            for(var i = 0; i < nodes.length; i++){
                nodes[i].textContent = text;
            }
        }
    }
    
    return nodes;   //因为整个jQuery内部是一个伪数组,所以这边返回出去了肯定也是一个伪数组了
}

var node2 = jQuery('ul > li');
node2.addClass(['red']);
console.log(node2.text());
node2.text('hi');

最后简化一下jQuery ,初始化时的变量名最好带上$,后面好辨认。

window.$ = jQuery;
var $node2 = $('item3');
    原文作者:UCCs
    原文地址: https://segmentfault.com/a/1190000014931579
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞