首先让我们来封装两个函数
- function getSibiling(node){} 同时获取一个节点的哥哥和弟弟
- function addClass(node,classes){} 为一个节点同时添加多个class
第一个函数
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
}
第二个函数
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()这样直接调用呢？
方法一：改原型
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要更复杂一些，它还可以通过选择器来操作节点
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是选择器还是节点，然后操作dom找到这些节点，node保存这些节点，return返回一个对象
所以JQuery的实质是一个构造函数，接受一个可能是节点的参数，然后返回一个方法对象去操作这个节点
那么如果我想同时操作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是一个伪数组
}
var node2=Node2('ul>li')
node2.addClass(['blue'])
添加一个jQuery的api，获取文本.text()，当有参数时，就用这个text覆盖原先个text,当不给参数时认为获取元素的text文本
nodes.text=function(text){
if(text === undefined){
var texts = []
for(let i=0;i<nodes.length;i++){
texts.push(nodes[i].textContent) //nodes是在外面声明的，构成闭包
}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')
