2018-01-08 jQuery筆記

阮一峰?jQuery


不要學(xué)jquery mobile


獲取某個(gè)節(jié)點(diǎn)的所有兄弟姐妹


ul>li[id=item$]{選項(xiàng)$}*5


tab后結(jié)果


?

    ???

  • 選項(xiàng)1
  • ???

  • 選項(xiàng)2
  • ???

  • 選項(xiàng)3
  • ???

  • 選項(xiàng)4
  • ???

  • 選項(xiàng)5


  • ? 找某一個(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

    ?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
    平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

    推薦閱讀更多精彩內(nèi)容

    • 背景 一年多以前我在知乎上答了有關(guān)LeetCode的問題, 分享了一些自己做題目的經(jīng)驗(yàn)。 張土汪:刷leetcod...
      土汪閱讀 12,766評(píng)論 0 33
    • title: Optical Character Recognition (OCR)author: Marina ...
      4a87cc38dcbc閱讀 377評(píng)論 0 0
    • 單例模式 適用場(chǎng)景:可能會(huì)在場(chǎng)景中使用到對(duì)象,但只有一個(gè)實(shí)例,加載時(shí)并不主動(dòng)創(chuàng)建,需要時(shí)才創(chuàng)建 最常見的單例模式,...
      Obeing閱讀 2,092評(píng)論 1 10
    • 刷手機(jī)。 鄰家小妹這個(gè)評(píng)價(jià),真的是辣眼睛。 揮霍青春的人是我,只思進(jìn)取的人是我。 25。 似乎真的到了很尷尬的年齡...
      亭亭_1dcb閱讀 139評(píng)論 0 0