第1章 JQuery基础

jQuery 库为共同的 web 脚本提供了一种通用的抽象层，并且它几乎在每种脚本环境都是有用的。它的可扩展性意味着我们无法在一本书里涵盖所有可能的用途与功能，它以插件的形式持续地通过开发加入新的功能。这核心的特性，虽然满足以下的需求：

获取页面的部分内容，不使用 JavaScript 库，必须写很多行代码来遍历 DOM 树，并定位

一一个HTML文档的指定部分。jQuery 提供了一个强大而有效的选择机制来返回被检查或者被操作的文档。

修改页面的外观，CSS 提供了一个影响文档渲染的强大方法，当 web 浏览器不支持同样的标准时，它却是不尽人意的。jQuery 能弥补这个差距，提供了跨所有浏览器的同样的标准的支持。另外，即使页面被渲染后，jQuery 仍可改变文档一部分中的类或者独立的样式属性。

修改页面的内容，不仅限于外观的改变，jQuery 还可以用很少的按键就可修改文档的内容本身。文本可改变，图像可插入或替换，列表可重新排序或者整个HTML结构可被重写和扩展，完成这些只需一套非常易用的 API 函数。

在页面中响应用户的交互，当它们发生时，如果我们不能控制，即使是最周密最强大的行为也是没有用的。jQuery 库提供了一个优雅的方法来截取多种事件，例如用户单击链接，我们需要将事件句柄混杂到 HTML 代码中。同时，事件句柄 API 删除浏览器不一致性，往往会让 web 开发者感到很烦恼。

给页面加上动画，为 了有效地执行交互行为，设 计师必须提供可视的反馈给用户，j Query 库提供了一组效果来推进它，效果如褐色，清空来，也可定制一套新的工具。无刷新返回服务器端的信息，这个代码模式已经以 Asynchronous JavaScript and XML(AJAX) 著称了，并协助 web 开发者制作可响应的功能丰富的网站。

简化共同的 JavaScript 任务，除了 jQuery 指定的文档的所有特性外，这个库还提供了改进基本的 JavaScript 结构，如秩代和数组操作。

 

1. 引言

在开始学习之前，请大家下载JQuery框架（官方网站：http://jquery.com）。本课程中使用的是1.3.2版，使用的编辑工具是Visual Studio 2008（你可以选择任何编辑器）。

附注：1.3.2版JQuery框架有3个可下载的JS文件：

1. Jquery-1.3.2.js

2. Jquery-1.3.2.min.js

3. Jquery-1.3.2-vsdoc.js

其中，jquery-1.3.2通常称作标准版，文件中JS的可读性比较强，并且有相应的注释部分，但文件较大（118K），影响网站的吞吐量。Jquery-1.3.2.min通常称作“迷你”版，文件删除了标准版中所有非JS所必须的字符（包括：注释，换行等），文件比较小（56K），下载教快，但可读性非常差。所以这2个版本我们都需要，标准版供开发（或学习）时使用，MIN版在发布时使用。最后，jquery-1.3.2-vsdoc是供VS 2008的智能提示所使用的，称作文档版。值得注意的是，Visual Studio 2008初始并不支持JQuery框架的智能提示，需要2个补丁文件：

1. Visual Studio 2008 SP1 补丁

2. VS90SP1-KB958502 补丁

所有下载（配置）完成后，打开VS 2008，创建一个HTML文件（暂时，请大家不要创建Web应用程序），在页面中引用JQuery标准版的JS（注意：在Html页面中，之需要引用标准版或MIN版即可，文档版不需要引用）。

我们的页面代码如图1-1：

图1-1

在浏览器中打开该页面，如果看到呈现出的“Hello World.”的二级标题，恭喜你，JQuery框架已经可以在你的程序中使用了！

 

2. JQuery 核心函数

在上一节的测试代码中，相信大家一定注意了这一行$("h2").text("Hello World.")；也就是这行代码，使得H2的内容变成了“Hello World.”。这一行就是JQuery通常的代码格式，我们就从这里学起。

具备一定编程基础的人都应该清楚，任何程序都是用来处理一定的逻辑（业务逻辑或程序逻辑），我们只要知道了要做什么，理论上，使用任何编程语言都可以去实现，所不同的只是语法或使用的框架。

题目：使用JavaScript编写代码，找出文档中所有H2标签，并将每一个标签的内容设置为“Hello World”，这也正是前面的JQuery代码所实现的功能。请大家试着使用JavaScript实现，同时与前面的JQuery代码做一对比。可见，虽然代码不同，但本质上是一样的，基于JQuery框架的代码更为简洁，效率更加高效。

其实，JQuery框架是依赖于JavaScript的一个工具！

我们再接着分析，要处理页面中的HTML元素，首先要找出来这些元素，上面的JQuery代码中，$(“h2”)就是实现的查找功能，test(“”)实现的是设置元素文本的功能。这里，该如何理解这个$符号呢？

 

1) jQuery(expression, [context]) 函数

该函数为JQuery框架中最为重要的函数之一，用于在HTML页面中查找我们所需要的元素，expression为查找条件（在第2章中将详细介绍），context为可选参数，表示查找的范围（在context所表示的元素的所有子元素中查找），如果context没有指定，则从整个文档（document）中查找。例如jQuery(“h2”)，表示从整个文档中查找标签为h2的所有元素。

JQuery框架的初学者往往有这种感觉：JQuery框架独立于JavaScript，于JavaScript无关，甚至完全不知道jQuery(expression,[context])就是一个函数。这里请大家注意，JQuery框架本身就是使用的JavaScript语言，所以JQuery框架中的所有功能都遵循JavaScript的语法，当然包括jQuery(expression,[context])函数。

jQuery(expression,[context])既然是函数，当然可能有返回值，该方法的返回值为JQuery对象。请大家记住“JQuery 对象”这个词，对我们后面的学习非常重要。

我们前面看到的$又是个什么呢？可能是这个字符本身欺骗了我们，首先，我们从JavaScript的语法说起，函数名字由字符组成，$也是个字符，就这样成了函数名。其实，从它的用法也可以看出，$符号后面跟的可是一对圆括号“（）”，这就是函数的象征。那么，$方法作用是什么呢？

题目：在C#语言中，请说出int于Int32的关系。

看到这个题目，可能很对朋友会侃侃而谈，兴奋的说了好几分钟。其实，答案只需一句话就能说清楚，int和Int32完全相同（有异议的朋友，你可以自行测试，并建议你相信我们教材）。int和Int32是一种别名关系，也就是说，int是Int32的别名，请大家自己体会“别名”的意义。

$就是jQuery的别名。所以我们的jQuery(expression,[context])完全可以写成$(expression,[context])这种格式，两者没有任何区别。

 

2) jQuery(html,[ownerDocument]) 函数

介绍这个方法之前，我们先回忆一个总所周知的：document.createElement(html)，它的作用是创建参数“html”所制定的元素，并将该元素返回（注意，被创建的新元素在DOM中并不存在，而是处于游离的一种状态，你可以将该元素添加到DOM中）。

jQuery(html,[ownerDocument])函数的作用于document.CreateElement(html)极为相似，也是创建参数“html”所指定的元素，不同的是，它的返回值并不是一个HTML元素对象，而是JQuery对象（HTML Element的封装，慢慢的大家就体会到了）。第2个参数ownerDocument可选，表示新建的元素所在的文档（主要用于框架Frame中），同document.createElement(html)一样，被创建的元素也处于游离状态。

参数html取值十分灵活，可以是一段合法的HTML代码，如：

jQuery(“<div/>”)

jQuery(“<div></div>”)

jQuery(“<div>Hello</div>”)

jQuery(“<div><h2>Hello</h2></div>”)

值得注意的是，参数html的必须规范，强烈建议使用封闭的标签。另外，该方法的返回值不同于document.createElement(html)，不能作为HTML元素直接使用。

其实，jQuery(html)于document.createElement(html)是有关系的，如下面代码所示：

jQuery(html)等价于jQuery(document.createElement(html))。可能你会搞不明白，请接着学习下一个JQuery核心函数。

 

3) jQuery(elements) 函数

我们前面多次提到“JQuery对象”，那么JQuery对象到底是一个什么样子呢？我们知道，网页内容部分（除去样式、脚本）是由HTML元素组成，通过JS操作网页的过程其实就是在操作HTML元素。HTML元素给我们提供了许多有用的方法和属性，但是，当你觉着这些方法或属性不够用、或者功能不够强大的时候，你会如何处理呢？

.NET Framework 框架为开发者提供了许多强有力的功能，但这些功能有一个目标是一致的，就是重用，重用性太强，就会丧失它们的个性。当你觉着框架中的一个类型功能不够用的时候（比如List<Product>类型，你希望统计所有Product的总价格），你又该如何处理？在.NET Framework中，相信大家至少应该可以想到两种方法：

一． 创建一个派生类，提供你需要的功能

二． 创建一个包装类，隐藏你不需要的功能、同时添加你需要的功能

如果基于.NET Framework 3.0开发，我们还可以使用“扩展方法”……。

JQuery框架的开发者们觉着，HTML元素的功能还不够强大，使用起来又比较繁琐，他希望去做一些事情！同我们的想法差不多，他们正是使用的上面第二中方法“包装”，使用包装隐藏那些繁琐的功能，同时提供更强有力的功能。

JQuery对象就是HTML元素的包装，通过JQuery对象的众多方法，可以十分方便、高效的操作它所包装的HTML元素。另外，希望大家注意，JQuery对象对包装的元素个数、类型是没有限制的，它可以包装一个HTML元素、也可以包装多个，而且这多个可以是不同类型的元素。

当我们已经通过某种手段获取到了HTML元素（比如：document.getElementById(id);），如果希望使用JQuery来出来该元素，我们第一步就需要创建包装该HTML元素的包装，那么，jQuery(elements)函数就能满足我们的需求。

到这里，相信大家已经能够清楚jQuery(document.createElement(html))的功能为什么与jQuery(html)相同了。

 

4) jQuery(callback) 函数

大家需要先理解“回调”是一个什么东西！

在JavaScript中，“回调”首先是一个函数，于我们平时使用的函数结构上没有任何区别，通常又被称为“回调函数”。回调函数于普通函数不同在于，回调函数的调用位置，它通常不是被随意调用的，是当一个对象（或一段程序）满足一定要求时，有对象来调用。

上面的解释可能比较抽象（但，这是资料上比较权威的说法），我们再解释解释，看一下如下的代码（图1-2）：

图1-2

在上面代码十分容易理解，运行该网页，点击“Set Text”按钮，就会执行setText函数，我们通常将setText叫做按钮的Click事件处理程序。setText函数不会被随意的在任何位置调用，只有当按钮被点击时才会执行（被按钮对象调用）。

“回调函数”于事件处理程序道理是一样的，都强调一个“调用时刻”，在本课程中不打算去区分“回调函数”与“事件处理函数”，我们通称为“回调”。

页面中HTML元素的事件这个概念，相信大家比较清楚，看下面代码（图1-3）：

图1-3

上面代码中，注册了一个Load事件，在页面加载完成后将会触发该事件（onLoad函数，就是Load事件的回调函数）。在客户端（JavaScript）编程中，Load事件十分重要，它给我们程序提供了一个程序执行的时刻（页面加载完毕），在这个时刻，表示页面中所有的元素已经可以被访问，遗憾的是，我们很难注册多于一个Load事件，所以常常可能导致Load事件中的代码多或者乱。

Load事件在JQuery当然也会用到，而且JQuery很好的解决了“Load事件数量的限制”，jQuery(callback)就是用于定义该种事件，在Load时刻执行，代码如下（图1-4）：

图1-4

注意，body标签中的onload事件注册已经不存在了。

 

3. JQuery对象中的元素访问

我们前面学习了JQuery的核心函数，大家应该能够注意到，前三个核心函数都是想办法创建出来一个“JQuery对象”，进行包装HTML元素，以便对HTML元素进行操作，最后一个核心函数提供了一个重要的程序执行时刻（加载完毕），也是为了处理“JQuery对象”而设置的。

我们得到了“JQuery对象”之后，该如何处理它们呢？

JQuery框架中提供了很多“JQuery对象”的处理函数，后面章节将会给大家逐个介绍，本节主要学习“JQuery对象”中所包装的“HTML元素”的访问方法。

在.NET中，相信大家对“装箱”和“拆箱”这两个概念并不陌生，如果将JQuery核心函数称为对HTML元素的装箱过程，那么本节的JQuery对象访问则是对HTML元素的拆箱过程。

 

1) each(callback) 函数

在C#中，针对一个集合的迭代，我们可能最常用的就是foreach，使用foreach可以方便的操作集合中的每一个元素（图1-5）：

图1-5

从集合users中，分别取出每一个UserInfo对象，并调用ProcessUser方法进行处理。

现在需要找出一个网页中所有的H2元素，并将其字体样式设置为红色，我们该如何编写代码呢？经过分析不难发现，这个代码的逻辑与上面C#代码的逻辑是一样的，首先需要找出网页中所有的H2元素，用一个集合（或数组）保存，再迭代该集合，对每一个元素执行样式设置。

要取出所有的H2元素十分简单，可以使用前面学习过的第一个JQuery核心函数，编写JavaScript代码：jQuery(“H2”)就可以轻松得到。方法返回一个“JQuery对象”，该对象包装了页面中所有的H2元素。

each(callback)是对JQuery对象中所包含的每一个HTML元素进行迭代，针对每一个元素，执行callback回调函数。

回调函数的签名：

参数：整数，表示当前元素在集合中的下标（位置），从0开始。

返回值：Boolean类型，返回false时结束循环（类似C#中返回break）。

隐式对象：this，表示当前元素，在回调函数中可以直接使用。

清楚了each(callback)，我们接着完成上面功能，完善后的代码如下（图1-6）：

图1-6

现在可以使用浏览器打开该页面，会发现页面中所有H2标签的字体都为红色（虽然，上面代码中只有一个H2标签）。

上面代码中，我们只是对当前元素做简单的操作（修改样式），如果我们希望完成的功能HTML元素没有直接提供（或使用起来比较复杂），JQuery允许在每一个HTML元素上继续使用JQuery的功能，方法十分简单，这就是第二个JQuery核心函数所做的事情。可以直接使用jQuery(elements)对HTML元素进行封装：jQuerh(this)或者$(this)。有了JQuery对象后，你真的可以“为所欲为”，代码如下（图1-7）：

图1-7

 

5) size() 函数

函数返回JQuery对象所包含的HTML元素个数，与JQuery对象的length属性的结果一致。

现在要做一个JavaScript函数，用于统计页面中所有图片的个数，和所有超链接的个数，使用JQuery是十分方便的（图1-8）：

图1-8

 

6) get 函数

顾名思义，get函数用于获取JQuery对象中HTML元素的引用。JQuery框架中一共有两个重载的get函数：

1. get()：返回一个HTML元素数组，获取JQuery对象中所有的HTML元素的集合。

2. get(index)：返回第index个HTML元素，下标从0开始。

值得注意的是：get()方法所返回的是HTML元素的集合，类似于拆箱操作，与JQuery对象已经没有任何关系（当然，你可以再次装箱），不能在该返回值上继续使用JQuery的功能。

 

7) 其它

除了以上四个主要的对象访问函数外，JQuery(1.3.2)版中还有一个函数和三个属性，分别为：

length属性：前面已经介绍，于size()方法返回结果一致。

selector属性：返回当前JQuery对象的“选择器”（如：$(“h2”).selector的返回值等于“h2”）。

Context属性：返回传给jQuery()的上下文，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)，对开发人员比较有用。

index(object)方法：搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1

 

4. 数据缓存

在应用程序中（或一个网页中），我们总是需要在不同的作用域传递数据，即在一个地方保存数据，在另一个位置取出数据。像JSP中的PageContext、Request、Session、Application等都是用于存储数据的，这样的位置通常被称作“作用域”或“数据缓存”。

在JavaScript编程时，我们有时也需要在不同区域共享数据，比如定义一个全局的变量。但大量的全局变量对结构化的代码十分不利，为解决这一问题，JQuery框架中定义了“数据缓存”或称作“作用域”这样的一个对象，并提供了访问该对象的一些方法。

针对数据的基本操作共有四种，即：增、删、改、查。JQuery中的“数据缓存”操作也不例外，共有三个函数实现这四种操作。

 

1) data(element, name) 函数

参数element：保存到得作用域。

参数name：字符串类型。

返回JQuery“数据缓存”中储存的相应名字的数据，可以用data(element, name, value)来设定。如果JQuery“数据缓存”中没有找到匹配的元素，将返回undefined。

 

8) data(element, name, value) 函数

参数element：保存到得作用域。

参数name：字符串类型。

参数value：任意类型

在JQuery“数据缓存”中添加、或修改数据。如果“数据缓存”中没有找到name所指向的数据，则将name、value添加到“数据缓存”中，否则修改name所指向数据为value。

 

9) remove(element, name) 函数

参数element：保存到得作用域。

参数name：字符串类型。

从JQuery“数据缓存”中移除name所指向的数据（图1-9）。

图1-9

转载于:https://www.cnblogs.com/netEagle/articles/1502306.html