jQuery鏈?zhǔn)秸{(diào)用與show學(xué)問淺析_

1、jQuery鏈?zhǔn)秸{(diào)用與show學(xué)問淺析_ 這篇文章主要介紹了jQuery的XX如何實(shí)現(xiàn)？2.show與鏈?zhǔn)秸{(diào)用 的相關(guān)資料，特別具有參考借鑒價(jià)值，感愛好的伴侶一起學(xué)習(xí)吧 jQuery用法許久了，但是有一些API的實(shí)現(xiàn)實(shí)在想不通。下面將用法簡化的代碼來介紹，主要關(guān)注jQuery的實(shí)現(xiàn)思想。 相較于上一篇，代碼更新了：2178 (function(window, undefined) function jQuery(sel) return new jQtotype.init(sel); jQtotype = constructor: jQuery, init: fu

2、nction(sel) if(typeof sel = string) var that = this; var nodeList = document.querySelectorAll(sel); Atotype.forEach.call(nodeList, function(val, i) thati = val; ) this.selector = sel; this.length = nodeList.length; , show: function() Atotype.forEach.call(this, function(node) /if(node

3、.style) continue; /textnode沒有style /刪除style上的display:none var display = node.style.display; if(display = none) /dispaly置為空后，css假如有display則css的生效 /否則默認(rèn)的生效 node.style.display = ; /元素display值為非默認(rèn)值狀況，需要還原為oldDisplay：div-display:inline-block /或 檢測css上的display是否為none if(node.style.display= | isHidden(node

4、) /有oldDispaly則設(shè)置 if(node.oldDisplay) node.style.display = node.oldDisplay; /沒有則設(shè)置為元素默認(rèn)值或元素當(dāng)前值 else node.style.display = getDisplay(node); ) /鏈?zhǔn)秸{(diào)用 return this; , hide: function() Atotype.forEach.call(this, function(node) if(!isHidden(node) /jQuery用法其cache機(jī)制存儲信息，這里簡化一下 /挺直掛載在對應(yīng)的dom下 node.oldD

5、isplay = getDisplay(node); node.style.display = none; ) return this; function getDisplay(node) var display = window.getComputedStyle(node, null).getPropertyValue(display); if(display = none) var dom = document.createElement(node.nodeName); /插入到body中 document.body.appendChild(dom); /即可獵取到元素display的默認(rèn)

6、值 var display = window.getComputedStyle(dom, null).getPropertyValue(display); document.body.removeChild(dom); return display; function isHidden(node) /忽視未append進(jìn)document的元素這種隱蔽狀況：$(divblock/div)未append return window.getComputedStyle(node, null).getPropertyValue(display) = none; jQtotype.init

7、.prototype = jQtotype; window.$ = jQuery; )(window); 先拿hide函數(shù)熱身一下。如上篇提到的，jQuery會將獵取到的nodeList處理成數(shù)組，所以一上來，我們用forEach處理數(shù)組里的每一個node節(jié)點(diǎn)。 接下來，我們只需要將每一個節(jié)點(diǎn)的style.display置為none即可隱蔽。很簡潔，對吧？() 。oldDisplay和return this先不管() hide: function() Atotype.forEach.call(this, function(node) if(!isHidden(n

8、ode) /jQuery用法其cache機(jī)制存儲信息，這里簡化一下 /挺直掛載在對應(yīng)的dom下 node.oldDisplay = getDisplay(node); node.style.display = none; ) return this; 其中isHidden是推斷該元素是否隱蔽：已經(jīng)隱蔽的元素就沒必要再去處理了，挺直跳過 function isHidden(node) /忽視未append進(jìn)document的元素這種隱蔽狀況：$(divblock/div)未append return window.getComputedStyle(node, null).getPropertyV

9、alue(display) = none; - 接下來，來個稍繁瑣的show。先拋出一個問題來引發(fā)一系列問題： hide某個元素只需要將display:none，那么show呢？ display:block不就行了嗎？這樣的確可以將元素顯示出來。但是萬一元素原來的值是display:inline呢？ 那在hide處保存原來的值不就行了嗎？就像以下的代碼： node.oldDisplay = getDisplay(node); 要是執(zhí)行show前沒有不執(zhí)行hide呢？比如下面這種狀況，不就沒有oldDisplay了嗎() style div display:none; /style divdis

10、play:none/div$(div).show() 好，關(guān)鍵的地方到了：我們獵取元素display的默認(rèn)值就可以了吧？比如div默認(rèn)是block，span默認(rèn)是inline。 思路有了，那么接下來的問題是：如何獵取元素display的默認(rèn)值？ 嘿嘿嘿，想不到吧？這里需要用點(diǎn)小技巧，大體思路如下：通過nodeName創(chuàng)建一個新的標(biāo)簽，再獵取。 有個地方可以再優(yōu)化一下，getDisplay獵取到元素display默認(rèn)值后，可以用法jQuery的cache機(jī)制存起來（事實(shí)上jQuery也是這么做了）。 function getDisplay(node) var display = window.g

11、etComputedStyle(node, null).getPropertyValue(display); if(display = none) var dom = document.createElement(node.nodeName); /插入到body中 document.body.appendChild(dom); /即可獵取到元素display的默認(rèn)值 var display = window.getComputedStyle(dom, null).getPropertyValue(display); document.body.removeChild(dom); return

12、display; 然后，綜合這兩種狀況： /有oldDispaly則設(shè)置 if(node.oldDisplay) node.style.display = node.oldDisplay; /沒有則設(shè)置為元素默認(rèn)值或元素當(dāng)前值 else node.style.display = getDisplay(node); 以為這樣就結(jié)束了？NO,show函數(shù)的狀況還是挺簡單的，我們大致要應(yīng)對這幾種狀況： style #none,#none2 display: none; /style body div id=div默認(rèn)值為block/div span id=span默認(rèn)值為inline/span di

13、v id=div2 style=display:inline-block;修改為inline-block/div div id=none通過css隱蔽了/div div id=none2 style=display:none通過css和style隱蔽了/div /body 最終,show函數(shù)變成了這鬼樣(_)。大致思路如下： show: function() Atotype.forEach.call(this, function(node) /if(node.style) continue; /textnode沒有style /刪除style上的display:none var

14、 display = node.style.display; if(display = none) /dispaly置為空后，css假如有display則css的生效 /否則默認(rèn)的生效 node.style.display = ; /元素display值為非默認(rèn)值狀況，需要還原為oldDisplay：div-display:inline-block /或 檢測css上的display是否為none if(node.style.display= | isHidden(node) /有oldDispaly則設(shè)置 if(node.oldDisplay) node.style.display = node.oldDisplay; /沒有則設(shè)置為元素默認(rèn)值或當(dāng)前值 else node.style.display = getDisplay(node); ) - 鏈?zhǔn)秸{(diào)用就是類似這種狀況： $(div).show().hide().css(height,30