首先讓我們來封裝兩個函數(shù)
- function getSibiling(node){} 同時獲取一個節(jié)點的哥哥和弟弟
- function addClass(node,classes){} 為一個節(jié)點同時添加多個class
第一個函數(shù)
function getSibiling(node){
var number =node.parentNode.children
console.log(number)
var arrey ={length:0}
for(let i=0;i<number.length;i++){
if(number[i]!==node){
arrey[arrey.length]=number[i]
arrey.length +=1
}
}return arrey
}
第二個函數(shù)
function addClass(node,classes){
for(let key in classes){
var value = classes[key]
console.log(value)
var method =value?'add':'remove'
node.classList[method](key)
}
}
命名空間（讓別人知道這是我寫的庫）
window.yydom={}
yydom.getSibiling =function getSibiling(node){
var number =node.parentNode.children
var arrey ={length:0}
for(let i=0;i<number.length;i++){
if(number[i]!==node){
arrey[arrey.length]=number[i]
arrey.length +=1
}
}return arrey
}
yydom.addClass =function addClass(node,classes){
for(let key in classes){
var value = classes[key]
var method =value?'add':'remove'
node.classList[method](key)
}
}
console.log(yydom.getSibiling(item4))
yydom.addClass(item1,{a:true,b:false,c:true})
但是這樣感覺還是有些麻煩抠刺，怎么才能item3.getSibiling() item3.addClass()這樣直接調(diào)用呢砍聊？
方法一：改原型
Node.prototype.addClass = function addclass(classes){
for(let key in classes){
var value = classes[key]
var method =value?'add':'remove'
this.classList[method](key)
}
}
item1.addClass({a:true,b:false,c:true})
Node.prototype.getSibiling = function(){
var number =this.parentNode.children
var arrey ={length:0}
for(let i=0;i<number.length;i++){
if(number[i]!==this){
arrey[arrey.length]=number[i]
arrey.length +=1
}
}return arrey
}
console.log(item3.getSibiling())
console.log(Node.prototype)
k5tD9s.png
方法二：重新寫一個node2(無侵入)
window.Node2 = function(node){
return{
//getSibling:function(){}
addClass:function(classes){
for(let key in classes){
var value = classes[key]
console.log(value)
var method =value?'add':'remove'
node.classList[method](key)
}
}
}
}
var node2 = Node2(item2)
node2.addClass({a:true,b:false,c:true})
Node2就相當于是jQuery,只不過jQuery要更復(fù)雜一些垒手，它還可以通過選擇器來操作節(jié)點
window.Node2 = function(nodeOrSelector){
let node
if(typeof nodeOrSelector === 'string'){
node = document.querySelector(nodeOrSelector)
}else{
node = nodeOrSelecter
}
return{ // 返回一個方法對象，里面有兩個方法一個getSibling一個addClass
getSibling:function(){
var number =node.parentNode.children
var arrey ={length:0}
for(let i=0;i<number.length;i++){
if(number[i]!==node){
arrey[arrey.length]=number[i]
arrey.length +=1
}
}return arrey
},
addClass:function(classes){
for(let key in classes){
var value = classes[key]
console.log(value)
var method =value?'add':'remove'
node.classList[method](key) //node是外面的辕棚，形成閉包
}
}
}
}
var node2 = Node2("ul>li:nth-child(3)")
node2.addClass({red:true,b:false,c:true})
console.log(node2.getSibling())
首先先判斷nodeOrSelector是選擇器還是節(jié)點，然后操作dom找到這些節(jié)點曼振，node保存這些節(jié)點侵状，return返回一個對象
所以JQuery的實質(zhì)是一個構(gòu)造函數(shù)，接受一個可能是節(jié)點的參數(shù)正罢，然后返回一個方法對象去操作這個節(jié)點
那么如果我想同時操作6個li呢垫蛆？并且在這6個li上同時添加一個blue類
window.Node2 = function(nodeOrSelector){
let nodes={}
if(typeof nodeOrSelector === "string"){
let temp = document.querySelectorAll(nodeOrSelector)
for(let i=0;i<temp.length;i++){
nodes[i]=temp[i]
}
nodes.length=temp.length
}else{
if(nodeOrSelector instanceof Node){
nodes={
0:nodeOrSelector,length:1
}
}
}
nodes.addClass=function(classes){
classes.forEach((value) => {
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(value)
}
})
}
return nodes //nodes是一個偽數(shù)組
}
var node2=Node2('ul>li')
node2.addClass(['blue'])
添加一個jQuery的api，獲取文本.text()腺怯，當有參數(shù)時，就用這個text覆蓋原先個text,當不給參數(shù)時認為獲取元素的text文本
nodes.text=function(text){
if(text === undefined){
var texts = []
for(let i=0;i<nodes.length;i++){
texts.push(nodes[i].textContent) //nodes是在外面聲明的川无，構(gòu)成閉包
}return texts
}else{
for(let i=0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
}
console.log(node2.text())
node2.text('Hello')
jQuery就是把node2換成jQuery呛占，然后window.$=jQuery
window.jQuery = function(nodeOrSelector){
let nodes={}
if(typeof nodeOrSelector === "string"){
let temp = document.querySelectorAll(nodeOrSelector)
for(let i=0;i<temp.length;i++){
nodes[i]=temp[i]
}
nodes.length=temp.length
}else{
if(nodeOrSelector instanceof Node){
nodes={
0:nodeOrSelector,length:1
}
}
}
nodes.addClass=function(classes){
classes.forEach((value) => {
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(value)
}
})
}
nodes.text=function(text){
if(text === undefined){
var texts = []
for(let i=0;i<nodes.length;i++){
texts.push(nodes[i].textContent)
}return texts
}else{
for(let i=0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
}
return nodes
}
window.$=jQuery
var $div=$('div')
$div.addClass(['red'])
$div.text('hi')
