jQuery链式调用与show知识浅析.docVIP

jQuery链式调用与show知识浅析 这篇文章主要介绍了 jQuery的XX如何实现？—— 2. show与链式调用的相关资料，非常具有参考借鉴价值， 感兴趣的朋友一起学习吧 jQuery使用许久了，但是有一些API的实现实在想不 通。下面将使用简化的代码来介绍，主要关注jQuery的实 现思想。 相较于上一篇，代码更新了： 2广78 (function(window, undefined) { functionjQue ry(sel) { r eturnnewjQu ery. prototy pe. init (sel ): jQuery. p rototype={ c onstructor:jQuery, init :function(s el) { if (ty peofsel===’ string’){ va rthat=this; varnodeLi st=document . querySelec torAll (sel); Array, pr ototype. for Each, call (n odeList, fun ction(val, i ) { that [i]=v al: }) this, s elector=sel : this, len gth=nodeLis t. length; } }， show:funct ion() { Arr ay. prototyp e. forEach.c all(this, fu notion(node ) { //if (no de. style)co ntinue;//te xtnode 没有 sty le //删除 sty le 上的 display :none vard isplay=node . style, disp lay; if (di splay===’ no ne’){ //di spaly置为空后，c ss如果有displa y则css的 生效 //否则默认的生效 nod e. style, dis play=’ ’ ； //元素display值为非默认值情况，需要还原为 oldDispl ay： div-gt; d isplay: inli ne-block //或检测css上的di splay是否为non e if (node, style, displ ay===’ ’ | | is Hidden (node )) { 有oldDi spaly则设置 if (node. oldD isplay) node . style, disp lay=node. ol dDisplay; //没有则设置为元素默认值或元素当前值 els enode, style . display=ge tDisplay (no de); } }) //链式调用 returnthi s; }， hide:fu notion() { Array, proto type. forEac h.call (this , function(n ode) { if (! is Hidden (node )) { //jQue ry使用其cache机制存储信息，这里简化一下 //直接挂载在对应的dom下 node. oldDisplay=getDisplay (node); nod e. style, dis play=’ none’ ； }) returnt his; fun ctiongetDis play (node) { vardispla y=window. ge tComputedSt yle(node, nu 11). getProp ertyValue (’ display’)； if (display ===’ none’){ vardom=do cument. crea teElement (n ode. nodeNam e): //插入到bod y中 documen t. body, appe ndChild (dom ); //即可获取到元素display的默认值 vardispla y=window. ge tComputedSt yle(dom, nul 1). getPrope rtyValue (’ d isplay’)； document, bo dy. removeCh ild(dom); } r eturndispla y; } functi onisHidden(node) { //忽略未append进do cument的元素这种隐藏情况： $ (’ It; divgt: block lt;/divgt;’)未 append r eturnwindow . getCompute dStyle(node , null). getP rop