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

2022-09-13 13:41:19

<!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
}

②给某个节点添加一个或多个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})

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

码农公寓

相关文章