<style> #none,#none2{ display: none; } </style> <body> <div>默认值为block</div> <span>默认值为inline</span> <div>修改为inline-block</div> <div>通过css隐藏了</div> <div>通过css和style隐藏了</div> </body>
最终,show函数变成了这鬼样ψ(╰_╯)。大致思路如下：
show: function(){ Array.prototype.forEach.call(this, function(node){ //if(node.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)){ //有oldDispaly则设置 if(node.oldDisplay) node.style.display = node.oldDisplay; //没有则设置为元素默认值或当前值 else node.style.display = getDisplay(node); } }) }
--------------------------
链式调用就是类似这种情况：
$('div').show().hide().css('height','300px').toggle()
实现起来非常简单，只要在每个函数后面return this即可
--------------------------
有同学说：喂！这个show,hide不对吧？是不是漏了时间参数？ 用setTimeOut自己实现吧~>_<~+。
本节最主要是让大家知道jQuery需要考虑的情况非常多（很多脏活）。即时简化了代码，依然还是这么长。
写完后，发现show还有一种情况没考虑：
div{ display:none !important; } <div>大家自己开脑洞，怎么处理吧(⊙０⊙)</div>
您可能感兴趣的文章: