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

1、JQuery。API源代码深入分析和应用程序实现(1)-核心函数文章序言Jquery(/)是一种轻量、快速、简洁的Javascript框架，容量小、简洁、简单的语法，易于记忆；用户可以更轻松地处理HTML DOM、Events和实现动画效果，并提供Ajax支持。当前最新版本是j query 1 . 3 . 1(http:/jquery js . Google /files/jquery-1 . 3 . 1 . js)，本文介绍了该版本的源代码。让我们开始本系列的第一部分，Jquery核心函数。主要内容包括：分析1.在Jquery的应用程序开发中，

2、我们经常会看到这些代码：$(“div . container”)。CSS(“display”，“none”)；/div节点下样式值为container的节点Varwidth=$ (div.container )。width()；/div节点下的样式值将成为container的宽度var html=$(document . getelementbyid( result )。html()；/获取id为result的节点的innerHTML值$ (# result ，document.forms 0)。CSS(“color”，“red”)；/在第一个Form节点下，将id为result的字体颜色设置

3、为红色$(“hello，world”)。append to( # result )；/HTML字符串信息在内部添加到id为result的节点的末尾然后$(.)内的参数，在Jquery API中，如何知道参数是表达式、id、HTML字符串还是DOM元素？现在，我们深入分析一下Jquery源。2.我在这里测试一下。Jquery API已简化为以下代码：(function()Varwindow=this，Jquery=window.jquery=window。$=function (selector，context) return new jquery . fn . init(selector，co

4、ntext)；JQuery.fn=jQtotype=Init : function (selector，context) Alert(选择器)；/弹出警告框)()；Window.onload=function()$(“div . container”)；/获取“div.container”$( # result )；/结果“#result”$(“hello，world”)；/获得“hello，world”$(document . getelementbyid( result )；/结果object由此可见，$内的参数(表达式字符串、ID字符串、HTML字符串、DOM对象)实际上

5、主要是在init方法中实现各自的逻辑。现在列出了init方法的具体实现。Init : function (selector，context) /makesurethataselectionwaprovidedSelector=selector | | document/Handle$(DOMElement)If(selector.nodeType)this0=selector；this . length=1；This.context=selectorReturnthis/HandleHTMLstringsif(type of selector= string )/arewedealingwit

6、htmlstringoranid？var match=quickexpr . exec(selector)；/verifyamatch，andthat nocontextwaspecifidfor # idIf (match 1 | |！上下文(context)/HANDLE:$(html)-$(array)If(match1)selector=jquery . clean(match1，context)；/HANDLE:$(#id )Elsevarelem=document . getelement byid(match3)；/handleethecaseweindoperareturnit

7、ems/bynameinsteadofIDIf(elemelem.id！=match3)ReturnjQuery()。find(选择器)；/otherwise，weinjecttheelementdirectlyintthejqueryobjectvarret=jQuery(elem | |)；Ret.context=documentRet.selector=selectorReturnret/HANDLE:$(expr，context)/(whichisjust equivalents to : $(content)。find (expr)elseReturn jquery (context

8、)。find(选择器)；/HANDLE:$(function)/Shortcutfordocumentready else if(jquery . is function(selector)Return jquery (document)。ready(选择器)；/makesurethatoldelectorsetspassedalongIf (selector.selector.context) this . selector=selector . selector；this . context=selector . context；return this . setarray(jquery

9、. makearray(selector)；3.现在分析表达式、id、HTML字符串、DOM元素等的每个实现。1)通过init方法中的以下代码，使用$(document . getelementbyid( result )jquery(elements)/Handle$(DOMElement)If(selector.nodeType)this0=selector；this . length=1；This.context=selectorReturnthis当Selector是元素节点时，Selector.nodeType将length设置为1，为context分配值，context实际上用作i

10、nit的第二个参数。也就是说，上下文节点是选择器点，并且其$(.)返回对象。2)在init方法中，通过以下代码实现$ (hello，world) jquery (html，owner documenthtml字符串：/selector被解析为字符串if(type of selector= string )/quickexpr=/ *(.| s) * $ | # (w-) $/正则表达式检查HTML字符串或元素ID字符串var match=quickexpr . exec(selector)；If (match 1 | |！上下文(context)/HTML字符串处理If(match1)sele

11、ctor=jquery . clean(match1，context)；/处理等于$(“# id”)Else/.处理表达式字符串，例如/$(“div . container”)Else/./$(function)、$(document)。处理ready(function()等表示法else if(jquery . is function(selector)/.selector=jquery . clean(match1，context)。继续检查Clean所做的工作。Clean :功能(elems、context、fragment)、Context=context | | document/！

12、context . createelementfailsiniewithinerrorbutreturnstypeofobjectif(type of context . create element= undefined )context=context . owner document | | context0context0。ownerdocument | | document/ifasinglestringispassedinanditsasingletag/justdoaceaderelementandskiptherestIf(！fragment elems . length=1

13、type of elems0= string )Varmatch=/(w) s */？$/.exec(elems0)；If(match)returncontext . create element(match1；Varret=和scripts=div=context . create element( div )；Jquery.each (elems，function (I，elem)、if(type ofelem= number )elem=；If(！Elem)Return/converthtmlstringintdomnodesIf (type of elem= string) /fix“XHTML”-stylegsinallbrowseerselem=elem . replace(w)*？)/g，function (all，front，tag)，return tag . match(/(abbr | br | col | img | input | link | meta | param | HR | area | embed)$/All:Front tag)；/trim white space，otherwiseindexofwontworkasexpectedVar tags=jquery.trim (ele