阮一峰?jQuery
不要學(xué)jquery mobile
獲取某個(gè)節(jié)點(diǎn)的所有兄弟姐妹
ul>li[id=item$]{選項(xiàng)$}*5
tab后結(jié)果
?
???
???
???
???
???
? 找某一個(gè)節(jié)點(diǎn)的所有兄弟姐妹
?children只獲取元素節(jié)點(diǎn)，不獲取文本節(jié)點(diǎn)
?function getSiblings(node){
?varallChildren = node.parentNode.children
? vararray={
???length:0
? }
for(let i=0;i
???if(allChildren[i]!==node){
?????array[array.length]=allChildren[i]
?????array.length+=1
??? }
}
?return array
}
搜索 方應(yīng)杭== ===
給一個(gè)節(jié)點(diǎn)添加class
方法一：
item3.classList.add('a')
item3.classList.add('b')
item3.classList.add('c')
方法二：
var classes = ['a','b','c']
classes.forEach(value)=>(item3.classList.add(value))
方法三：
var classes ={'a':true,'b':false,'c':true}? //用hash
for (let key in classes){
? varvalue = classes[key]
?if(value){
???item3.classList.add(key)
? }
?else{
???item3.classList.remove(key)
? }
}
結(jié)果item3的class就為a b c
封裝以下
function addClasses(node,classes){
for (let key in classes){
? varvalue = classes[key]
?if(value){
???node.classList.add(key)
? }
?else{
???node.classList.remove(key)
? }
}
}
addClasses(item3,{a:true,b:false,c:true})
代碼優(yōu)化
如果存在類似的代碼，那么就存在優(yōu)化的可能
function addClasses(node,classes){
for (let key in classes){
? varvalue = classes[key]
? varmethodName = value? 'add':'remove'
???node.classList[methodName](key)
}
}
一個(gè)對(duì)象，要調(diào)其方法：
obj.x()
obj['x']()
////////////////////////////////////////以下叫做? 命名空間
window.ffdom = {}
ffdom.getSiblings = getSiblings
ffdom.addClasses = addClasses
ffdom.getSiblings(item3)
以上的問題是如果別人也用了getSiblings、addClasses，那么這里ffdom用就會(huì)把別人的覆蓋掉
所以改成下面的
window.ffdom = {}
ffdom.getSiblings = function (node){
?varallChildren = node.parentNode.children
? vararray={
???length:0
? }
for(let i=0;i
???if(allChildren[i]!==node){
?????array[array.length]=allChildren[i]
?????array.length+=1
??? }
}
?return array
}
ffdom.addClasses = function (node,classes){
for (let key in classes){
? varvalue = classes[key]
? varmethodName = value? 'add':'remove'
???node.classList[methodName](key)
}
}
/////////////////////////////////////////
另一種方法
修改prototype屬性
Node.prototype.getSiblings = function(){
???var allChildren = this.parentNode.children
? vararray={
???length:0
? }
for(let i=0;i
???if(allChildren[i]!==this){
?????array[array.length]=allChildren[i]
?????array.length+=1
??? }
}
?return array
}
console.log(item3.getSiblings())
或者
console.log(item3.getSiblings.call(item3))
Node.prototype.addClasses = function(classes){
for (let key in classes){
? varvalue = classes[key]
? varmethodName = value? 'add':'remove'
???this.classList[methodName](key)
}
}
item3.addClasses({a:true,b:false,c:true})
或者
item3.addClasses.call(item3,{a:true,b:false,c:true})
/////////////////////////////////////////
以上方法的問題：誰都可以修改prototype屬性，會(huì)容易被相互覆蓋
如下解決：
自己做一個(gè)構(gòu)造函數(shù)
window.Node2 = function(node){
???return {
???????getSiblings:function(){
??????????????? var allChildren =node.parentNode.children
??????????????? var array={
??????????????????? length:0
??????????????? }
??????????????? for(leti=0;i
??????????????????? if(allChildren[i]!==node){
?????????????????? ?array[array.length]=allChildren[i]
??????????????????? array.length+=1
??????????????????? }
??????????????? }
??????????????? return array?
???????},
???????addClasses:function(classes){
??????????????? for (let key in classes){
??????????????? var value = classes[key]
??????????????? var methodName = value?'add':'remove'
???????????????????node.classList[methodName](key)
??????????????? }????
???????}
??? }
}
var node2 = Node2(item3)
node2.getSiblings()
node2.addClasses({a:true,b:false,c:true})
把上面的Node2改叫法：jQuery
///////////////////////////////////////////////////////////////////////
jQuery里除了傳入node節(jié)點(diǎn)，還可以傳選擇器? Selector
window.jQuery = function(nodeOrSelector){
???let node
???if(typeof nodeOrSelector === 'string'){
???????node = document.querySelector(nodeOrSelector)
??? }
???else {
???????node = nodeOrSelector
??? }
???return {
???????getSiblings:function(){
??????????????? var allChildren =node.parentNode.children
??????????????? var array={
??????????????? ????length:0
??????????????? }
??????????????? for(leti=0;i
??????????????????? if(allChildren[i]!==node){
???????????????????array[array.length]=allChildren[i]
??????????????????? array.length+=1
??????????????????? }
???????????????}
??????????????? return array?
???????},
???????addClasses:function(classes){
??????????????? for (let key in classes){
??????????????? var value = classes[key]
??????????????? var methodName = value?'add':'remove'
???????????????????node.classList[methodName](key)
??????????????? }????
???????}
??? }
}
var node2 = jQuery('#item3')
var node2 = jQuery('ul>li:nth-child(3)')
node2.getSiblings()
node2.addClasses({red:true,b:false,c:true})
jQuery實(shí)際上是一個(gè)函數(shù)，其接受一個(gè)參數(shù)，這個(gè)參數(shù)可能是節(jié)點(diǎn)或選擇器，然后返回一個(gè)方法對(duì)象去操作這個(gè)節(jié)點(diǎn)或者選擇器
/////////////////如果需要操作所有的li，即多個(gè)節(jié)點(diǎn)
window.jQuery = function(nodeOrSelector){
?letnodes = {}
?if(typeof nodeOrSelector === 'string'){
????let temp = document.querySelectorAll(nodeOrSelector)??? //偽數(shù)組
????for(let i = 0 ;i
????{
????????nodes[i] = temp[i]
????}
????nodes.length = temp.length
?}else if(nodeOrSelector instanceof Node){
????nodes = {
????????0:nodeOrSelector,
????????length:1}
?}
?nodes.getSiblings = function(){?
?}
?nodes.addClasses = function(classes){
??????????????? for (let key in classes){
??????????????? var value = classes[key]
??????????????? var methodName = value?'add':'remove'
??????????????? for(let i =0 ;i
??????????????????? nodes[i].classList[methodName](key)
??????????????? }???
?}
?nodes.getText = function (){??? //獲取文本
????let texts= []
??for(i=0;i
??????texts.push(nodes[i].textContent)
??}?
??return texts
?}
?nodes.setText = function(text){?? //設(shè)置文本
? ???for(let i= 0; i
????????nodes[i].textContent = text
????}
?}
?//把set和get合并
?nodes.text = function(text){
????if(text === undefined){
??????????let texts= []
???????????for(i=0;i
???????????????texts.push(nodes[i].textContent)
????????}?
???????????????? return texts
????}
????else {
????????????? for(let i= 0;i
??????????????? nodes[i].textContent = text
???????}
????}
?}
?return nodes
}
var node2 = jQuery('ul>li')
node2.getSiblings()
node2.addClasses({a:true,b:false,c:true})
console.log(node2)
console.log(node2.getText())
node2.setText('hi')
var text = node2.text()? //沒給參數(shù)，說明想獲取
node2.text('hi')? //給了參數(shù)，說明想設(shè)置
node2[0].classList.add('blue')也是可以的；這里node2[0]即nodeOrSelector
操作一個(gè)你訪問不到的變量，閉包的意義
{0:li ,1:li,length:5,addClasses:f,text:f}
var nodes = jQuery('ul>li')
x.onclick = function (){
?nodes.toggleClass('red')? //toggle開關(guān)、切換
}
var nodes = jQuery('ul>li')
x.onclick = function (){
?nodes.addClass(function(index , currentClass){
???return 'c_'+index
?})?
}
這里index是索引，表示添加c_加索引的class? 比如c_0? c-1
var nodes = jQuery('ul>li')
var classes =['red','green','blue','yellow','black']
x.onclick = function (){
?nodes.addClass(function(index , currentClass){
???return classes[index]
?})?
}
window.$=jQuery
