获取目标节点的兄弟节点
image.pngfunction getsiblings(node){
var allchildren = node.parentNode.children
var array ={length:0}
for(let i=0;i<allchildren.length;i++){
if(allchildren[i]!==node){
arrary[array.length]=allchildren[i]
arrary.length += 1
}
}
return array
}
1.先获取该节点父节点的所有子标签,装入allchildren对象
2创建arrary对象
3.遍历所有父节点的子标签,把不是目标节点的标签放入arrary对象
4返回伪数组array
把执行一个功能的代码,装在一个函数对象中
getSibling中arry[arry.length]=allchildren[i]
因为返回的是array对象是伪数组,array中的key是array.length确定,一开始array.length=0,遍历一次后伪数组的length应该增加1,所以每一次遍历结束前array.length +=1。
addclass,添加classname
一个节点添加一个class
node.classList.add('string')
一个节点添加多个class
var classes=['a','b','c']
classes.forEach((value)=>x.classList.add(value))
一个节点的多个class即能添加又能删除
function addclass(classes){
if(let key in classes){
var value=classes[key]
var methodName =value?add:remove
node.classList[methodName](key)
}
}
命名空间
image.pngaddclass对一个元素添加或删除多个classname,classes中的名为true时添加入node的classname中,value为flase时从node的classname中移除对应的key。
image.png image.png
获取多个元素
image.png返回值需要相同类型,当传入的参数(nodeOrSelector)是一个节点,也要构造一个伪数组
image.png
通过临时伪数组temp存放querySelectorAll返回的Nodelist(原型指向Node),再遍历temp把数据一个个放到nodes(对象,原型指向object.prototype)中
image.png image.png
注意函数结尾不写return nodes ,$div将为undefined
#window.$= jQuery
#var $div=$ ('div')
#$div.addClass('red')
#$div.setText('hi')
代码思路jquery是一个函数,函数返回一个对象,这个对象有addclass和setText两种方法。
window.jQuery =function(nodeOrSelector){
var nodes={}
if(typeof nodeOrSelector==='string'){
let temp=document.querySelectorAll(nodeOrSelector)
for(let i=0;i<temp.length;i++){
nodes[i]=temp[i]
}
node[length]=temp[length]
}else if(nodeOrSelector instanceof node){
nodes={0:nodeOrSelector,length:1}
}
}
nodes.addclass=function(classes){
if(let key in classes){
var value=classes[key]
var methodName =value?'add':'remove'
for(let i = 0;i<nodes.length;i++){
node[i].classList[methodName](key)
}
}
声明变量key在classes对象中通过三元运算符判断key的boolean,当布尔值是true时,变量methodName的值为字符串add,遍历
全部的节点,添加或移除classes的key
网友评论