第2章jquery原理与运行机制

第2章jQuery原理与运行机制学习jQuery的原理与运行机制有助于更好理解jQuery的核心选择器功能并更合理的使用jQuery选择器；有助于利用jQuery创建出高效的动画效果。下面将学习jQuery所需要的基本知识点进行讲解，包括JavascriptBOM、JavascriptDOM、Ajax等内容。2.1Javascript的浏览器对象模型BOM操作BOM是浏览器对象模型的简称。Javascript将整个浏览器窗口按照实现的功能拆分成若干个对象，这样Javascript语言就可以以对象的形式来操作浏览器。在一个完整的BOM中，主要包括Window、Navigator、Screen、History、Location、Document等对象。其中，Document和Location对象既属于BOM也属于DOM。Window对象是整个BOM的顶层对象。各个对象所处位置关系如图1和图2所示。图1图2

2.1.1Window对象——窗口对象Window对象包含浏览器打开的窗口，也包括框架窗口。这个对象的属性和方法如表1和表2所示。

表1

表2下面，我们用例子来说明Window对象的使用。1．打开窗口打开窗口操作主要是使用了Window对象的open()方法，并在该方法中传入需要打开的文档位置。open()方法语法形式如下：window.open(URL,name,features,replace)效果如图所示。刚才看到了简单打开一个窗口的实现。如果我们还想控制打开窗口的尺寸大小，那就需要对这个打开方法再进行加工。效果如图所示。2．设置窗口的状态栏文本这个功能是通过对Window对象的status属性设定值来实现的。status语法形式如下：window.status=sometext效果如图所示。3．改变窗口大小Window对象中为我们提供了改变当前窗口大小的函数resizeBy()和resizeTo()两个函数。resizeBy()语法形式如下：resizeBy(width,height)效果如图1和图2所示。图1图2刚才的例子是通过差值改变窗口大小，我们也可以直接给定要改变的宽度和高度值。1<scripttype="text/javascript">2 functionresizeWindow()3 {4 window.resizeTo(300,300) //调整窗口大小5 }6</script>这里我们直接指定了将窗口大小调整300像素高，300像素宽，效果如图所示。4．滚动页面文本内容Window对象支持将页面内容进行滚动的操作。scrollBy()语法形式如下：scrollBy(xnum,ynum)效果如图1和2所示。图1图25．setInterval()和setTimeout()之间的区别Window对象中的setInterval()和setTimeout()这两个函数都和计时器相关。它们之间的区别是前者执行过程是多次的，后者只执行一次。setTimeout()语法形式如下：setTimeout(code,millisec)效果如图所示。6．坐标值的获取Window对象代表窗口对象，这个对象中也涉及到了坐标获取与设置的操作。但是，在BOM中的一些坐标属性并不是所有浏览器所有版本都能够接受的。所以，当浏览器类型或版本不同时，我们需要进行判定。效果如图所示。当我们获取窗口大小的时候，同样碰到了上面提到的情况。所以，我们还是要进行浏览器类型及版本号的判断。效果如图所示。不过，现在最新版本的浏览器基本上都已经支持了Window对象的这些属性。我们来看下面这个例子。代码使用了Window对象有关坐标及窗口尺寸的相关属性。测试环境为IE9，效果如图1——4所示。图1图2图3图42.1.2Navigator对象——浏览器对象Navigator对象代表了浏览器相关信息集合。在这个对象中我们可以获取有关当前被使用的浏览器的信息内容。有关这个对象的属性及方法参考表1和表2所示。表1表2下面我们利用这个对象的属性来获取我们使用浏览器的所有信息。效果如图所示。1.Screen对象这个对象包含了用户当前使用的显示器的相关信息，其属性请参考表所示。下面我们利用它的属性来获取当前屏幕的相关信息。效果如图所示。2.History对象这个对象代表了用户访问Url的历史信息记录，它的属性和方法参考表1和表2所示。表1

表23.Location对象这个对象代表了当前访问的Url的所有信息，它的属性和方法参考表1和表2所示。表1

表22.2Javascript的HTML文档DOM操作DOM是文档对象模型的简称，Javascript通过以文档对象的形式可以对HTML文档中的所有对象进行访问操作。在jQuery中的选择器实际上和Javascript通过DOM来选取元素对象有很大关系。2.2.1什么是DOMDOM（DocumentObjectModel，文档对象模型）是Javascript中的Document方法。要改变页面的某个东西，Javascript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。DOM可被Javascript用来读取、改变HTML、XHTML以及XML文档。2.2.2DOM节点HTML文档中的每个元素都是一个节点。DOM中的规定：（1）整个文档是一个文档节点；（2）每个HTML标签是一个元素节点；（3）包含在HTML元素中的文本是文本节点；（4）每一个HTML属性是一个属性节点；（5）注释属于注释节点；如图所示。2.2.3访问文档节点访问文档节点可以动态获取或者设置各节点的显示样式、内容等信息。便于前台设计人员更好的控制页面元素。访问文档节点可以通过一些方法来实现。1．通过ID访问页面元素ID访问页面元素的语法形式如下：document.getElementById(id)效果如图所示。2．通过name访问页面元素name访问页面元素的语法形式如下：document.getElementsByName(name)效果如图所示。3．通过TagName访问页面元素TagName访问页面元素的语法形式如下：document.getElementsByTagName(tagname)效果如图所示。2.2.4节点操作刚才我们看到了如何通过Javascript来访问已有节点。下面来看一下Javascript对HTML文档节点的其它操作。1．节点信息在HTML文档中我们实际可得的节点是多样的。每个节点都有相应的属性来描述并区分不同类型的节点。Javascript通过三种属性来识别不同的节点。nodeName节点名称，nodeValue节点值，nodeType节点类型。（1）nodeName节点名称：元素节点的nodeName是标签名称。属性节点的nodeName是属性名称。文本节点的nodeName永远是#text。文档节点的nodeName永远是#document。（2）nodeValue节点值：对于文本节点，nodeValue属性包含文本。对于属性节点，nodeValue属性包含属性值。nodeValue属性对于文档节点和元素节点是不可用的。（3）nodeType节点类型：节点类型参见下表所示。我们可以获取节点本身的一些说明信息，如节点类型、节点名称、节点值等。效果如图1、2和3所示。图1图2图3

2．节点的遍历操作Javascript还提供了根据已知节点遍历相关节点的操作属性。parentNode父节点，firstChild第一个子节点，lastChild最后一个子节点。下面用两个例子来说明它们的使用。例一：下面代码使用firstChild属性，获取第一个子节点的节点值、节点类型和节点名称。效果如图所示。例二：下面代码分别使用了parentNode、firstChild和lastChild等属性。效果如图1和2所示。图1图23．节点的其它操作这里附加了一些节点其它比较有用的操作，同时这些操作也是DOM所特有的。innerHTML属性设置或返回表格行的开始和结束标签之间的HTML。效果如图所示。实际上在Javascript中还有另一个和innerHTML类似的属性是innerText。但是，innerText属性在浏览器的兼容性上只能在IE下使用，为了能设计出通用的Javascript脚本程序，希望读者尽量使用innerHTML。childNodes属性，表示当前节点的直接子节点的集合。removeChild()方法，移除子节点。appendChild()方法，添加子节点。下面用两个例子分别说明这两个方法和一个属性。例一：使用childNodes属性及removeChild()方法举例。上述代码使用了childNodes属性及removeChild()方法，效果如图1和图2所示。图1图2例二：使用文档对象来创建一个段落标记、文本节点方法、文本节点等。效果如图所示。2.3Ajax原理jQuery可以在客户端浏览器实现无刷新的情况下页面内容发生改变。但jQuery本身操作的还是浏览器上的数据。如果jQuery可以和Ajax搭配使用则会发挥更大功效。本书中很多插件也支持Ajax数据。因此，我们在这里简单介绍一下Ajax的工作原理及如何使用。2.3.1Ajax组成Ajax（AsynchronousJavaScriptandXML），它包括HTML/XHTML、CSS、DOM、XML、XSLT、XMLHttp、Javascript。它使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSLT进行数据交换与处理，使用XMLHttpRequest进行异步数据读取，用Javascript绑定和处理所有数据。2.3.2Ajax与基本Web应用工作比较以往我们浏览网页的原理是由Client向Server提交页面申请，再由Server将申请通过HTTP传回给Client生成浏览页面，如图所示。使用Ajax后的工作原理如图所示。我们也可以直接从交互时序上来观察使用了Ajax的效果，如图1和图2所示。图1图21．工作原理Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像—些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。当请求被响应时，服务器返回的数据是XML格式。由Ajax引擎进行解析然后交给浏览器显示处理。2．Ajax优点通过适当的Ajax应用达到更好的用户体验；把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。2.3.3Ajax核心对象XMLHTTPRequestAjax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据（又称无刷新更新页面），这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。我们可以参考表1和表2了解这个对象的相关属性和方法。表1

表22.3.4Ajax工作用例下面用一个例子来演示Ajax的工作过程及XMLHTTPRequest的使用方法。因为Ajax的工作是需要后台服务器支撑的，所以我们用到的这个例子要在有服务器的环境下使用。读者可以在具有IIS的计算机上测试这个例子。首先，我们来看它的Javascript源码，HTML代码请参考光盘内容。效果如图所示，当我们单击链接，显示另一个页面时，浏览器是不会刷新的。2.4jQuery工作原理jQuery在实际应用中基本是依靠它的选择器筛选匹配的页面元素对象，并调用它提供的功能函数来完成我们所需要的工作。它的编写和我们前面所看到的Javascript的编写很不一样。所以，官方在jQuery的时候引用了这样一段话：jQuery是为了改变Javascript的编码方式而设计的。下面我们用图来说明jQuery的工作原理。2.5jQuery运行机制jQuery运行机制中主要包含两个方面，一个是元素选择，一个是事件机制。2.5.1jQuery的元素选择jQuery的强大之处就在于它本身支持多种选择器样式。我们在编写jQuery应用的时候可以根据我们的要求使用不同的选择器来选择元素。下面我们来分别介绍一下它所支持的选择器：1.基本元素选择器在这种选择器的使用时，我们可以使用元素标记名，元素的类名，元素的ID来填写选择