资源描述：
《jquery链式调用与show知识浅析_jquery》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、jQuery链式调用与show知识浅析上篇文章给大家介绍了jQuery的框架，有关jquery的基础知识可以参考下。jQuery使用许久了，但是有一些API的实现实在想不通。下面将使用简化的代码來介绍，主要关注jQuery的实现思想。相较于上一篇，代码更新了：2C78(function(window,undefined){functionjQuery(sei){returnnewjQuery.prototype,init(sei);}jQuery.prototype={constructor:jQuery,init:function(sei){if(typeofsei===Jstring){v
2、arthat=this;varnodeList=document.querySelectorAll(sei);Array,prototype.forEach.call(nodeList,function(val,i){that[i]=val;})this,selector=sei;this,length=nodeList.length;}},show:function(){Array.prototype.forEach.call(this,function(node){//if(node,style)continue;//textnode没有style//删除style.上的display:n
3、onevardisplay=node,style,display;if(display==='none'){//dispaly置为空后，css如果有display则css的生效//否则默认的生效node.style,display二''；}//元素display值为非默认值情况，需要还原为oldDisplay：div->display:inline-block//或检测css上的display是否为noneif(node,style,display二二二''\isHidden(node)){//有oldDispaly则设置if(node.oldDisplay)node.style,displ
4、ay=node.oldDisplay;〃没有则设置为元素默认值或元素当前值elsenode.style,display=getDisplay(node);}})〃链式调用returnthis;},hide:functionO{Array,prototype.forEach.call(this,function(node){if(!isHidden(node)){//jQuery使用其cache机制存储信息，这里简化一下//直接挂载在对应的domb*node.oldDisplay=getDisplay(node);node,style,display='none';}})returnthis;}
5、}functiongetDisplay(node){vardisplay=window.getComputedStyle(node,null)•getPropertyValue(，display");if(display==='none'){vardom二document.createElement(node.nodeName);//插入到body中document.body,appendChild(dom);〃即可获取到元素display的默认值vardisplay=window.getComputedStyle(dom,null).getPropertyValue(5display^);d
6、ocument.body,removeChi1d(dom);}returndisplay;}functionisHidden(node){//忽略未append进document的元素这种隐藏情况:$('
block
，)未appendreturnwindow,getComputcdStyle(node,null).getPropertyValueddisplay")==='none";}jQuery.prototype.init.prototype二jQuery.prototype;window.$二jQuery;})(window);先拿hide函数热身一下。如上篇提到的
7、，jQuery会将获取到的nodeList处理成数组，所以一上來，我们用forEach处理数组里的每一个node节点。接下来，我们只需要将每一个节点的style,display置为’none里卩空藏。很简单，对吧？(G)0O)ooldDisplay和returnthis先不管X▽)、hide:function(){Array.prototype・forEach・call(this,function
