jQuery链式调用与show学问浅析_

1、jQuery链式调用与show学问浅析_ 这篇文章主要介绍了jQuery的XX如何实现？2.show与链式调用 的相关资料，特别具有参考借鉴价值，感爱好的伴侣一起学习吧 jQuery用法许久了，但是有一些API的实现实在想不通。下面将用法简化的代码来介绍，主要关注jQuery的实现思想。 相较于上一篇，代码更新了：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的生效 /否则默认的生效 node.style.display = ; /元素display值为非默认值状况，需要还原为oldDisplay：div-display:inline-block /或 检测css上的display是否为none if(node.style.display= | isHidden(node

4、) /有oldDispaly则设置 if(node.oldDisplay) node.style.display = node.oldDisplay; /没有则设置为元素默认值或元素当前值 else node.style.display = getDisplay(node); ) /链式调用 return this; , hide: function() Atotype.forEach.call(this, function(node) if(!isHidden(node) /jQuery用法其cache机制存储信息，这里简化一下 /挺直挂载在对应的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的默认

6、值 var display = window.getComputedStyle(dom, null).getPropertyValue(display); document.body.removeChild(dom); return display; function isHidden(node) /忽视未append进document的元素这种隐蔽状况：$(divblock/div)未append return window.getComputedStyle(node, null).getPropertyValue(display) = none; jQtotype.init

7、.prototype = jQtotype; window.$ = jQuery; )(window); 先拿hide函数热身一下。如上篇提到的，jQuery会将猎取到的nodeList处理成数组，所以一上来，我们用forEach处理数组里的每一个node节点。 接下来，我们只需要将每一个节点的style.display置为none即可隐蔽。很简洁，对吧？() 。oldDisplay和return this先不管() hide: function() Atotype.forEach.call(this, function(node) if(!isHidden(n

8、ode) /jQuery用法其cache机制存储信息，这里简化一下 /挺直挂载在对应的dom下 node.oldDisplay = getDisplay(node); node.style.display = none; ) return this; 其中isHidden是推断该元素是否隐蔽：已经隐蔽的元素就没必要再去处理了，挺直跳过 function isHidden(node) /忽视未append进document的元素这种隐蔽状况：$(divblock/div)未append return window.getComputedStyle(node, null).getPropertyV

9、alue(display) = none; - 接下来，来个稍繁琐的show。先抛出一个问题来引发一系列问题： hide某个元素只需要将display:none，那么show呢？ display:block不就行了吗？这样的确可以将元素显示出来。但是万一元素原来的值是display:inline呢？ 那在hide处保存原来的值不就行了吗？就像以下的代码： node.oldDisplay = getDisplay(node); 要是执行show前没有不执行hide呢？比如下面这种状况，不就没有oldDisplay了吗() style div display:none; /style divdis

10、play:none/div$(div).show() 好，关键的地方到了：我们猎取元素display的默认值就可以了吧？比如div默认是block，span默认是inline。 思路有了，那么接下来的问题是：如何猎取元素display的默认值？ 嘿嘿嘿，想不到吧？这里需要用点小技巧，大体思路如下：通过nodeName创建一个新的标签，再猎取。 有个地方可以再优化一下，getDisplay猎取到元素display默认值后，可以用法jQuery的cache机制存起来（事实上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的默认值 var display = window.getComputedStyle(dom, null).getPropertyValue(display); document.body.removeChild(dom); return

12、display; 然后，综合这两种状况： /有oldDispaly则设置 if(node.oldDisplay) node.style.display = node.oldDisplay; /没有则设置为元素默认值或元素当前值 else node.style.display = getDisplay(node); 以为这样就结束了？NO,show函数的状况还是挺简单的，我们大致要应对这几种状况： style #none,#none2 display: none; /style body div id=div默认值为block/div span id=span默认值为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函数变成了这鬼样(_)。大致思路如下： 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的生效 /否则默认的生效 node.style.display = ; /元素display值为非默认值状况，需要还原为oldDisplay：div-display:inline-block /或 检测css上的display是否为none if(node.style.display= | isHidden(node) /有oldDispaly则设置 if(node.oldDisplay) node.style.display = node.oldDisplay; /没有则设置为元素默认值或当前值 else node.style.display = getDisplay(node); ) - 链式调用就是类似这种状况： $(div).show().hide().css(height,30