JavaScript与jQuery网页前端开发与设计

知识点全面，体系结构清晰，重点突出、文字准确，内容组织循序渐进，并有书中案例都是以*新标准为基础，介绍JavaScript与jQuery的*新发展，且在实际开发工作中经常碰到的问题在案例中都有体现，更贴近实用。

本书从零开始讲解JavaScript与jQuery技术，全书以项目为驱动，循序渐进、案例丰富。全书共分13章，主要内容包括4个部分。第一部分是概述篇，即第1章，内容主要有JavaScript与jQuery的简介、发展史和特点，以及开发工具的选择。第二部分是JavaScript技术篇，包括第2～5章的内容。这4章循序渐进地介绍了JavaScript入门、JavaScript数据类型与运算符、JavaScript语句与函数、JavaScript DOM和BOM。第三部分是jQuery技术篇，包括第6～12章的内容。这7章由浅入深地介绍了jQuery入门、jQuery选择器与过滤器、jQuery事件、jQuery特效、jQuery HTML DOM、jQuery遍历、jQuery AJAX技术。第四部分是综合篇，即第13章，其中提供了3个完整的项目实例，包括图片轮播、手动切换图片、AJAX天气预报查询功能的设计与实现，综合应用了全书所学知识，让读者所学即所用。

　　本书可作为高校计算机相关专业JavaScript和jQuery课程的实践教材，也可作为学习JavaScript和jQuery开发的自学教材或培训教材。

JavaScript数据类型与运算符

　　本章主要内容是JavaScript数据类型与运算符，主要包括基本数据类型、对象、类型转换、运算符的用法。

　　　本章学习目标：

* 掌握JavaScript的基本数据类型与对象类型；

* 掌握JavaScript类型转换方法；

掌握JavaScript运算符的使用。*

3.1 JavaScript基本数据类型

　　JavaScript有5种原始类型，分别是Number（数字）、Boolean（布尔值）、String（字符串）、Null（空值）和Undefined（未定义）。

　　JavaScript提供了typeof方法用于检测变量的数据类型，该方法会根据变量本身的数据类型给出对应名称的返回值。其语法格式如下。

typeof 变量名称

　　对于指定的变量使用typeof方法，其返回值是提示数据类型的文本内容，常见5种情况，如表3-1所示。

表3-1 typeof方法的常见返回值一览表

返 回 值

示 例

解 释

　　　　　undefined

　　　　var x;

　　　　alert(x);

　　　该变量未赋值

　　　　　boolean

　　　　var x = true;

　　　　alert(x);

　　　该变量为布尔值

　　　　　string

　　　　var x = "Hello";

　　　　alert(x);

　　　该变量为字符串

　　　　　number

　　　　var x = 3.14;

　　　　alert(x);

　　　该变量为数值

　　　　　object

　　　　var x = null;

　　　　alert(x);

　　　该变量为空值或对象

3.1.1 Undefined类型

　　所有Undefined类型的输出值都是undefined。若需要输出的变量从未声明过，或者使用关键字var声明过但是从未进行赋值，此时会显示undefined字样。例如：

alert(y); //返回值为undefined，因为变量y之前从未使用关键字var进行声明

或

var x;

alert(x); //返回值也是undefined，因为未给变量x赋值

　　【例3-1】 JavaScript基础数据类型Undefined的简单应用

1.

2.

3.

4.

5.

6.

7.

8.

JavaScript变量之Undefined类型

9.

10.

16.

17.

　　运行效果如图3-1所示。

图3-1 JavaScript基础数据类型Undefined的简单应用效果

　　【代码说明】

　　本例使用关键字var声明了变量msg，但未对其进行初始赋值就直接使用alert(msg)方法要求在对话框中显示该变量内容。由图3-1可见，此时显示出来的结果为undefined。

3.1.2 Null类型

　　null值表示变量的内容为空，可用于初始化变量，或者清空已经赋值的变量。例如：

var x=99;

x=null;

alert(x); //此时返回的值是null而不是99

　　【例3-2】 JavaScript基础数据类型Null的简单应用

1.

2.

3.

4.

5.

6.

7.

8.

JavaScript变量之Null类型

9.

10.

18.

19.

　　运行效果如图3-2所示。

图3-2 JavaScript基础数据类型Null的简单应用效果

　　【代码说明】

　　本例使用关键字var声明了变量msg并将其赋值为null，然后使用alert(msg)方法要求在对话框中显示该变量内容。由图3-2可见，此时显示出来的结果为null。

3.1.3 String类型

　　在JavaScript中String类型用于存储文本内容，又称为字符串类型。在为变量进行字符串赋值时需要使用引号（单引号或双引号均可）括住文本内容。例如：

var country='China';

或

var country="China";

　　与JavaScript不同的是，在Java中使用单引号声明单个字符、使用双引号声明字符串，而在JavaScript中没有区分单个字符和字符串，因此两种声明方式任选一种都是有效的。

　　如果字符串内容本身也需要带上引号，则用于包围字符串的引号不可以和文本内容中的引号相同。如果字符串本身带有双引号，则使用单引号包围字符串，反之亦然。例如：

var dialog='Today is a gift, that is why it is called "Present".';

或

var dialog="Today is a gift, that is why it is called 'Present'. ";

　　此时字符串内部的引号会默认保留字面的样式。

　　String对象中包含了一系列方法，常用方法如表3-2所示。

表3-2 JavaScript String对象常见方法一览表

方 法 名

解 释

　　charAt()

返回指定位置上的字符

　　charCodeAt()

返回指定位置上的字符的Unicode编码

　　concat()

连接字符串

　　indexOf()

正序检索字符串中指定内容的位置

　　lastIndexOf()

倒序检索字符串中指定内容的位置

　　match()

返回匹配正则表达式的所有字符串

　　replace()

替换字符串中匹配正则表达式的指定内容

　　search()

返回匹配正则表达式的索引值

　　slice()

根据指定位置节选字符串片段

　　split()

把字符串分割成字符串数组

　　substring()

根据指定位置节选字符串片段

　　toLowerCase()

将字符串中的所有字母都转换为小写

　　toUpperCase()

将字符串中的所有字母都转换为大写

前言

　　JavaScript和HTML、CSS一起被称为“Web前端开发的三大技术”，该技术目前几乎被所有的主流浏览器支持，也应用于市面上绝大部分网站中。随着JavaScript的广泛使用，基于JavaScript的框架也层出不穷。jQuery是JavaScript框架中的优秀代表，也是目前网络上使用范围最广泛的JavaScript函数库。

　　本书从零开始讲解JavaScript与jQuery技术，全书以项目为驱动，循序渐进、案例丰富，既可作为JavaScript、jQuery初学者的入门教程，也可为具有一定Web前端基础的读者进一步学习提供参考。

　　全书分13章，主要内容包括以下4个部分。

　　第一部分是概述篇，即第1章，内容主要有JavaScript与jQuery的简介、发展史和特点，以及开发工具的选择。

　　第二部分是JavaScript技术篇，包括第2～5章的内容。这4章循序渐进地介绍了JavaScript入门、JavaScript数据类型与运算符、JavaScript语句与函数、JavaScript DOM和BOM。

　　第三部分是jQuery技术篇，包括第6～12章的内容。这7章由浅入深地介绍了jQuery入门、jQuery选择器与过滤器、jQuery事件、jQuery特效、jQuery HTML DOM、jQuery遍历、jQuery AJAX技术。

　　第四部分是综合篇，即第13章，其中提供了3个完整的项目实例，包括图片轮播、手动切换图片、AJAX天气预报查询功能的设计与实现，综合应用了全书所学知识，让读者所学即所用。

　　本书精选的相关例题共136个，均在浏览器中调试通过。考虑到旧版浏览器的兼容性，本书选用的jQuery版本为1.12.3，使用该版本的相关源代码允许向下兼容IE6～IE8、Opera 12.1x、Safari 5.1等浏览器。

　　本书还提供了电子资源供读者下载，包括例题源代码、课后习题答案、教学PPT与教学大纲。

　　最后，在此郑重感谢清华大学出版社的魏江江主任为本书的出版所付出的辛勤劳动，特别感谢敬爱的周泉先生和任萱女士对本书的出版给予的倾力帮助，感谢家人和朋友们给予的关心和鼓励，同时也要感谢我的丈夫刘嵩先生多年来对我的工作的一贯支持。

　　愿本书能够对读者学习Web前端新技术有所帮助，并真诚地欢迎读者批评指正。希望能与读者朋友们共同学习成长，在浩瀚的技术之海不断前行。

作 者

2018年3月