jQuery.API源码深入剖析以及应用实现

jQuery.API源码深入剖析以及应用实现(1)－核心函数篇前言Jquery()是一个轻量级，快速简洁的Javascript框架，它的容量小巧，简洁和简短的语法，容易记；用户能更方便地处理HTMLDOM、Events、实现动画效果，并且提供Ajax的支持。目前最新版本为jQuery1.3.1（），这系列文章将对该版本的源码进行阐述。现在开始本系列的第一篇，Jquery核心函数，内容主要包括：分析1.在Jquery的应用开发中，我们经常看到这样的代码：$(div.container).css(display,none);//将div节点下样式值为container的节点设置为不显示varwidth=$(div.container).width();//得到div节点下样式值为container的宽度varhtml=$(document.getElementById(result)).html();//得到id为result的节点的innerHTML值$(#result,document.forms[0]).css(color,red);//将在第一个Form节点下id为result的字体颜色设置为红色$(divhello,world/div).appendTo(#result);//将HTML字符串信息内部追加到id为result的节点末尾那么$(...)里面的参数，JqueryAPI中是怎样辨认参数是表达式，id，HTML字符串，还是DOM元素呢？现在我们来深入剖析Jquery源码。2.这里，我先来做个测试，我将JqueryAPI简化为这样的代码：(function(){varwindow=this,jQuery=window.jQuery=window.$=function(selector,context){returnnewjQuery.fn.init(selector,context);};jQuery.fn=jQuery.prototype={init:function(selector,context){alert(selector);//弹出警告框}};})();window.onload=function(){$(div.container);//得到“div.container”$(#result);//得到“#result”$(divhello,world/div);//得到“divhello,world/div”$(document.getElementById(result));//得到“[object]”}从这里我们可以得出，实际上$里面的参数(表达式字符串，ID字符串，HTML字符串，DOM对象)，主要就是在init方法中各自实现它们自己的逻辑。现在列出init方法的具体实现：init:function(selector,context){//Makesurethataselectionwasprovidedselector=selector||document;//Handle$(DOMElement)if(selector.nodeType){this[0]=selector;this.length=1;this.context=selector;returnthis;}//HandleHTMLstringsif(typeofselector===string){//ArewedealingwithHTMLstringoranID?varmatch=quickExpr.exec(selector);//Verifyamatch,andthatnocontextwasspecifiedfor#idif(match&&(match[1]||!context)){//HANDLE:$(html)-$(array)if(match[1])selector=jQuery.clean([match[1]],context);//HANDLE:$(#id)else{varelem=document.getElementById(match[3]);//HandlethecasewhereIEandOperareturnitems//bynameinsteadofIDif(elem&&elem.id!=match[3])returnjQuery().find(selector);//Otherwise,weinjecttheelementdirectlyintothejQueryobjectvarret=jQuery(elem||[]);ret.context=document;ret.selector=selector;returnret;}//HANDLE:$(expr,[context])//(whichisjustequivalentto:$(content).find(expr)}elsereturnjQuery(context).find(selector);//HANDLE:$(function)//Shortcutfordocumentready}elseif(jQuery.isFunction(selector))returnjQuery(document).ready(selector);//Makesurethatoldselectorstateispassedalongif(selector.selector&&selector.context){this.selector=selector.selector;this.context=selector.context;}returnthis.setArray(jQuery.makeArray(selector));}3.现在分析表达式，id，HTML字符串，DOM元素等等各自的实现：1）形如$(document.getElementById(result))【jQuery(elements)】DOM元素的实现，通过init方法中的以下代码：//Handle$(DOMElement)if(selector.nodeType){this[0]=selector;this.length=1;this.context=selector;returnthis;}selector.nodeType判断当selector为元素节点时，将length置为1，并且赋值于context，实际上context作为init的第二个参数，它意味着它的上下文节点就是selector该点，返回它的$(...)对象。2）形如$(divhello,world/div)【jQuery(html,[ownerDocument])】HTML字符串的实现，通过init方法中的以下代码：//判断selector为字符串if(typeofselector===string){//quickExpr=/^[^]*((.|s)+)[^]*$|^#([w-]+)$///利用检查正则表达式HTML字符串还是元素ID字符串varmatch=quickExpr.exec(selector);if(match&&(match[1]||!context)){//处理HTML字符串if(match[1])selector=jQuery.clean([match[1]],context);//处理形如$(#id)else{//……}}//处理形如$(div.container)的表达式字符串else//……}//处理形如$(function)，$(document).ready(function(){})的表示elseif(jQuery.isFunction(selector)){}//……关键看到这样的一句代码，selector=jQuery.clean([match[1]],context);继续查看clean都做了些什么：clean:function(elems,context,fragment){context=context||document;//!context.createElementfailsinIEwithanerrorbutreturnstypeof'object'if(typeofcontext.createElement===undefined)context=context.ownerDocument||context[0]&&context[0].ownerDocument||document;//Ifasinglestringispassedinandit'sasingletag//justdoacreateElementandskiptherestif(!fragment&&elems.length===1&&typeofelems[0]===string){varmatch=/^(w+)s*/?$/.exec(elems[0]);if(match)return[context.createElement(match[1])];}varret=[],scripts=[],div=context.createElement(div);jQuery.each(elems,function(i,elem){if(typeofelem===number)elem+='';if(!elem)return;//ConverthtmlstringintoDOMnodesif(typeofelem===string){//FixXHTML-styletagsinallbrowserselem=elem.replace(/((w+)[^]*?)//g,function(all,front,tag){returntag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i)?all:front+/+tag+;});//Trimwhitespace,otherwiseindexOfwon'tworkasexpectedvartags=jQuery.trim(elem).toLowerCase();varwrap=//optionoroptgroup!tags.indexOf(opt)&&[1,selectmultiple='multiple',/select]||!tags.indexOf(leg)&&[1,fieldset,/fieldset]||tags.match(/^(thead|tbody|tfoot|colg|cap)/)&&[1,table,/table]||!tags.indexOf(tr)&&[2,tabletbody,/tbody/table]||//theadmatchedabove(!tags.indexOf(td)||!tags.indexOf(th))&&[3,tabletbodytr,/tr/tbody/table]||!tags.indexOf(col)&&[2,tabletbody/tbodycolgroup,/colgroup/table]||//IEcan'tserializelinkandscripttagsnormally!jQuery.support.htmlSerialize&&[1,divdiv,/div]||[0,,];//Gotohtmlandback,thenpeeloffextrawrappersdiv.innerHTML=wrap[1]+elem+wrap[2];//Movetotherightdepthwhile(wra