6.1 jQuery （封装两个函数：①获取节点的所有兄弟元素；②给某节点添加一个或多个class） 

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
</body>
</html>

 

① 获取某个节点的所有兄弟元素

这里我们先来了解一下伪数组

所有 array.__proto__ !== Array.prototype 的都是伪数组

也就是 array.__proto__不是指向数组公有属性（Array.prototype）

伪数组不能使用 array.push

var allChildren = item3.parentNode.children //获取某节点外的所有兄弟元素
var array = {length:0} //声明一个伪数组
for(let i = 0; i < allChildren.length; i++){ //遍历
    if(allChildren[i] !==item3){
        array[array.length] = allChildren[i] //为什么不直接使用array[i] = allChildren[i]
        array.length +=1
    }        
}

由于 array.length = 0

所以 array[array.length] = array[0] = allChildren[0]

通过length += 1就可以

array[0] = allChildren[0]

array[1] = allChildren[1]

array[2] = allChildren[3]

array[3] = allChildren[4]

 ----------------------------------------------------------------------------------------------------------------------

关于 为什么不直接使用array[ i ] = allChildren[ i ]

假如使用 array[ i ] = allChildren[ i ] 代码如下

var allChildren = item3.parentNode.children
var array = {length:0}
for(let i = 0; i < allChildren.length; i++){
    if(allChildren[i] !==item3){
        array[i] = allChildren[i] 
    }        
}

我们console.log(array)可以看到

 --------------------------------------------------------------------------------------------------------------------------

封装成函数

function getSiblings(node){
    var allChildren = 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
}

这样.如果需要查找 item3 的兄弟就可直接引用函数了 getSiblings(item3) 

 

②给某个节点添加一个或多个class

var class = {'a':true; 'b':false; 'c':true}
for(let i in class){
    var value = class[i]
    if(value){
        item3.classList.add(i)
    }else{
        item3.classList.remove(i)
    }
}

封装成函数

function addClass(node,class){
   for(let i in class){
     var value = class[i]
      if(value){
        node.classList.add(i)
    }else{
       node.classList.remove(i)
     }
　　}
}

再优化一下写成

function addClass(node,class){
   for(let i in class){
     var value = class[i]
     var methodName = value ? 'add' : 'remove'
     node.classList[methodName](i)
　}
}

 

不需要添加return

直接使用

addClass(item3, {'a':ture, 'b':false, 'c':true})

 

③命名空间

由于各个头文件是由不同的人设计的，有可能在不同的头文件中用了相同的名字来命名所定义的类或函数，这样在程序中就会出现名字冲突。

window.Rhee = { }

Rhee.getSiblings = getSbilings

Rhee.addClass = addClass

这样通过命名就可以这样使用了

Rhee.getSiblings(item3) 

Rhee.addClass(item3, {'a':ture, 'b':false, 'c':true})

posted @ 2020-07-23 06:46  ScottRhee  阅读(144)  评论(0)  编辑  收藏  举报