jQuery动态网页设计案例课堂

零基础、入门级的讲解

　　无论您是否从事计算机相关行业，无论您是否接触过jQuery动态网页设计，都能从本书中找到适合的起点。

超多、实用、专业的范例和项目

　　本书在编排上紧密结合深入学习网页制作技术的先后过程，从JavaScript的基本概念开始，带领大家深入地学习各种应用技巧，侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者读起来简明轻松，操作起来有章可循。

随时检测自己的学习成果

　　内容讲解章节后的“疑难解惑”板块，均根据本章内容精选而成，从而帮助读者解决自学过程中常见的疑难问题。

细致入微、贴心提示

　　本书在讲解过程中，在各章中使用了“注意”“提示”“技巧”等小贴士，使读者在学习过程中更清楚地了解相关操作、理解相关概念，并轻松掌握各种操作技巧。

专业创作团队和技术支持

　　您在学习过程中遇到任何问题，可加入QQ群(案例课堂VIP)进行提问，专家人员会在线答疑。

超值资源大放送

全程同步教学录像

　　涵盖本书所有知识点，详细讲解每个实例及项目的过程及技术关键点。比看书更轻松地掌握书中所有的网页制作和设计知识，而且扩展的讲解部分使您得到比书中更多的收获。

超多容量资源

　　赠送大量资源，包括实例源代码、教学幻灯片、本书精品教学视频、88个实用类网页模板、12部网页开发必备参考手册、jQuery参考手册、JavaScript函数速查手册、精选的JavaScript实例、CSS 3属性速查表、CSS DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析、Web前端工程师常见面试题等。读者可以通过QQ群(案例课堂VIP)获取赠送资源，也可以扫描二维码，下载本书资源。

《jQuery动态网页设计案例课堂》以零基础讲解为宗旨，用实例引导读者深入学习，采取“基础入门→核心技术→移动网页开发→项目实战”的讲解模式，深入浅出地讲解jQuery的各项技术及实战技能。

《jQuery动态网页设计案例课堂》第1篇“基础入门”主要内容包括：必须了解的JavaScript知识、深入学习JavaScript对象与数组、jQuery的基础知识、jQuery的选择器等；第2篇“核心技术”主要内容包括：用jQuery控制页面、jQuery的动画特效、jQuery的事件处理、jQuery的功能函数、jQuery与Ajax技术的应用、jQuery插件开发与使用等；第3篇“移动网页开发”主要内容包括：走进jQuery Mobile、jQuery Mobile UI组件、jQuery Mobile 事件等；第4篇“项目实战”主要内容包括：开发时钟特效系统、开发动态字符演示系统、开发图片堆叠系统、开发商品信息展示系统、开发连锁酒店移动网站。

《jQuery动态网页设计案例课堂》适合任何想学习jQuery网页设计的人员，无论您是否从事计算机相关行业，无论您是否接触过jQuery，通过本书的学习均可快速掌握jQuery网页设计的方法和技巧。

前    言

　　“网站开发案例课堂”系列图书是专门为办公技能和网页设计初学者量身定制的一套学习用书。整套书涵盖网页设计、网站开发、数据库设计等方面。整套书具有以下特点。

前沿科技

　　无论是网站建设、数据库设计还是HTML 5、CSS 3、JavaScript，我们都精选较为前沿或者用户群最大的领域推进，帮助大家认识和了解最新动态。

权威的作者团队

　　组织国家重点实验室和资深应用专家联手编著该套图书，融合丰富的教学经验与优秀的管理理念。

学习型案例设计

　　以技术的实际应用过程为主线，全程采用图解和同步多媒体结合的教学方式，生动、直观、全面地剖析使用过程中的各种应用技能，降低难度，同时提升学习效率。

为什么要写这样一本书

　　随着网页对用户页面体验要求的提高，JavaScript再度受到广大技术人员的重视。jQuery是继prototype之后又一个优秀的JavaScript框架。本书将全面介绍jQuery动态网页设计的知识，主要针对动态网页设计的初学者，让读者能够快速入门和上手，同时本书还介绍比较流行的移动JavaScript框架，即jQuery Mobile。通过本书的项目演练，读者可以很快地掌握流行的工具，提高职业化能力，从而帮助解决公司与求职者的双重需求问题。

本书特色

零基础、入门级的讲解

　　无论您是否从事计算机相关行业，无论您是否接触过jQuery动态网页设计，都能从本书中找到最佳起点。

超多、实用、专业的范例和项目

　　本书在编排上紧密结合深入学习网页制作技术的先后过程，从JavaScript的基本概念开始，带领大家深入地学习各种应用技巧，侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者读起来简明轻松，操作起来有章可循。

随时检测自己的学习成果

　　内容讲解章节最后的“疑难解惑”板块，均根据本章内容精选而成，从而帮助读者解决自学过程中最常见的疑难问题。

细致入微、贴心提示

　　本书在讲解过程中，在各章中使用了“注意”“提示”“技巧”等小贴士，使读者在学习过程中更清楚地了解相关操作、理解相关概念，并轻松掌握各种操作技巧。

专业创作团队和技术支持

　　您在学习过程中遇到任何问题，可加入QQ群(案例课堂VIP)451102631进行提问，专家人员会在线答疑。

超值资源大放送

全程同步教学录像

　　涵盖本书所有知识点，详细讲解每个实例及项目的过程及技术关键点。比看书更轻松地掌握书中所有的网页制作和设计知识，而且扩展的讲解部分使您得到比书中更多的收获。

超多容量王牌资源

　　赠送大量王牌资源，包括实例源代码、教学幻灯片、本书精品教学视频、88个实用类网页模板、12部网页开发必备参考手册、jQuery参考手册、JavaScript函数速查手册、精选的JavaScript实例、CSS 3属性速查表、CSS DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析、Web前端工程师常见面试题等。读者可以通过QQ群(案例课堂VIP)451102631获取赠送资源，也可以扫描二维码，下载本书资源。

读者对象

没有任何网页设计基础的初学者。

有一定的jQuery基础，想精通jQuery网页设计的人员。

有一定的jQuery网页设计基础，没有项目经验的人员。

正在进行毕业设计的学生。

大专院校及培训学校的老师和学生。

创作团队

　　本书由刘玉红、蒲娟主编，参加编写的人员还有刘玉萍、张金伟、周佳、付红、李园、郭广新、侯永岗、王攀登、刘海松、孙若淞、王月娇、包慧利、陈伟光、胡同夫、王伟、展娜娜、李琪、梁云梁和周浩浩。在编写过程中，我们竭尽所能地将最好的讲解呈现给读者，但也难免有疏漏和不妥之处，敬请不吝指正。若您在学习中遇到困难或疑问，或有任何建议，可写信至信箱[email protected]。

　　                                                     
编  者  

第2章  深入学习JavaScript对象与数组

对象是JavaScript最基本的数据类型之一，是一种复合的数据类型，它将多种数据类型集中在一个数据单元中，同时允许通过对象名来存取这些数据的值。数组是JavaScript中唯一用来存储和操作有序数据集的数据结构。本章主要介绍对象与数组的基本概念和基础知识。

2.1　了 解 对 象

在JavaScript中，对象包括内置对象、自定义对象等多种类型，使用这些对象，可大大简化JavaScript程序的设计，并提供直观、模块化的方式进行脚本程序开发。

2.1.1　什么是对象

对象(Object)是一件事、一个实体、一个名词，是可以获得的东西，是可以想象有自己标识的任何东西。对象是类的实例化。有些对象是活的，有些对象不是。以自然人为例，我们来构造一个对象，其中Attribute表示对象属性，Method表示对象行为，如图2-1所示。

在计算机语言中也存在对象，可以定义为相关变量和方法的软件集。对象主要由下面两个部分组成。

(1)一组包含各种类型数据的属性。

(2)允许对属性中的数据进行的操作，即相关方法。

以HTML文档中的document对象为例，其中包含各种属性和方法，如图2-2所示。

图2-1  对象的属性和行为

图2-2  以HTML文档中的document

为例构造的对象

凡是能够提取一定的度量数据，并能通过某种方式对度量数据实施操作的客观存在都可以构成一个对象。可以用属性来描述对象的状态，使用方法和事件来处理对象的各种行为。

(1)属性。用来描述对象的状态，通过定义属性值来定义对象的状态。在图2-1中，定义了字符串Nationality来表示人的国籍，所以Nationality成为人的某个属性。

(2)方法。针对对象行为的复杂性，对象的某些行为可以用通用的代码来处理，这些代码就是方法。在图2-2中，定义了Open()方法来处理文件的打开情况。

(3)事件。由于对象行为的复杂性，对象的某些行为不能使用通用的代码来处理，需要用户根据实际情况来编写处理该行为的代码，该代码称为事件。

JavaScript是基于对象的编程语言，除循环和关系运算符等语言构造之外，其所有的特征几乎都是按照对象的方法进行处理的。

JavaScript支持的对象主要包括以下4种。

(1)JavaScript核心对象。包括基本数据类型的相关对象(如String、Boolean、Number)、允许创建用户自定义和组合类型的对象(如Object、Array)和其他能简化JavaScript操作的对象(如Math、Date、RegExp、Function)。

(2)浏览器对象。包括不属于JavaScript语言本身但被绝大多数浏览器所支持的对象，如控制浏览器窗口和用户交互界面的Window对象、提供客户端浏览器配置信息的Navigator对象。

(3)用户自定义对象。Web应用程序开发者用于完成特定任务而创建的自定义对象，可自由设计对象的属性、方法和事件处理程序，编程灵活性较大。

(4)文本对象。由文本域构成的对象，在DOM中定义，同时赋予很多特定的处理方法，如insertData()、appendData()等。

2.1.2　面向对象编程

面向对象程序设计(Object-Oriented Programming，OOP)是一种起源于20世纪60年代的Simula语言，其自身理论已经十分完善，并被多种面向对象程序设计语言实现。面向对象编程的基本原则是：计算机程序由单个能够起到子程序作用的单元或对象组合而成。面向对象编程具有3个最基本的特点：重用性、灵活性和扩展性。这种方法将软件程序中的每一个元素作为一个对象看待，同时定义对象的类型、属性和描述对象的方法。为了实现整体操作，每个对象都应该能够接收信息、处理数据和向其他对象发送信息。

面向对象编程主要包含如下3个重要的概念。

1．继承

继承性是子类自动共享父类数据结构和方法的机制，这是类之间的一种关系。在定义和实现一个类的时候，可以在一个已经存在的类的基础之上来进行，把这个已经存在的类所定义的内容作为自己的内容，并加入若干新的内容。继承性是面向对象程序设计语言不同于其他语言的最重要的特点，是其他语言所没有的。继承主要分为以下两种类型。

(1)在类层次中，子类只继承一个父类的数据结构和方法，则称为单重继承。

(2)在类层次中，子类继承多个父类的数据结构和方法，则称为多重继承。

在软件开发中，类的继承性使所建立的软件具有开放性、可扩充性，这是信息组织与分类的行之有效的方法，简化了对象、类的创建工作量，增加了代码重用性。

继承性提供了类规范的等级结构。通过类的继承关系，使公共的特性能够共享，提高了软件的重用性。

2．封装

封装的作用是将对象的实现过程通过函数等方式封装起来，使用户只能通过对象提供的属性、方法和事件等接口去访问对象，而不需要知道对象的具体实现过程。封装的目的是增强安全性和简化编程，使用者不必了解具体的实现细节，而只是要通过外部接口——特定的访问权限来使用类的成员。

封装允许对象运行的代码相对于调用者来说是完全独立的，调用者通过对象及相关接口参数来访问此接口。只要对象的接口不变，即使对象的内部结构或实现方法发生了改变，程序的其他部分也不用做任何处理。

3．多态

多态性是指相同的操作或函数、过程可作用于多种类型的对象上并获得不同的结果。不同的对象收到同一消息可以产生不同的结果，这种现象称为多态性。多态性允许每个对象以适合自身的方式去响应共同的消息。多态性增强了软件的灵活性和重用性。

需要说明的是：JavaScript脚本是基于对象的脚本编程语言，而不是面向对象的编程语言。其原因在于：JavaScript是以DOM和BOM中定义的对象模型及操作方法为基础的，但又不具备面向对象编程语言所必须具备的显著特征，如分类、继承、封装、多态、重载等。另外，JavaScript还支持DOM和BOM提供的对象模型，用于根据其对象模型层次结构来访问目标对象的属性并对对象施加相应的操作。

在JavaScript语言中，之所以任何类型的对象都可以赋予任意类型的数值，是因为JavaScript为弱类型的脚本语言，即变量在使用前无须任何声明，在浏览器解释运行其代码时，才检查目标变量的数据类型。