自己实现简易jquery的2个功能-CSDN博客

封装2个函数：

1.实现获取所有除了自己的所有兄弟节点
2.添加多个class(classlist已经可以添加多个class)

首先来一个html结构

<body>
    <ul>
        <li id='a1'>选项1</li>
        <li id='a2'>选项2</li>
        <li id='a3'>选项3</li>
        <li id='a4'>选项4</li>
        <li id='a5'>选项5</li>
    </ul>
</body>
复制代码

getchildren

function getchildren (node){
    var allechildren=node.parentNode.children
    var array={length:0}
    for(let i=0;i<allchildren.length;i++){
        if(allchildren[i]!==node){
            array[array.length]=allchildren[i]
            array.length+=1
        }
    }
    return array
}
getchildren (a1)
复制代码

addclass

1.0

function addclass (classes){
    classes.forEach((value)=>a1.classList.add(value)
}
addclass([active,push,choise])
复制代码

2.0

function (node,classes){
    for(var key in classes){
        var value=classes[key]
       value?node.classList.add(key):node.classList.remove(key)
       }
    }
复制代码

改进这两个函数

设置一个命名空间

window.bibiDom={}
bibiDom.getchildren=getchildren
bibiDom.addclass= function (node,classes){
    for(var key in classes){
        var value=classes[key]
       value?node.classList.add(key):node.classList.remove(key)
       }
    }
bibiDom.addclass(a1,{active:ture,push:false,choise:true})
复制代码

添加到node.原型中

调用太麻烦，前面太长，改进一下，我们改node.prototype,注意this

Node.prototype.gechildre= function getchildren (this){
    var allechildren=this.parentNode.children
    var array={length:0}
    for(let i=0;i<allchildren.length;i++){
        if(allchildren[i]!==this){
            array[array.length]=allchildren[i]
            array.length+=1
        }
    }
    return array
}
复制代码

写一个构造函数，返回对象，对象的属性是我们的函数

更改node的原型太不厚道，我们换种方法,我们要操作的是node，不是node2，this是指的node2，所以把不用this了

window.jQuery = function(node){
    return{
    getchildren:function(node){
    var allechildren = node.parentNode.children
    var array = {length:0}
    for(let i = 0;i<allchildren.length;i++){
        if(allchildren[i]!==node){
            array[array.length] = allchildren[i]
            array.length+=1
        }
    }
    return array
}
    addclass:function(){...}
    }
}

var node2 = jQuery(a1)//jQuery返回一个对象，里面有2个属性
node2.getchildren()
anode2.addclass()//
复制代码

jQuery接受一个节点，返回一个新的对象，这个对象有很多API(真正的API写在jQuery的原型中)

传入的不仅仅可以是node，也可以是css选择器

window.jQuery = function(nodeOrselector){
    let node={}
    if（typeof nodeOrselector === 'string'）{
        node=document.queryselector(nodeOrselector)
    else{
        node=nodeOrselector
        }
    }
    return{
        getchildren:function (){}
        addclass:function(){}
    }
    .....同上
}
复制代码

给多个node添加class,再加一个设置和获取text功能

window.jQuery = function(noodOrselector) {
    let nodes= {} 
    if(typeof noodOrselector ){
        let temp=document.queryselectorAll(noodOrselector)//我们要纯净伪数组，不要Nodelist原形链
        for(i=0;i<temp.lenght;i++){
            nodes[i]=tmep[i]
        }
        nodes.length=temp=length
    }else if(noodOrselector instancOf Node){
        nodes={0:noodOrselector,length:1}//为了返回值的一致性，所以也设置一个伪数组
    }
    
    nodes.getchildren=function() {...有点复杂，今天先省略}
    
    nodes.addclass=function (classes){
    for(var key in classes){
    var value=classes[key]
    for(let i=0;i<nodes.lenght;i++){
        value?nodes[i].classList.add(key):node[i].classList.remove(key)
        }
    }
}
    //设置text节点功能~~~
    nodes.text=function(text) {
        if(text===undefined) {
            let texts=[] //获取到的是应该是一个数组
            for(let i=0;i<nodes.length;i++){
                texts.push(nodes[i].textcontent)
            }
            return texts
        }else{
            nodes[i].textcontent=text
        }
    }
    return nodes
}
复制代码

总结一下，jQuery的逻辑，你传给我一个node或者选择器，把他获取到的节点封装成一个伪数组，在这个伪数组nodes的原型上加上几个api，也就是属性，然后return这个伪数组