1. 封裝函數(shù)
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<body>
<ul>
<li id="item1">選項(xiàng)1</li>
<li id="item2">選項(xiàng)2</li>
<li id="item3">選項(xiàng)3</li>
<li id="item4">選項(xiàng)4</li>
<li id="item5">選項(xiàng)5</li>
</ul>
</body>
</html>
1.1 getSiblings
1.1.1 獲取 item3 所有的兄弟
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] // 添加到偽數(shù)組中，不用array[i]是因?yàn)榭赡軙?huì)跳過(guò)
array.length += 1
}
}
console.log(array)
// {0: li#item1, 1: li#item2, 2: li#item3, 3: li#item4, 4: li#item5, length: 5}
封裝
function getSiblings(node){
var allChildren = item3.parentNode.children
var array = { length:0 }
for( let i=0; i<allChildren.length; i++ ){
if( allChildren !== item3 ){
array[array.length] = allChildren[i]
array.length += 1
}
}
return(array)
}
console.log( getSiblings(item3) )
// {0: li#item1, 1: li#item2, 2: li#item3, 3: li#item4, 4: li#item5, length: 5}
1.1.2 給 item3 添加 calss
var classes = ['a','b','c']
classes.forEach((value)=>{ item3.classList.add(value)})
// <li id="item3" class="a b c">選項(xiàng)3</li>
另一種方法，既能 add 瞳秽，也能 remove
var classes = {'a':true, 'b':false, 'c':true}
for(let key in classes){
var value = classes[key]
if(value){
item3.classList.add(key)
}else{
item3.classList.remove(key)
}
}
// <li id="item3" class="a c">選項(xiàng)3</li>
封裝
function addClass(node,classes){
for(let key in classes){
var value = classes[key]
if(value){
node.classList.add(key)
}else{
node.classList.remove(key)
}
}
}
addClass(item3,{'a':true, 'b':false, 'c':true})
// <li id="item3" class="a c">選項(xiàng)3</li>
// 代碼優(yōu)化 ( 如果出現(xiàn)類(lèi)似的代碼就存在優(yōu)化的可能 )
function addClass(node,classes){
for(let key in classes){
var value = classes[key]
var methodName = value ? 'add':'remove'
node.classList[methodName](key)
}
}
2. 命名空間
window.xxxdom{}
xxxdom.getSiblings = getSiblings
xxxdom.addClass = addClass
xxxdom.getSiblings()
xxxdom.addClass(item3,{'a':true, 'b':false, 'c':true})
命名空間可以讓別人知道你的庫(kù)叫什么名字，但是上面的代碼會(huì)覆蓋之前聲明的變量。
調(diào)整代碼
window.xxxdom{}
xxxdom.getSiblings = function(node){
var allChildren = node.parentNode.children
var array = { length:0 }
for( let i=0; i<allChildren.length; i++ ){
if( allChildren !== node ){
array[array.length] = allChildren[i]
array.length += 1
}
}
return(array)
}
xxxdom.addClass = function(node,classes){
classes.forEach((value)=>{node.classList.add(value)})
}
xxxdom.getSiblings()
xxxdom.addClass(item3,['a','b','c'])
// 聲明變量 xxxdom{} 添加getSiblings和addClass屬性，這樣就不會(huì)覆蓋變量
3. Nodetype 和 Node2
怎么樣能夠像下面這樣使用
item3.getSiblings()
item3.addClass(item3,['a','b','c'])
方法1
直接改Node的原型（共有屬性）
Node.prototype.getSiblings = function(){
var allChildren = this.parentNode.children
var array = { length:0 }
for( let i=0; i<allChildren.length; i++ ){
if( allChildren !== this ){
array[array.length] = allChildren[i]
array.length += 1
}
}
return(array)
}
console.log(item3.getSiblings())
item3.addClass(['a','b','c'])
// {0: li#item1, 1: li#item2, 2: li#item3, 3: li#item4, 4: li#item5, length: 5}
// <li id="item3" class="a b c">選項(xiàng)3</li>
修改原型的話會(huì)相互覆蓋临谱，所以這個(gè)方法不好。
方法2
重新寫(xiě)一個(gè) Node2
window.Node2 = dunction(node){
return{
getSiblings:function(){},
addClass:function(){}
}
}
var node2 = Node2(item3)
node2.getSiblings()
node2.addClass(['a','b','c'])
修改代碼
window.Node2 = function(node){
return{
getSiblings:function(){
var allChildren = node.parentNode.children
var array = { length:0 }
for( let i=0; i<allChildren.length; i++ ){
if( allChildren !== node ){
array[array.length] = allChildren[i]
array.length += 1
}
}
return(array)
},
addClass:function(classes){
classes.forEach((value)=>{node.classList.add(value)})
}
}
}
var node2 = Node2(item3)
console.log(node2.getSiblings())
node2.addClass(['a','b','c'])
// {0: li#item1, 1: li#item2, 2: li#item3, 3: li#item4, 4: li#item5, length: 5}
// <li id="item3" class="a b c">選項(xiàng)3</li>
把Node2改成jQuery
window.jQuery = function(node){
return{
getSiblings:function(){
var allChildren = node.parentNode.children
var array = { length:0 }
for( let i=0; i<allChildren.length; i++ ){
if( allChildren !== node ){
array[array.length] = allChildren[i]
array.length += 1
}
}
return(array)
},
addClass:function(classes){
classes.forEach((value)=>{node.classList.add(value)})
}
}
}
jQuery接受一個(gè)舊的節(jié)點(diǎn)奴璃，返回一個(gè)新的對(duì)象悉默，這個(gè)對(duì)象就是jQuery對(duì)象，它擁有一些新的api 苟穆。
window.jQuery = function(nodeOrSelector){
let node
if(typeof nodeOrSelector === 'string'){
node = document.querySelector(nodeOrSelector)
}else{
node = nodeOrSelector
}
// 判斷是字符串還是節(jié)點(diǎn)
return{
getSiblings:function(){
var allChildren = node.parentNode.children
var array = { length:0 }
for( let i=0; i<allChildren.length; i++ ){
if( allChildren !== node ){
array[array.length] = allChildren[i]
array.length += 1
}
}
return(array)
},
addClass:function(classes){
classes.forEach((value)=>{node.classList.add(value)})
}
}
}
var node2 = jQuery('#item3')
console.log(node2.getSiblings())
node2.addClass(['a','b','c'])
操作多節(jié)節(jié)點(diǎn)
window.jQuery = function(nodeOrSelector){
let nodes = {}
if(typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)//偽數(shù)組
for(i=0; i<temp.length; i++){
nodes[i] = temp[i]
}
nodes.length = temp.length // 返回一個(gè)純凈的偽數(shù)組抄课，原型直接指向Object
}else if(nodeOrSelector instanceof Node){
nodes = {0:nodeOrSelector,length:1}//保持一致，返回一個(gè)偽數(shù)組
}
nodes.addClass = function(classes){
classes.forEach((value)=>{
for(let i=0; i<nodes.length; i++){
nodes[i].classList.add(value)
}
})
}
return nodes
}
var node2 = jQuery('ul>li')
node2.addClass(['a','b','c'])
// 給所有的 item 加上相同的 class
// <li id="item1" class="a b c">選項(xiàng)1</li>
// <li id="item2" class="a b c">選項(xiàng)2</li>
// <li id="item3" class="a b c">選項(xiàng)3</li>
// <li id="item4" class="a b c">選項(xiàng)4</li>
// <li id="item5" class="a b c">選項(xiàng)5</li>
獲取和修改文本
window.jQuery = function(nodeOrSelector){
let nodes = {}
if(typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)//偽數(shù)組
for(i=0; i<temp.length; i++){
nodes[i] = temp[i]
}
nodes.length = temp.length // 返回一個(gè)純凈的偽數(shù)組雳旅，原型直接指向Object
}else if(nodeOrSelector instanceof Node){
nodes = {0:nodeOrSelector,length:1}//保持一致跟磨，返回一個(gè)偽數(shù)組
}
nodes.addClass = function(classes){
classes.forEach((value)=>{
for(let i=0; i<nodes.length; i++){
nodes[i].classList.add(value)
}
})
}
nodes.getText = function(){
var texts = []
for(let i=0; i<nodes.length; i++){
texts.push(nodes[i].textContent)
}
return texts
}
nodes.setText = function(text){
for(let i=0; i<nodes.length; i++ ){
nodes[i].textContent = text
}
}
return nodes
}
var node2 = jQuery('ul>li')
node2.addClass(['a','b','c'])
node2.setText('hi')
優(yōu)化
window.jQuery = function(nodeOrSelector){
let nodes = {}
if(typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)//偽數(shù)組
for(i=0; i<temp.length; i++){
nodes[i] = temp[i]
}
nodes.length = temp.length // 返回一個(gè)純凈的偽數(shù)組，原型直接指向Object
}else if(nodeOrSelector instanceof Node){
nodes = {0:nodeOrSelector,length:1}//保持一致岭辣，返回一個(gè)偽數(shù)組
}
nodes.addClass = function(classes){
classes.forEach((value)=>{
for(let i=0; i<nodes.length; i++){
nodes[i].classList.add(value)
}
})
}
// nodes.getText = function(){
// var texts = []
// for(let i=0; i<nodes.length; i++){
// texts.push(nodes[i].textContent)
// }
// return texts
// }
// nodes.setText = function(text){
// for(let i=0; i<nodes.length; i++ ){
// nodes[i].textContent = text
// }
// }
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
}
var node2 = jQuery('ul>li')
node2.addClass(['a','b','c'])
node2.text('hi')
