jQuery链式调用与显示知识浅析

上篇文章给大家介绍了框架的框架，有关框架的基础知识可以参考下。

框架使用许久了，但是有一些应用程序接口的实现实在想不通。下面将使用简化的代码来介绍，主要关注框架的实现思想。

相较于上一篇，代码更新了：21~78

（函数(窗口，未定义){函数jQuery(sel){返回新的jQuery。原型。init(sel)；} jQuery。prototype={ constructor : jQuery，init : function(sel){ if(sel的类型==' string '){ var that=this；var nodeList=文档。query selectorall(sel)；数组。原型。foreach。调用(nodeList，function(val，I){ the[I]=val；})这个。卖家=sel这个。长度=节点列表。长度；}}，显示：函数(){ array。原型。foreach。调用(this，function(node)){//if(node。风格)继续；//textnode没有样式/删除风格上的显示：无var显示=节点。风格。显示；if(display===' none '){//display置为空后，css如果有显示则钢性铸铁的生效//否则默认的生效节点。风格。display=}//元素显示值为非默认值情况，需要还原为旧显示：div-display:inline-block//或检测钢性铸铁上的显示是否为无if(节点。风格。display==' ' | | | Ishidden(节点)){//有旧显示则设置if(节点。旧显示)节点。风格。display=节点。旧显示器；//没有则设置为元素默认值或元素当前值else节点。风格。display=getDisplay(节点)；}})//链式调用归还这个；}，隐藏：函数(){ array。原型。foreach。调用(this，function(node){if(！isHidden(node)) {//jQuery使用其躲藏机制存储信息，这里简化一下//直接挂载在对应的数字正射影像图下node.oldDisplay=getDisplay(节点);节点。风格。显示='无'；}})返回此；} }函数getDisplay(node){ var display=window。getcomputedstyle(节点，null).getPropertyValue(' display ')；if(display===' none '){ var DOM=document。创建元素(节点。nodename)；//插入到身体中文件。尸体。appendchild(DOM)；//即可获取到元素显示的默认值var显示=窗口。getcomputedstyle(DOM，null).getPropertyValue(' display ')；文件。尸体。移除子对象(DOM)；}返回显示；}函数isHidden(节点){//忽略未附加进文件的元素这种隐藏情况：$('divblock/div ')未追加返回窗口。getcomputedstyle(节点，null ).getPropertyValue(' display ')===' none '；} jquery。原型。初始化。prototype=jquery。原型；窗户$=jQuery})(窗口);先拿隐藏函数热身一下。如上篇提到的，jQuery会将获取到的节点列表处理成数组，所以一上来，我们用为每一个处理数组里的每一个结节节点。

接下来，我们只需要将每一个节点的样式。显示置为没有即可隐藏。很简单，对吧？(0) 。旧显示器和归还这个先不管(￣￣)

隐藏：函数(){数组。原型。foreach。调用(this，function(node){if(！isHidden(node)) {//jQuery使用其躲藏机制存储信息，这里简化一下//直接挂载在对应的数字正射影像图下node.oldDisplay=getDisplay(节点);节点。风格。显示='无'；}})返回此；} 其中isHidden是判断该元素是否隐藏：已经隐藏的元素就没必要再去处理了，直接跳过

函数isHidden(节点){//忽略未附加进文件的元素这种隐藏情况：$('divblock/div ')未追加返回窗口。getcomputedstyle(节点，null ).getPropertyValue(' display ')===' none '；} -

接下来，来个稍繁琐的表演。先抛出一个问题来引发一系列问题：

隐藏某个元素只需要将display:none，那么显示呢？

显示：块不就行了吗？这样确实可以将元素显示出来。但是万一元素原来的值是显示：内联呢？

那在隐藏处保存原来的值不就行了吗？就像以下的代码：

node.oldDisplay=getDisplay(节点);要是执行显示前没有不执行隐藏呢？比如下面这种情况，不就没有旧显示器了吗(0)

stylediv { display:none}/style div display : none/div $(' div ')。show()好了，重点就在这里：我们能得到元素显示的默认值吗？例如，div默认为块，span默认为内联。

有了这个想法，接下来的问题就是：如何获取元素显示的默认值？

嘿嘿嘿，想不到吧？这里需要一点技巧，大致思路如下：通过nodeName创建一个新标签，然后获取。

有一个地方可以再次优化。getdisplay得到display元素的默认值后，可以使用jQuery的缓存机制保存(其实jQuery也是这么做的)。

函数getDisplay(node){ var display=window . getcomputedstyle(node，null)。getPropertyValue(' display ')；if(display===' none '){ var DOM=document . create element(node . nodename)；//插入到body document . body . appendchild(DOM)中；//可以得到元素display的默认值var display=window . getcomputed style(DOM，null)。getproperty value(' display ')；document . body . remove child(DOM)；}返回显示；}然后，结合这两种情况：

//如果有oldDispaly，则设置if(node . old display)node . style . display=node . old display；//如果不是，则设置为元素默认值或元素当前值else node . style . display=getdisplay(node)；以为结束了？NO，show函数相当复杂，所以我们应该大致处理这些情况：

样式#none，# none2 { display: none}/stylebodydiv id='div '默认值为block/divspan id='span '默认值为inline/span div id=' div 2 ' style=' display : inline-block；'修改为内联块/divdiv id='none '以隐藏/div div id=' none2 '样式=' display: none '以通过css和样式隐藏/div/body。最后，show函数变成这个鬼(_)).总体思路如下：

show : function(){ array . prototype . foreach . call(this，function(node)){//if(node . style)继续；//textnode没有样式//delete display : none var display=node . style . display on style；如果(display===' none '){//当DISPLAY为空时，如果css中有DISPLAY，则css生效//否则默认生效。}//当元素的显示值不是默认值时，需要还原为olddisplay:div-display : inline-block//或者检查css上的显示是否为none如果(node.style.display==' ' |是隐藏的(node)){//如果有old display，则设置If(node . old display)node . style . display=node . old display；//否则设置为else node . style . display=getdisplay(node)元素的默认值或当前值；}})} -

连锁电话是这样的：

$(“div”)。显示()。隐藏()。CSS('高度'，' 300px ')。toggle()实现起来非常简单，只需在每个函数之后返回这个即可。

-

有同学说：你好！这是作秀，藏错了吗？你错过时间参数了吗？用setTimeOut自己实现~ _ ~。

本节的主要目的是让大家知道jQuery需要考虑很多情况(很多脏活)。代码瞬间简化，还是那么长。

写完之后，我发现还有一种情况秀秀没有考虑到：

div{ display:none！重要；}div每个人都打开自己的大脑，如何应对( 0 )/div。