1

第一篇 Web 页面制作基础第一章 HTML 标签介绍...................................................................................................1

第一节 HTML 基本结构............................................................................................1

第二节 标签（元素）全局标准属性........................................................................2

第三节 HTML 的全局事件属性................................................................................3

第二章 HTML 的标签（元素）.......................................................................................5

第一节 文本标签........................................................................................................5

第二节 多媒体标签....................................................................................................6

第三节 列表................................................................................................................6

第四节 表格................................................................................................................7

第五节 表单标签系列................................................................................................8

第六节 其他语义化标签..........................................................................................10

第三章 页面结构与模块划分..........................................................................................12

第一节 网页结构......................................................................................................12

第二节 模块划分......................................................................................................12

第四章 CSS 概述..............................................................................................................14

第一节 CSS 代码语法...............................................................................................14

第二节 CSS 放置位置..............................................................................................14

第三节 CSS的继承..................................................................................................15

第五章 CSS 选择器..........................................................................................................16

第一节 选择器的种类..............................................................................................16

第二节 选择器的优先级..........................................................................................18

第六章 CSS 样式（属性）..............................................................................................19

第一节 背景样式......................................................................................................19

第二节 字体样式......................................................................................................20

2

第三节 文本属性......................................................................................................21

第四节 基本样式......................................................................................................22

第五节 样式重置......................................................................................................24

第六节 盒模型样式..................................................................................................24

第七节 浮动 float......................................................................................................26

第八节 定位 position.................................................................................................27

附录...................................................................................................................................28

1. HTML 常用标签属性汇总...................................................................................28

2. HTML 常用标签汇总...........................................................................................29

3. css 默认值汇总......................................................................................................30

4. 浏览器默认样式...................................................................................................32

第二篇 html5 和 css3 开发基础与应用第一章 html5 开发基础与应用........................................................................................35

第一节 简介..............................................................................................................35

第二节 常用元素和属性..........................................................................................36

第三节 HTML5 表单相关元素和属性....................................................................39

第二章 CSS3.....................................................................................................................42

第一节 CSS3 新增选择器........................................................................................42

第二节 CSS3 新增属性............................................................................................43

第三节 新增变形动画属性......................................................................................44

第四节 CSS3 的 3D 变形属性..................................................................................45

第五节 CSS3 的过渡属性........................................................................................47

第六节 CSS3 的动画属性........................................................................................48

第七节 CSS3 新增多列属性....................................................................................48

3

第八节 CSS3新增单位............................................................................................49

第九节 弹性盒模型..................................................................................................50

第三篇 JavaScript 程序设计第一章：JavaScript 语法基础........................................................................................52

第一节 JavaScript历史.............................................................................................52

第二节 基础知识......................................................................................................53

第三节 数据类型......................................................................................................55

第二章 运算......................................................................................................................58

第一节 算术运算......................................................................................................58

第二节 强制转换......................................................................................................59

第三节 赋值运算......................................................................................................60

第四节 关系运算......................................................................................................60

第五节 逻辑运算......................................................................................................61

第六节 三元运算......................................................................................................62

第七节 隐式转换......................................................................................................62

第三章 分支循环..............................................................................................................63

第一节 if....................................................................................................................63

第二节 switch............................................................................................................64

第三节 while..............................................................................................................65

第四节 do-while........................................................................................................65

第五节 for..................................................................................................................66

第六节 break和 continue..........................................................................................66

第四章 数组......................................................................................................................67

第一节 基本应用......................................................................................................67

第二节 数组方法......................................................................................................68

4

第三节 二维数组......................................................................................................71

第五章 字符串..................................................................................................................71

第一节 字符串属性..................................................................................................71

第二节 字符串的方法..............................................................................................71

第六章 正则表达式..........................................................................................................72

第一节 基本概念......................................................................................................72

第二节 创建正则表达式..........................................................................................73

第三节 元字符..........................................................................................................73

第四节 模式修饰符..................................................................................................74

第五节 正则方法......................................................................................................74

第六节 支持正则的 String方法..............................................................................75

第七章 对象......................................................................................................................75

第一节 定义对象......................................................................................................75

第二节 内置对象......................................................................................................76

第三节 Math 方法.....................................................................................................77

第八章 面向对象..............................................................................................................79

第一节 类和对象......................................................................................................79

第二节 定义对象......................................................................................................80

第三节 原型和原型链..............................................................................................82

第四节 常用的 JavaScript设计模式........................................................................82

第九章 函数......................................................................................................................85

第一节 函数的定义..................................................................................................85

第二节 局部变量和全局变量..................................................................................86

第三节 函数参数......................................................................................................87

第四节 返回值..........................................................................................................87

5

第五节 匿名函数......................................................................................................88

第六节 自运行函数..................................................................................................88

第七节 闭包..............................................................................................................89

第十章 BOM.....................................................................................................................90

第一节 BOM 概述.....................................................................................................90

第二节 BOM 对象.....................................................................................................90

第十一章 DOM.................................................................................................................92

第一节 DOM概述....................................................................................................92

第二节 DOM对象方法............................................................................................92

第三节 DOM对象属性............................................................................................93

第四节 操作 DOM 对象属性和内容........................................................................94

第五节 操作 DOM 间的关系....................................................................................95

第六节 DOM节点属性( Attribute ).........................................................................96

第十二章 事件..................................................................................................................97

第一节 事件..............................................................................................................97

第二节 事件对象（Event）.....................................................................................99

第三节 事件流........................................................................................................100

第四节 事件监听（DOM2 级事件）....................................................................101

第四篇 轻量级框架应用第一章 jQuery 简介.......................................................................................................102

第一节 jQuery是什么............................................................................................102

第二节 jQuery主要功能........................................................................................102

第三节 jQuery对象................................................................................................102

第四节 jQuery的缺点............................................................................................103

第五节 版本进化....................................................................................................103

6

第二章 选择器................................................................................................................104

第一节 基本选择器................................................................................................104

第二节 属性选择器................................................................................................104

第三节 位置选择器................................................................................................104

第四节 后代选择器................................................................................................105

第五节 子代选择器................................................................................................105

第六节 选择器对象................................................................................................106

第七节 选择器对象遍历应用及页面初始化........................................................106

第八节 子元素、表单、表单对象属性选择器....................................................106

第九节 层级选择器................................................................................................108

第三章 DOM 操作..........................................................................................................108

第一节 查找获取....................................................................................................108

第二节 插入............................................................................................................108

第三节 包裹............................................................................................................109

第四节 替换............................................................................................................109

第五节 删除............................................................................................................109

第六节 克隆............................................................................................................109

第四章 筛选....................................................................................................................109

第一节 过滤............................................................................................................109

第二节 查找............................................................................................................110

第三节 串联............................................................................................................110

第五章 JQuery 事件.......................................................................................................111

第一节 页面载入....................................................................................................111

第二节 事件绑定....................................................................................................111

第三节 鼠标事件....................................................................................................111

7

第四节 键盘事件....................................................................................................112

第五节 表单事件....................................................................................................112

第六节 文档窗口事件............................................................................................112

第七节 事件冒泡....................................................................................................112

第六章 效果....................................................................................................................112

第一节 容器适应....................................................................................................112

第二节 标签操作....................................................................................................113

第三节 基本 滑动 淡出淡入...................................................................................114

第四节 自定义动画................................................................................................114

第七章 AJAX..................................................................................................................114

第一节 工作原理....................................................................................................115

第二节 AJAX 的原生写法.....................................................................................116

第三节 JQuery中AJAX语法................................................................................116

第四节 JSON 对象..................................................................................................117

第五节 XML使用..................................................................................................117

第六节 AJAX-load()方法.......................................................................................117

第七节 AJAX-get() 和 post() 方法.........................................................................118

第八节 AJAX跨域.................................................................................................118

附件.................................................................................................................................118

1

第一篇 Web 页面制作基础第一章 HTML 标签介绍

• HTML 标签是由<>包围的关键词，例：<html>

• HTML 标签通常成对出现，分为标签开头和标签结尾，例：<html> </html>

• 有部分标签是没有结束标签，成为单标签，单标签内必须用 / 结尾，例：<br/>

• 页面中所有的内容，都要放在 HTML 标签中• HTML 标签主题分为三个部分

– 标签名称

– 标签内容

– 标签属性

• HTML 标签具有语义化– 语义化：就是仅通过标签名就能判断出该标签的内容。– 语义化的作用

• 网页结构层次更清晰。

• 更容易被搜索引擎收录。• 更容易让屏幕阅读器读出网页内容。

• 标签的内容就是在一对标签内部的内容• 标签的内容可以是其他标签

第二节 标签（元素）全局标准属性在 HTML 规范中，规定了 8 个全局标准属性：class属性

• 用于定义元素的类名。

2

id属性

• 用于指定元素的唯一 id

• 要注意该属性的值在整个 HTML 文档中要具有唯一性style属性

• 用于指定元素的行内样式• 使用该属性后将会覆盖任何全局的样式设定title属性

• 用于指定元素的额外信息accesskey属性

• 用于指定激活元素（获得焦点）的快捷键。tabindex属性

• 用于指定元素在 tab 键下的次序dir属性

• 用于指定元素中内容的文本方向• 属性值只有 ltr或 rtl两种，含义分别是 left to right和 right to left。

lang属性

• 用于指定元素内容的语言

第三节 HTML 的全局事件属性Window窗口事件

• onload：在页面加载结束之后触发。• onunload：在用户从页面离开时发生，例如点击跳转，页面重载，关闭浏览器窗口等。Form表单事件

• onblur：当元素失去焦点时触发。• onchange：在元素的元素值被改变时触发。

3

• onfocus：当元素获得焦点时触发。• onreset：当表单中的重置按钮被点击时触发。• onselest：在元素中文本被选中后触发。

• onsubmit：在提交表单时触发。

Keyboard键盘事件

• onkeydown：在用户按下按键时触发。• onkeypress：在用户按下按键后，按着按键时触发。该属性不会对所有按键生效，不生效的有：

ALT、CTRL、SHIFT、ESC

• onkeyup：当用户释放按键时触发。Mouse鼠标事件

• onclick：当在元素上发生鼠标点击时触发。• onblclick：当在元素上发生鼠标双击时触发。• onmousedown：当在元素上按下鼠标按钮时触发。

• onmousemove：当鼠标指针移动到元素上时触发。• onmouseout：当鼠标指针移出元素时触发。• onmouseover：当鼠标指针移动到元素上时触发。• onmouseup：当在元素上释放鼠标按钮时触发。• Media媒体事件

• onabort：当退出时触发。

• onwaiting：当媒体已停止播放但打算继续播放时触发。

4

第二章 HTML 的标签（元素）第一节 文本标签

段落标签 <p></p>

段落标签用来描述一段文字 标题标签 <hx></hx>

• 标题标签用来描述一个标题• 标题标签总共有六个级别，由高到低分别是 h1,h2,h3,h4,h5,h6

• <h1></h1>标签在每个页面中通常只出现一次强调语句标签<em></em>

用于强调某些文字的重要性更加强调标签<strong></strong>

和 <em>标签一样，用于强调文本，但它强调的程度更强一些

无语义标签<span></span>

<span>标签是没有语义。短文本引用标签<q></q>

简短文字的引用。长文本引用标签<blockquote></blockquote>

定义长的文本引用换行标签<br/>

<br/>标签作用相当于 word 文档中的回车,起到文字换行的作用

5

第二节 多媒体标签链接标签 <a></a>

图片标签 <img/>

视频标签<video></video>

• <video src="mov.mp4" controls="controls">

• 目前 video支持三种视频格式

– Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

– MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件– WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

音频标签<audio></audio>

<audio src="a01.mp3"></audio>

第三节 列表

无序列表标签<ul><li><li/></ul>

• ul-li是没有前后顺序的信息列表

• <ul><ul/>列表定义一个无序列表• <li><li/>代表无需列表中的每一个元素

<ul> <li>HTML<li/> <li>CSS<li/> <li>JavaScript<li/></ul>

有序列表<ol><li><li/></ol>

ol-li 列表默认情况下，每个 li 在浏览器中都会显示一个数字，代表自己的序号定义列表<dl></dl>

• 定义列表通常和<dt></dt>和<dd></dd>标签一起使用

• <dt></dt>定义列表中的项目

• <dd></dd>描述列表中的项目

6

<dl> <dt>学习WEB前段需要掌握哪三种语言</dt> <dd>需要掌握HTML，搭建网页结构</dd> <dd>需要掌握 CSS，用于修改网页结构的样式</dd> <dd>需要掌握 JavaScript，用于用户和计算机交互</dd></dl>

第四节 表格

表格标签<table></table>

表格的一行<tr></tr>

有几对 tr, 表格就有几行。

表格的表头<th></th>

表格的头部的一个单元格，表格表头。

单元格<td></td>

• 表格的一个单元格，一行中包含几对<td><td/>，说明一行中就有几列。<table>

<tr><th>姓名</th><th>性别</th><th>年龄</th>

</tr><tr>

<td>张三</td><td>男</td><td>25</td>

</tr><tr>

<td>小花</td><td>女</td><td>23</td>

</tr><tr>

<td>李四</td><td>男</td><td>28</td>

</tr></table>

表格合并

• 同一行内，合并几列 colspan=“2”

• 同一列内，合并几行 rowspan="3"

•

7

第五节 表单标签系列

表单标签<form>

• <form></form>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

• <form method="传送方式" action="服务器文件">

• action ：浏览者输入的数据被传送到的地方,比如一个 PHP页面(save.php)

• method ： 数据传送的方式（get/post）

输入标签<input/>

input 是最重要的表单标签，重要属性包括：• name：为文本框命名，用于提交表单，后台接收数据用。• value：为文本输入框设置默认值。(一般起到提示作用)

• type：通过定义不同的 type类型，input的功能有所不同（见下表）

•

type 功能说明text 单行文本输入框password 密码输入框（密码显示为***)radio 单选框 （checked 属性用于显示选中状态）checkbox

复选框（checked 属性用于显示选中状态）file 上传文件button 普通按钮reset 重置按钮（点击按钮，会触发 form 表单的 reset 事件）submit 提交按钮（点击按钮，会吃饭 form 表单的 submit 事件）email 专门用于输入 e-mailurl 专门用于输入 urlnumber 专门用于 numberrange 显示为滑动条，用于输入一定范围内的值date 选取日期和时间（还包含：

month、week、time、datetime、datetime-local）color 选取颜色

<button>按钮

button 标签的功能与<input>按钮功能相同，button 是双标签，内部可以嵌套其他行内元素。

8

下拉选择框<select></select>

<select> <option value="看书">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select>

• <option value="提交值">选项</option>是下拉选择框里面的每一个选项

• selected：当某个 option 选项有这个属性时候，select 默认选中这个选项 文本域 <textarea></textarea>

• 当用户想输入大量文字的时候，使用文本域• cols ：多行输入域的列数。

• rows ：多行输入域的行数

第六节 其他语义化标签盒子<div></div>

• 俗称为盒子，division（分割）

• 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

• 什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。

网页头部<header></header>

• HTML5 新增语义化标签，定义网页的头部• 主要用于布局，分割页面的结构底部信息<footer></footer>

• HTML5 新增语义化标签，定义网页的底部• 主要用于布局，分割页面的结构导航<nav></nav>

• HTML5 新增语义化标签，定义一个导航• 主要用于布局，分割页面的结构

9

文章<article></article>

• HTML5 新增语义化标签，定义一篇文章• 主要用于布局，分割页面的结构侧边栏<aside></aside>

• 语义化标签，定义主题内容外的信息• 主要用于布局，分割页面的结构时间标签<time></time>

• 语义化标签，定义一个时间

10

第三章 页面结构与模块划分 第一节 网页结构

• 一个 HTML 文件是有自己固定的结构的。<!DOCTYPE html><html>

<head><meta charset="UTF-8"><title></title>

</head><body></body>

</html>

• <!DOCTYPE html> 定义文档类型，告知浏览器用哪一种标准解释HTML

• <html></html> 可告知浏览器其自身是一个 HTML 文档。

• <head></head>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签.

• <body></body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

• <title></title>元素可定义文档的标题。

• <link>标签将 css 样式文件链接到HTML 文件内• <meta>定义文档的元数据，网页的元信息（charset=“utf-8” 国际编码类型）•

第二节 模块划分

• 每个网页都是由不同的功能模块组成的，因此在将制作网页的时候，我们要将网页的每个功能模块分开

– 常见的企业网站，多由头部区，展示图片区域，主题区域，底部信息区域组成• 网页拆分原则

– 由上到下

– 由内到外

• div header footer nav article aside等标签多用于模块划分

11

第四章 CSS 概述第一节 CSS 代码语法

• CSS全称为层叠样式表(Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

• css代码通常存放在<style></style>标签内

• css 样式由选择符和声明组成，而声明又由属性和值组成• 选择符{属性:值}例：p{color:red;}

• 选择符：又称选择器，指明网页中要应用样式规则的元素• 声明：在英文大括号{}中的的就是声明，属性和值之间用英文冒号:分隔。当有多条声明时，中间

用英文分号;分隔，如：p{ font-size:12px; color:red;}

第二节 CSS 放置位置行内样式• 直接书写在标签的 style 属性中• 不建议使用

<div style="width:200px; height:200px;"></div>

内联式样式表

• 写在<style></style>标签中

<!DOCTYPE html><html>

<head><meta charset="UTF-8"><title></title><style>

.box{ width:200px; height:200px; background-color:red;

}

12

</style></head><body></body>

</html>

外联样式表

• 将一个独立的.css 文件引入到HTML 文件中，使用<link>标签写在<head>标签中。 链接式会以网页文件主体装载前装载 CSS 文件。

• rel="stylesheet"定义类型为层叠样式表，一定要写

<!DOCTYPE html><html>

<head><meta charset="UTF-8"><title></title><link href="My.css" rel="stylesheet" type="text/css">

</head><body></body>

</html>

第三节 CSS的继承

• CSS 的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定 html 标签元素，而且应用于其后代。

• 不可继承样式：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear

• 可以继承的样式：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor

第五章 CSS 选择器第一节 选择器的种类

标签选择器通过标签的名字，修改 css 样式div{ width:200px; height:300px;}

13

通配符选择器

• 选择页面中所有的元素

*{ margin:0; padding:0;}

属性选择器

后代选择器

• 选择某个父元素下面所有的元素.box p{ background-color:red; }

一级子元素选则器

• 选择某个父元素的直接子元素• 后代选择器是选择父元素的所有子孙元素，一级子元素原则器只选择第一级子元素，不会再向下查

找元素.box>p{ background-color:red; }

id 选择器通过 id 查找页面中唯一的标签，用 # 标示 id

#wrap{ width:200px; height:300px;}

class 选择器通过特定的 class（类）来查找页面中对应的标签，以 . class 名称.box{ width:200px; height:300px; }<div class="box"></div>

14

伪类选择器

• :hover鼠标移入某个元素.box:hover{ color:red;}

• :before在某个元素的前面插入内容

div:before{ content:"- 台词"; background-color:yellow; color:red; font-weight:bold;}

• :after在某个元素的后面插入内容

div:after{ content:"- 台词"; background-color:yellow; color:red; font-weight:bold;}

群组选择器

• 可以对多个不同的选择器设置相同的样式.box,.box1,.box2{ width:200px; height:300px;}

第二节 选择器的优先级

• 当有不同的选择器对同一个对象进行样式指定时，并且两个选择器有相同的属性被赋予不同的值时。• 通过测算那个选择器的权重值最高，应用哪一个选择器的样式• 权重计算方式

– 标签选择器：1

– class选择器：10

– id选择器：100

– 行内样式：1000

– !important 最高级别，提高样式权重，拥有最高级别

p{width:200px} /* 权重 1*/.box{width:200px} /* 权重 10*/.box p{width:200px} /* 权重 11*/

15

#txt{width:200px} /* 权重 100*/

• 如果两个选择器的权重值一样高，则应用距离对象最近的 css 样式

16

第六章 CSS 样式（属性） 第一节 背景样式

背景颜色 background-color

• background-color:red

• 背景颜色的值可以是英文，可以是十六进制颜色值，可以是 rgb，也可以是 rgba

背景图片 background-image

• background-image:url(bg01.jpg);

• 背景图片的大小可以和容器大小不一样• 背景图片不会占位

• 如果容器大，背景图片小，背景图片会平铺 铺满整个容器背景图片位置 background-position

• background-position:10px 100px;

• 背景图片定位的值是两个单位，分别代表坐标 x，y轴• 背景图片定位的值可以是应为 left，right，top，bottom，center

• 背景图片定位的值也可以是百分比或者像素背景图片重复 background-repeat

• background-repeat:no-repeat

• no-repeat 设置图像不重复，常用

• round 自动缩放直到适应并填充满整个容器• space 以相同的间距平铺且填充满整个容器

背景图片定位 background-attachment

• background-attachment:fixed

• 背景图像是否固定或者随着页面的其余部分滚动• background-attachment的值可以是 scroll（跟随滚动），fixed（固定）

background缩写

• background:#ff0000 url(bg01.jpg) no-repeat fixed center

17

•

第二节 字体样式

字体族 font-family

• font-family:"微软雅黑","黑体";

使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）字体大小 font-size

• font-size:12px;

• 网页默认字体大小是 16px

字体粗细 font-weight

• font-weight:400;

• normal（默认）

• bold（加粗）

• bolder（相当于<strong>和<b>标签）

• lighter （常规）

• 100 ~ 900 整百（400=normal，700=bold）

字体颜色 color

• 颜色的英文单词 color:red;

• 十六进制色：color: #FFFF00;

• RGB(红绿蓝)color:rgb(255,255,0)

• RGBA（红绿蓝透明度）A 是透明度在 0~1 之间取值。color:rgba(255,255,0,0.5)

字体斜体 font-style

• font-style:italic

• normal 文本正常显示

• italic 文本斜体显示

• oblique 文本倾斜显示

•

18

第三节 文本属性

行高 line-height

• line-height:50px;

• 可以将父元素的高度撑起来文本水平对齐方式 text-align

• left 左对齐

• center 文字居中

• right 右对齐

文本所在行高的垂直对齐方式 vertical-align

• baseline 默认

• sub 垂直对齐文本的下标，和<sub>标签一样的效果• super 垂直对齐文本的上标，和<sup>标签一样的效果

• top 对象的顶端与所在容器的顶端对齐• text-top 对象的顶端与所在行文字顶端对齐

• middle 元素对象基于基线垂直对齐

• bottom 对象的底端与所在行的文字底部对齐

• text-bottom 对象的底端与所在行文字的底端对齐

文本缩进 text-indent

• text-indent:2em;

• 通常用在段落开始位置的首行缩进字母之间的间距 letter-spacing

单词之间间距 word-spacing

文本的大小写 text-transform

• capitalize 文本中的每个单词以大写字母开头。

• uppercase 定义仅有大写字母。

• lowercase 定义仅有小写字母。

19

文本的装饰 text-decoration

• none 默认。

• underline 下划线。

• overline 上划线。

• line-through 中线。

自动换行 word-wrap

• word-wrap: break-word;

•

第四节 基本样式

宽度 width

• width:200px;

• 定义元素的宽度

高度 height

• height:300px

• 元素默认没有高度

• 需要设置高度

• 可以不定义高度，让元素的内容将元素撑高鼠标样式 cursor

• 定义鼠标的样式 cursor:pointer

– default默认

– pointer小手形状

– move移动形状

透明度 opacity

• opacity:0.3

• 透明度的值可以使 0~1 之间的数字，0 代表透明，1 代表完全不透明• 透明的元素，只是看不到了，但是还占据着文档流

20

可见性 visibility

• visibility:hidden;

• visible 元素可见

• hidden 元素不可见

• collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。 溢出隐藏 overflow

• 设置当对象的内容超过其指定高度及宽度时如何显示内容• visible 默认值，内容不会被修剪，会呈现在元素框之外。

• hidden 内容会被修剪，并且其余内容是不可见的。

• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。边框颜色 outline

• input 文本输入框自带边框，且样式丑陋，我们可以通过 outline修改边框• outline:1px solid #ccc;

• outline:none清除边框

•

第五节 样式重置

早期的网页没有 css 样式，为了界面美观，很多元素自带margin、padding等样式，但这些样式在不同浏览器解析的值都不一样，需要将 css 样式重置，保证在不同浏览器显示一致。• 清除元素的margin和 padding

• 去掉自带的列表符

• 去掉自带的下划线

*{ margin:0; padding:0; } /*清除页面所有标签自带的外间距和内填充*/ul,ol{ list-style:none; } /*去掉自带的列表符*/a{ text-decoration:none; } /*去掉自带的下划线*/img,input{ border:none; } /*清除 IE下自带的边框*/

21

第六节 盒模型样式HTML 元素分类在讲解 CSS布局之前，我们需要提前知道一些知识，在 CSS 中，html 中的标签元素大体被分为三种不同的类型：块状元素、内联元素和内联块状元素。元素分类 特性 标签块级元素 1、每个块级元素都从新的一行开始，并且其后的元

素也另起一行。<br/>2、元素的高度、宽度、行高以及顶和底边距都可设置。<br/>3、元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。

<div> <p> <h1>~<h6> <ol> <ul> <dl> <address> <blockquote> <form>

行内元素 1、和其他元素都在一行上；<br/>2、元素的高度、宽度、行高及顶部和底部边距不可设置；<br/>3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

<a> <span> <br/> <i> <em> <strong> <label> <q>

行内块状元素 1、和其他元素都在一行上；<br/>2、元素的高度、宽度、行高以及顶和底边距都可设置。

<img> <input> select textarea button iframe

元素分类转换 display

• block：将元素转换为块级元素• inline：将元素装换为行级元素• inline-block：将元素转换为内联块元素

• none: 将元素隐藏

描边 border

• border:2px solid #f00;

• 盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

• 线条的样式：

– dashed（虚线）| dotted（点线）| solid（实线）。

• css 样式中允许只为一个方向的边框设置样式：– 下描边 border-bottom:1px solid red;

– 上描边 border-top:1px solid red;

22

– 右描边 border-right:1px solid red;

– 左描边 border-left:1px solid red;

间距 margin

• div{margin:20px 10px 15px 30px;}

• 元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。• 也可以分开写：

div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px;}

• 当margin给一个值时：指的是四个方向• 当margin 有两个值时：指的是上下 左右• 当margin给三个值时：指的是上 左右 下• 当margin给四个值时：值的是上 右 下 左内填充 padding

• padding:10px

• 元素内容与边框之间是可以设置距离的，称之为填充。填充也可分为上、右、下、左。• 如下代码：div{padding:20px 10px 15px 30px;}

• 顺序一定不要搞混。可以分开写上面代码：div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px;}

• 当 padding给一个值时：指的是四个方向• 当 padding 有两个值时：指的是上下 左右• 当 padding给三个值时：指的是上 左右 下• 当 padding给四个值时：值的是上 右 下 左•

23

第七节 浮动 float

浮动原理• 浮动使元素脱离文档普通流，漂浮在普通流之上的。• 浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。

• 浮动会产生块级框（相当于设置了 display:block），而不管该元素本身是什么。

清除浮动带来的影响

• clear 清除浮动：

– none : 不清除（默认值）。

– left : 不允许左边有浮动对象– right : 不允许右边有浮动对象– both : 不允许两边有浮动对象

• 利用伪类实现清除浮动

.clearFix{ content=""; display:block; width:0; height:0; clear:both;}

第八节 定位 position

定位功能可以让布局变的更加自由。层模型--绝对定位（相对于父类）如果想为元素设置层模型中的绝对定位，需要设置 position:absolute(绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用 left、right、top、bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于 body 元素，即相对于浏览器窗口。• position:absolute;

div{ width:200px; height:200px;

24

border:2px red solid; position:absolute; left:100px; top:50px;}/*实现 div元素相对于浏览器窗口向右移动 100px，向下移动 50px。*/

层模型--相对定位（相对于原位置）如果想为元素设置层模型中的相对定位，需要设置 position:relative（相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于原位置移动，移动的方向和幅度由 left、right、top、bottom属性确定，偏移前的位置保留不动。

• position:relative;

#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px;}/*相对于以前位置向下移动 50px，向右移动 100px;*/

层模型--固定定位（相对于网页窗口）与 absolute 定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与 background-attachment:fixed 属性功能相同。• position:fixed

第二篇 html5 和 css3 开发基础与应用第一章 html5 开发基础与应用

HTML5 和 HTML4 的区别

• DTD 的变化

• HTML5 的语法变化

– 某些元素可以省略结束标签 （<p> <li> <dt> <dd> 等）

– 没有结束标签的元素 (< area> <base> <br> 等）

25

– 连开头标签一起省略的元素 （<html> <head> <body> <colgroup> <tbody> 等）

• 属性值可以不用引号括起来• 标签不再区分大小写

• 某些标志性的属性可以省略属性值，通常为 boolean 类型HTML5 的优势

• 解决跨浏览器，跨平台问题 目前 95%的浏览器都支持 HTML5，其中包含移动端等设备上使用的浏览器。 对于开发者来说，各

浏览器更好的支持 HTML5，前端程序员开发 HTML+CSS+JavaScript 页面将会更加的轻松。• 增强了 web 的应用程序 最直观的地方就是以前都需要使用 Flash 来播放视频，现在直接使用 HTML5 来播放视频，使得手机网页看视频成为了可能。

第二节 常用元素和属性HTML5 保留元素HTML5 是对以前的 HTML 发展产生出来的，因此，HTML5 保留了以前 HTML 绝大部分标签。HTML5 废弃元素

废弃标签 说明basefont big center font strike tt 用 CSS 处理可以更好地替代他们frame frameset noframes 使用这些标签，破坏了可使用性和可访问性acronym applet dir 不经常使用、会引起混乱、可被其他元素替代

HTML5 新增元素在 HTML5 以前，HTML 页面只能用元素来作为结构元素，使得代码 阅读带来了极大的困扰性，故在 HTML5 中增加了大量的结构元素。

新增元素 说明<header> 用于定义文档或节的页眉<footer> 用于定义文档或节的页脚<article> 用于定义文档内的文章<section> 用于定义文档中的一个区域（或节）

26

<aside> 用于定义与当前页面或当前文章的内容几乎无关的附属信息<figure> 用于定义一段独立的引用，经常与说明(caption)<figcaption>配合使用，

通常用在主文中的图片，代码，表格等。

<figcaption> 用于表示是与其相关联的引用的说明/标题，用于描述其父节点<figure>元素里的其他数据。

<hgroup> 用于对多个<h1>~<h6>元素进行组合<nav> 用于定义页面上的导航链接部分<mark> 用于定义高亮文本

<time> 用于显示被标注的内容是日期或时间（24小时制）<meter> 用于表示一个已知最大值和最小值的计数器<progress> 用于表示一个进度条

<audio> 定义声音，比如音乐或其他音频流<video> 定义视频，比如电影片段或其他视频流

<article>元素和<section>元素在使用上非常容易用错。原因也很明显，他们可以包含很多子元素，同时还可以互相嵌套。其实<article> 元素可以看成是 一种特殊类型的<section>元素，它比<section>元素更强调独立性。即<section> 元素强调分段或分块，而<article>元素强调独立性。

HTML5 新增通用（全局）属性HTML5 规范对通用属性也做了一定的修改。 保留了 id、style、class、dir、title、lang、accesskey 等通

用属性。也新增了 contenteditable、designMode、hidden 等通用属性。

新增属性 说明contentEditable contenteditable 属性规定元素内容是否可编辑designMode 相当于一个全局的 contenteditable 属性，如果把

designMode 属 性设置为 on ，则该页面上的所有支持contenteditable 属性的元素都变成可编辑状 态

第三节 HTML5 表单相关元素和属性HTML5 新增的表单控件<output>

<output>元素用于表示计算或用户操作的结果。一般用来更加明确的显示其 他表单控件的值，如 range 类型的具体值，color 的具体值，等等。这样做的好处 是使得表单更加的人性化。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>HTML5 的 output 元素</title></head>

27

<body><form action="" method="get" oninput="x.value=parseInt(a.value)">

0 <input type="range" id="a" value="50"> 100 <br/><output name="x" for="a">50</output>

</form></body></html>

HTML5 input新增 type类型

类型 说明color 用来创建一个允 许用户使用颜色选择器，或输入兼容 CSS 语法的颜色代码的区域time 生成一个时间选择器

datetime 生成一个 UTC 的日期时间选择器datetime-local

生成一个本地化的日期时间选择器date 显示一个日期输入区域，可同时使用日期选择器，结果值包括年、月、日，不包括时

间。month 生成一个月份选择器，它结果值包括年份和月份， 但不包括日期week 生成一个选择的几周的选择器email 生成一个 E-mail 输入框number 生成一个只能输入数字的输入框，range 生成一个拖动条，通过拖动条，使得用户只能输入指定范围，指定步长的值search 生成一个专门用于输入搜索关键字的文本框tel 生成一个只能输入电话号码的文本框url 生成一个 URL 输入框

HTML5 input新增属性

属性 说明placeholder 主要用在文本框，规定可描述输入字段预期值的简短的提示信息autocomplete 为了完成表单的快速输入，一般浏览器提供了自动补全的功能选择autofocus 当为某个表单控件增加该属性后，当浏览器打开这个页面， 这个表单控件会自动

获得焦点list 为文本框指定一个可用的选项列表，当用户在文本框中输 入信息时，会根据输入

的字符，自动显示下拉列表提示，供用户从中选择

28

pattern 用于验证表单输入的内容，通常 HTML5 的 type 属性，比如 email、tel 、number、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 属性后，验证会更加高效

novalidate 当提交表单时不对其进行验证required 必需在提交之前填写输入字段spellcheck 拼写检查，为<input>、<textarea>等元素新增属性

formenctype 规定在发送到服务器之前应该如何对表单数据进行编码formtarget 带有两个提交按钮的表单，会提交到不同的目标窗口multiple 一次上传多个文件

maxlength wrap <textarea>新增<br />maxlength：用于规定文本区域最大字符数。<br />wrap：是否包含换号符（soft/ hard）

<!DOCTYPE html><html>

<head><meta charset="utf-8"><title>HTML5 的 list 属性</title>

</head><body>

<form id="login" action="" method="get"><label for="username"></label><input id="username" type="text" name="username"

placeholder="请输入用户名" /><br />

<!--list属性对应 datalist的 id--><label><input type="text" list="location" placeholder=" 户口所 在地"/></label><br /><input type="submit" />

</form>

<datalist id="location"><option value="BeiJing">北京</option> <option value="HeBei">河北</option> <option value="HeNan">河南</option><option value="ShanXi">山西</option>

<option value="ShanDong">山东</option></datalist>

</body></html>

29

第二章 CSS3

第一节 CSS3 新增选择器兄弟选择器

语法 说明 元素 1 ~ 元

素 2第 1 个元素之后，所有的元素 2 都会被选择，且这些元素和第一个元素拥有同一个父元素（两个元素之间不一定要相邻）。

属性选择器

语法 说明E[attribute^=value] 用于选取带有以指定值开头的属性值的元素E[attribute$=value] 用于选取属性值以指定值结尾的元素E[attribute*=value] 用于选取属性值中包含指定值的元素，位置不限，也不限制整个单词伪类选择器

伪类名 说明:root 选择文档的根元素，HTML 里，永远是<html>元素:last-child 向元素添加样式，且该元素是它的父元素的最后一个子元素:nth-child(n) 向元素添加样式，且该元素是它的父元素的第 n 个子元素:nth-last-child(n) 向元素添加样式，且该元素是它的父元素的倒数第 n 个子 元素:only-child 向元素添加样式，且该元素是它的父元素的唯一子元素:first-of-type 向元素添加样式，且该元素是同级同类型元素中第一个元 素:last-of-type 向元素添加样式，且该元素是同级同类型元素中最后一个 元素:nth-of-type(n) 向元素添加样式，且该元素是同级同类型元素中第 n 个元 素:nth-last-of-type(n) 向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素:only-of-type 向元素添加样式，且该元素是同级同类型元素中唯一的元素:empty 向没有子元素（包括文本内容）的元素添加样式伪元素选择器

伪元素名 说明:enabled 向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样

30

式:disabled 向当前处于不可用状态的元素添加样式，通常用于定义表单的 样式或者超链接的

样式:checked 向当前处于选中状态的元素添加样式:not(selector) 向不是 selector 元素的元素添加样式

:target 向正在访问的锚点目标元素添加样式::selection 向用户当前选取内容所在的元素添加样式

第二节 CSS3 新增属性新增背景属性

属性 含义 属性值 继承background-clip 设置背景覆盖范围 border-box/paddingbox/content-box 否

background-origin 设置背景覆盖的起点 border-box/paddingbox/content-box 否

background-size 设置背景的大小 cover/contain/长度/百分比 否

新增的字体文本相关属性属性 含义 属性值 继承text-overflow 设置当文本溢出元素框时处理方式 clip/ellipsis 否

word-wrap 规定单词的换行方式 normal/break-word 是word-break 规定自动换行的方式 normal/break-all/keep-all 是

新增盒模型属性

属性 含义 属性值 继承border-radius<br />border-top-left-radius<br />border-top-right-radius<br />border-bottom-left-radius<br />border-bottom-right-radius

圆角 长度/百分比 否

box-shadow 阴影 h-shadow v-shadow <br />blur spread color inset

否

resize 调整尺寸 none/both/horizontal 否

outline-offset 轮廓的偏移量

length/inherit 否

31

第三节 新增变形动画属性transform

用来设置元素的变形，可以设置一个或一个以上的变形函数。 目 前 transform 有五种基本变形函数可以选择：

函数 说明translate(x,y) 表示元素水平方向移动 x ，垂直方向移动 y，其中 y可以省略，表示垂

直方向没有位移<br />translateX(x) ：表示元素水平方向移动 x。<br />translateY(y) ：表示元素垂直方向移动 y。

rotate(angle) 表示元素顺时针旋转 angle 角度，angle 的单位通常为 deg

scale(x,y) 表示元素水平方向缩放比为 x，垂直方向上缩放比为 y，其中 y 可以省略，表示 y 和 x 相同，以保持缩放比。<br />scaleX(x)：表示元素水平

方向缩放比为 x。<br />scaleY(y) ：表示元素垂直方向上缩放比为 y。

skew(angleX ,angleY) 表示元素沿着 x 轴方向倾斜 angleX 角度，沿着 y 轴方向倾斜 angleY 角 度，其中 angleY 可以省略，表示 Y 轴方向不倾斜。<br

/>skewX(angleX) ：表示元素沿着 x 轴方向倾斜 angleX 角度。<br />skewY(angleY) ：表示元素沿着 y 轴方向倾斜 angleY 角度。

transform-origin

表示元素旋转的中心点，默认值为 50% 50%。第一个值表 示元素旋转中心点的水平位置，它还可以赋值 left、right、center、长度、百分比；第二个值表示元素旋转中心点的垂直位置，它还可以赋值 top、bottom、 center、长度、百分比。

第四节 CSS3 的 3D 变形属性CSS3 提供了 3D 的变形属性，首先了解 x轴 y轴 z轴的概念

32

transform 3D函数

transform 增加了三个变形函数：

• rotateX ：表示元素沿着 x 轴旋转。

• rotateY ：表示元素沿着 y 轴旋转。

• rotateZ ：表示元素沿着 z 轴旋转。

transform-style

用来设置嵌套的子元素在 3D空间中显示效果。它可以设置两个属性值，flat（子元素不保留其 3D 位置，默认值）和 preserve-3d（子元 素保留它的 3D 位置）。perspective

设置成透视效果，透视效果为近大远小。该属性值用来设置 3D 元素距离视图的距离，单位为像素，已经内置了，我们只需要写具体数值即可，默认值为 0。当为元素定义 perspective 属性时，其子元素会获

33

得透视效果，而不是元素本身。perspective-origin

设置 3D 元素所基于的 x 轴和 y 轴，改变 3D 元素的底部位置，该属性取值同 transform-origin，默认值为 50% 50%。backface-visibility

用来设置当元素背面面向屏幕时是否可见，通常用于设置 不希望用户看到旋转元素的背面。它的属性值有 visible （背面可见，默认值）、 hidden（背面不可见）两个。

第五节 CSS3 的过渡属性CSS3 增加了一些过渡属性，可以给元素增加过渡动画效果，可以设置在一定的时间，逐渐的从一种样式变成另一种样式。过渡涉及到的属性如下：属性 含义 属性值transition-delay 设置过渡的延迟时

间time

transition-duration 设置过渡的过渡时间

time

transition-timing-function

设置过渡的时 间曲线

linear/ease/ease-in/easeout/ease-in-out/cubic- bezier(x1,y1,x2,y2)

transition-property 设置哪条 CSS 使用过渡

none/all/CSS 属性名称列表

transition 一条声明设置 所有过渡属性

transition-delay <br />transition-duration<br />transition-timing-function <br />transition-property

第六节 CSS3 的动画属性CSS3 提供了强大的补间动画支持：animation。可以做到一系列的图形变换 (包括平移、缩放、旋转、改变透明度等)。动画涉及的属性如下：属性 含义 属性值@keyframes 定义动画选择器 name 时间 CSS 样式

animation-name 使用@keyframes 定义的动画

none/动画选择器定义的名字animation-delay 设置动画的持续动

画时间none

34

animation-timing-function

设置动画的时间曲线

linear/ease/ease-in<br />/easeout/ease-in-out<br />/cubic- bezier(x1,y1,x2,y2)

animation-iteration-count

设置动画播放次数 数字/infinite

animation-direction 设置动画反向播放 normal/alternate;

animation-play-state

设置动画播放状态 paused/running

transition 一条声明设置所有动画属性

animation-name<br />animation-delay<br />animation-duration <br />animation-timing-function<br />animation-iteration-count<br />animation-direction

第七节 CSS3 新增多列属性CSS3 为文本排版增加了一种多列模式，例如一个 div 里，实现文本左右分栏的效果。多列用到的属性如下:

属性 含义 属性值 继承column-count 设置元素应该被分隔

的 列数数字/auto 否

column-width 设置列的宽度 长度/auto 否

columns 一条声明设置列宽和列 数 column

column-count<br />column-width 否

column-gap 设置列之间的间隔 长度/normal 否

column-span 设置元素应该横跨的列数

1/all 否

column-rule-style

设置列之间间隔的样式

none/hidden/dotted/dashed<br />/solid/double/groove/ridge<br />inset/outset

否

column-rule-color

设置列之间间隔的颜色

颜色名/16 进制数/rgb 函数 否

column-rule-width

设置列之间间隔的宽度

thin/medium/thick/length 否

column-rule 一条声明设置列之间间 隔所有属性

column-rule-style<br />column-rule-color<br />column-rule-width

否

第八节 CSS3新增单位

px、em、rem、vh、 vw 和% 移动端长度单位

35

使用 CSS 单位 px、em、rem、vh、 vw等实现页面布局。- px：绝对单位，页面按精确像素展示- em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size按自身来计算（浏览器默认字体是 16px），整个页面内 1em不是一个固定的值。em 会根据父级元素的大小而变化，但是如果嵌套了多个元素，要计算它的大小，是很容易出错的，这样就引申出了 rem。- rem：相对单位，可理解为”root em”, 相对根节点 html 的字体大小来计算，CSS3 新加属性。- %：% 百分比，相对长度单位，相对于父元素的百分比值- vw、vh、vmin、vmax 主要用于页面视口大小布局vw：viewpoint width，视窗宽度，1vw等于视窗宽度的 1%。vh：viewpoint height，视窗高度，1vh等于视窗高度的 1%。vmin：vw 和 vh 中较小的那个。vmax：vw 和 vh 中较大的那个。第九节 弹性盒模型这是设计来实现更复杂的版面布局。其本质上就是 Box-model 的延伸， Box-model定义了一个元素的盒

模型，而 Flexbox 更进一步的去规范了这些盒模型之间彼此的相对关系。

弹性盒模型的语法基础概念• 任何一个容器都可以指定弹性布• 设置 flex布局以后，子元素的 float,clear,virtical-align等样式全部失效

• display:flex;或 display:inline-flex;

36

Properties 属性CSS Version 版本

Inherit From Parent 继承性 Description 简介

box-orient CSS3 无 设置或检索弹性盒模型对象的子元素的排列方式。

box-pack CSS3 无 设置或检索弹性盒模型对象的子元素的对齐方式。

box-align CSS3 无 设置或检索弹性盒模型对象的子元素的对齐方式。

box-flex CSS3 无 设置或检索弹性盒模型对象的子元素如何分配其剩余空间。

box-flex-group CSS3 无 设置或检索弹性盒模型对象的子元素的所属组。

box-ordinal-group

CSS3 无 设置或检索弹性盒模型对象的子元素的显示顺序。

box-direction CSS3 无 设置或检索弹性盒模型对象的子元素的排列顺序是否反转。

box-lines CSS3 无 设置或检索弹性盒模型对象的子元素是否可以换行显示。

第三篇 JavaScript 程序设计第一章：JavaScript 语法基础

第一节 JavaScript历史

第二节 基础知识特点JavaScript 代码可在内部，外部和行内外部引入 js文件：通过<script src="main.js"></script>

执行按照顺序执行

页面输出

alert("Hello Word"); //系统弹窗console.log(); //输出在控制台document.write(); //打印在页面

37

document.getElementById().innerHTML = "Hello Word";document.getElementById("box").style.color = "red";

基本语法注意行尾加分号;

换行书写注释：// 或者 /* */

关键词 下面是 ECMAScript 关键字的完整列表：

break else new varcase finally return voidcatch for switch whilecontinue function this withdefault if throwdelete in trydo instanceof typeof

定义变量

变量 variable（临时存储的容器）

//变量：临时存储信息的容器，可以复用var name; // 变量的声明，并起名叫 namename = "tt"; // 为变量赋值， = 等号：是把右侧的值，赋值给左侧的变量名；alert(name);

声明变量并同时赋值

//简写var a = 3;console.log(a); //3

a = "hello";console.log(a); //hello

a = true;console.log(a);//true

//同名变量会产生覆盖var name = "小红";var name = "小丽";alert(name); //小丽

38

变量名大小写敏感

var Name="小花";var name="小毛";

命名规范

//可读性高的变量名var a_local //使用下划线连接关键字var _username= "tt"; //使用下划线开头var $total; //用$开头var password; //用小写字母var seatNumber = 5; //驼峰命名法var isHappy = true; //布尔值使用 is开头

//不能使用关键字（保留字）因为语言私有，例如：var false;var true;var boolean;var var;

//可以使用中文，但不推荐var 果果 = "中文变量";

第三节 数据类型不同的数据，需要定义不同的数据类型，描述天气：天气情况（字符串："晴"），气温（数字：25°），是否下雨（布尔值：true/false），在 js 中有以下几种数据类型：字符串(String)

字符串是以单引号或双引号括起来的任意文本，请注意'' 或 "" 本身只是一种表示方式，不是字符串的一部分，因此："abc" 只有 a b c 这个三个字符在""包括的字符串中可以直接使用'' ，反之同理！

alert("果果，'你好'啊！");alert('果果，"你好"啊！');

如果在""中包括双引，需要用反斜杠\" 单引号同理alert("果果，\"你好\"啊");alert('果果，\'你好\'啊');

用算术运算符 + 可以完成字符串拼接alert("welcome" + "to" + "china");alert("welcome" + " " + "to" + " " + "china");

转义字符：\n换行

console.log("你好，\n今天去哪里玩呀！")

39

注意：“”和“ ” 不同，前者是空字符串，后者是空格字符串alert("");alert(" ");

数字（Number）

JS不区分整数和浮点数，统一用 number表示，以下都是合法的 number类型

123; //整数0.456; //浮点数1.2345e6; //科学计数法-99; //负数NaN; //NaN表示 Not a Number,当无法计算结果是用 NaN表示

布尔值（Boolean）boolean里面只有两个值：true/false，表示真或假，开或关布尔值的意义：让计算机能够有逻辑的去判读事物未定义（Undefined）

//undefined有两种结果//1、真的没定义alert(typeof b); //undefined

//2、定义了，但是没有放东西进去var b;alert(b); //undefined

JS 弱类型语言的特点总结：• 变量必须有个明确的数据类型，否则是不规范写法（值是 undefined）• 变量的类型可以变：

var a = "tt";alert(typeof a); //stringa = 123;alert(typeof a); //number

• 变量只定义不赋值，就是 undefined，undefined类型只有一个值 undefined ，表示未定义或只声明 未给值 的变量

• 直接输出一个未定义的变量会报错对象（Object）在 ECMA-262 中把对象定义为：“无序属性的集合，其属性可以包含基本值、对象、或者函数”。js 中内置了如下的对象：对象 说明

40

Object 是所有 JS 对象的超类(基类），JS 中的所有对象都是继承自 Object 对象的

Array 数组对象--定义数组属性和方法Number 数字对象Boolean 布尔对象--布尔值相关Error 错误对象--处理程序错误Function 函数对象--定义函数属性和方法Math 数学对象Date 日期对象RegExp 对象正则表达式对象--定义文本匹配与筛选规则String 字符串对象--定义字符串属性和方法

后面的章节会详细讲解。

空（ Null）

• null 表示一个空对象，“什么都没有”的意思，用来表示无值• 通常用作一个空引用或一个空对象的预期，就像一个占位符

第二章 运算第一节 算术运算

通过运算操作数据（事物）的行为，运算表示行为。例：蜗牛爬井，一口井 10米，蜗牛白天爬 3米，晚上滑 2米，蜗牛几天爬出？// 当前位置在井底 ，默认是 0var position = 0;

//白天爬 3米position = position + 3;

//晚上滑 2米position = position - 2;

alert(position); //1 2 3 4 ....

//加赋值 1 表示爬行一米//position = position + 1;//position++;

41

console.log("往上爬了"+ position + "步");

算术运算符

var y = 3;

运算符 描述 例子 结果+ 加 x=y+2 x=5- 减 x=y-2 x=1* 乘 x=y*2 x=6/ 除 x=y/2 x=1.5

% 取余（模运算）

x=y%2 x=1

++ 递增（累加） x=++y ; x=y++ x=4 ; x=3-- 递减 x=--y ; x=y-- x=2 ; x=3

console.log('20' - '5'); //会隐式转换，结果：15，类型 numberconsole.log('24ad'-'12ad'); //NaN非数字console.log(100-""); //数字与字符串运算结果会转换数字，结果 100console.log(20/0); //Infinity无穷大，类型 numberconsole.log(0/0); //NaN,类型 numberconsole.log("4"/"2"); //转数字，结果：2console.log("8"%"3"); //转数字，结果：2//总结：除了+号可以做字符串连接，其它运算符基本都会做数据类型转换

运算优先级var a = 2+3*5; //17 乘法优先级高于加法var b = (2+3)/(5-3); //2.5圆括号的优先级最后

第二节 强制转换字符串转数字 parseInt() parseFloat() isNaN()

//定义函数function 函数名(){ // 方法体 - 函数体}//点击事件onclick="函数名()" // 当点击时 调用函数体

-----------------------------------------

//例：一个字符串 12//parseInt("12") --> 12 取整数var str = "12";alert(parseInt(str) + 1); //13

var str = "12px";

42

alert(parseInt(str)); //12

var str= "ab 12 px";alert(parseInt(str)); //NaN

-----------------------------------------//parseFloat(); 保留小数var str = "12.5";alert(parseFloat(str));//12.5

//isNaN 判断是不是 非数字，非数字返回 truealert(isNaN(parseInt(str))); //false//注意坑：isNaN()如果判断数字型字符串会有隐式转换，返回 false

数字转为字符串 toString()

var num = 123;var str = num.toString();alert(typeof str);//string 转字符串

第三节 赋值运算

复合的赋值运算符 += -= *= /= %=

//编程思想var a = 3;a = a + 1;//第一步：读取 a的值//第二步：运算 a + 1//第三步：把运算结果写回 a

var x = 10;x = x + 2; //读取 x 的值，在运算 x+2,运算结果写回 xvar x -= 2; //x = x - 2; 注意顺序x+=2; //x = x+2x-=2;x*=2;x/=2;x%=2;

表达式

• 包含赋值运算的语句叫表达式• 单独的运算不叫表达式

•

第四节 关系运算

关系运算：> < <= >= != == === ==和=== !=和!==

43

var a = 2;var b = "2";var c = 2;

console.log(a == c); //true 类型相同，值相同console.log(a === c ); //true 类型相同，值相同console.log(a !== c );//false a与 c类型相同，值也相同，非运算肯定是 false

console.log(a == b); //true 把 b转换为数字，检查是否相等console.log(a != b); //false ==的非运算

console.log(a === b); //false 类型不同，直接返回 falseconsole.log(a !== b ); //true

//总结：==和!= 先尝试转换类型，再做值比较，最后返回值比较结果；而===和!== 只有在相同类型下，才会比较里面的值

字符串比较'2' == '2'; //true两个操作数都是数字字符串，先转换成数字，再进行比较'a' != 'b'; //true 两个操作数是字母字符串，转成 ascii码，再比较'abc' < 'aad'; //false 依次比较 ascii码13 > 'abc'; //false "abc"会转成 NaN

获取 unicode 字符编码var str = "abc";alert(str.charCodeAt(0)); //97 返回指定位置的字符编码charAt(1); //返回字符串子串

“小结： =” “、 ==” “、 ===”有什么区别？

• = 是赋值符号，是对变量所代表的内存的写的操作；• == 忽略数据类型的判断 是否相等• === 数值和数据类型都要相等才判断为相等•

第五节 逻辑运算

//满足两个条件var username = "果果";var password = "abc";

// 使用 逻辑与 && 连接两个表达式alert(username==="果果" && password==="abc"); //true

逻辑与&&

逻辑与&& （and ） 并且的意思：若干条件中，只有都是 true时，条件才能为真

alert(true && true); //truealert(true && false); //false

44

alert(false && (3>4)); //falsealert(false && false); //false

逻辑或 ||逻辑或 || ，若干条件中，只有有一个满足，返回 true

alert(true || true); //truealert(false || true); //truealet(true || false); //truealert(false || (3==4)); //false

逻辑非 !

逻辑非！取反 !ture的结果为 false，!false的结果为 true

var n1 = !true; //falsevar n2 = !false; //truevar n3 = !!true; //true

复合逻辑表达式//中文：user等于小星 并且 年龄大于等于 18 或者 地址是中国 并且 密码是 123；(user=="小星")&&(age>=18 || addr=="中国")&&(pwd==123);

第六节 三元运算根据不同的条件去处理不同的结果条件运算符？：-5 正 5 一元运算3+5 二元运算三元运算符：(比较表达式)？结果 1:结果 2

//输出最大值var num1 = 3;var num2 = 5;var max = num1>num2?num1:num2;console.log(max);

第七节 隐式转换

+号在不同情况下的区别

console.log(3 + 5 + "hello"); //8 helloconsole.log("hello" + 3 + 5); // hello 35

45

第三章 分支循环第一节 if

if 选择逻辑：基于不同的条件来执行不同的动作程序运行的三大结构：顺序结构、选择结构、循环结构1、顺序结构：代码逐行执行，自上而下2、选择结构：通常是和关系比较一起用;

a) 单分支选择：if 语句b) 双分支选择：if-else语句

c) 多分支语句：if-else if-else 语句

//输出最大值var num1 = 3;var num2 = 5;if(num1>nun2){ console.log(num1);}else{ console.log(num2);}

/*伪代码*/如果(条件){ //为 tue执行的代码}否则{ //为 fasle执行的代码}

if else 语句/*嫁给谁？条件：如果男票很帅，就嫁给他；伪代码：如果（男票很帅）{就嫁给他；}否则{ 再等等；}*/

多分支 if ... else if...else语句

if(条件 1){ //当条件 1 为 true 时执行的代码

46

}else if(条件 2){ //当条件 2 为 true 时执行的代码}else{ //当条件 1 和条件 2 都不为 true 时执行的代码}

配合逻辑运算符//1、如果他又帅又有钱，才嫁给他；//2、如果他又帅又有钱，并且还是 JS程序员，才嫁给他//3、如果他帅，或者他有钱，或者是 JS程序员，就嫁给他布尔值为 false 的几种情况//false以下情况//0、undefined、null、-0、NaN、""空字符串、false//非 0的都为 true ； 所有其他值，包括所有对象（数组）都会转成 true

var num = 0;if(num){ console.log(true);}else{ console.log(false);}

第二节 switch

switch语句是 if ... else if语句的简写方式

使用前提：在匹配某个值相对不相等，而不是匹配某个范围的情况下，优先选择 switch语句

语法格式

switch(num){ //表达式，变量，代表如果，与 case做匹配 case 1: //执行代码块 1 break; //中断执行，跳出 ... default: //默认，其他都不是的情况下执行 //执行代码块 break;}//强调：break非常重要，如果不加 break 的话，程序会一直继续往下执行；

第三节 while

循环可以帮助我们重复去做一些事情

47

while循环的特点：不知道具体执行的次数时，使用最合适语法格式while(条件表达式){ //要重复执行的代码段 - 循环体}

循环的执行顺序 - 死循环 - 循环不执行 - 循环变量（自增）var i = 0; //循环变量初始化while(i<100){ // 循环条件判断 循环 100次 console.log("hello"+i); //执行循环体 i++; // 循环变量递增 | 递减 死循环}

第四节 do-while

与while语句相似，语法执行顺序不一样

语法格式：/*规则：先执行一遍循环体，再判断循环条件，如果为 true 就再执行一遍循环体，为 false 就结束循环*/do{ //循环体}while(循环条件判断);

特点：do-while 是先执行循环体，再检测循环条件。do-while 能保证循环体至少执行一次。而其他循环无法保证循环至少执行一次

第五节 for

转变过程for(1循环变量初始化；2循环条件判断；4循环变量的修改){ 3循环体}

for循环过程

1. 循环变量初始化

2. 循环条件判定

3. 执行循环体

4. 循环变量递增或递减

//遍历数组var arr = [2,343,12,4,6,854,867,23]; //8个元素var i=0;

48

while(i<arr.length){ console.log(arr[i]); i++;}---------升级版--------for(var i=0;i<arr.length;i++){ console.log(arr[i]);}

第六节 break和 continue

break 退出循环

var arr = [1,2,4,3,67,85,108];var num = 1080; //在数组中查找的数

var i = 0;while(i<arr.length){ if(arr[i]==num){ // 如果数组中 的 元素 == num 匹配上了 break; //则终止循环 } i++;}

if(i==arr.length){ console.log("没找到");}else{ console.log(num+"出现的索引位置为"+i);}

continue跳过本次循环，继续下一次循环

var i = 100;while(i<200){ //console.log(i); i++; if(i%3 == 0){ continue; // 结束本次循环，马上开始下一次循环 } console.log(i);}

第四章 数组Array （数组）对象用于在单个的变量中存储多个值。

49

第一节 基本应用数组定义// 数组：一次性申请一批存储空间 - 引用类型//var num = 3; //基本数据类型//数组声明方式：可存放任意数据类型，并通过索引来访问每个元素var arr = new Array();var arr = [];

字面量方式定义

var arr = ["张三","李四"];

向数组赋值arr[0] = "张三";arr[1] = "李四";alert(arr[0]+","+arr[1]);

数组索引与对象一样，数组是数值的集合，不同的是对象中每个数值都有一个名字，可以用名字获取对应的值，而数组的每个数值都有一个下标值，用数组[下标值]

alert(arr[0]+","+arr[1]);

数组长度

length属性可以设置或返回数组元素的个数，length属性的值总是比数组定义的最后一个元素的索引值大 1

//语法arr.length

//最后一个元素的索引arr.length-1

修改数组中的值

var arr = ["A","李四","C"];arr[1] = "李四他哥"; //修改元素arr; //["A","李四他哥"，"C"];

数组越界请注意：如果通过索引赋值时，索引超过了范围，同样会使数组大小发生变化var arr = [1,2,3];arr[5] = "t";

50

arr;//arr变为[1,2,3,undefined,undefined,"t"];

第二节 数组方法

indexOf

数组可以通过 indexOf()来搜索一个指定的元素的位置，如未找到返回 -1；var arr = [10,20,"30","abc"];console.log(arr.indexOf(10)); //元素 10的索引为 0console.log(arr.indexOf(30)); //元素 30未找到，返回-1//注意：数字 30和字符串"30"是不同元素

concat

concat()方法把当前的 数组 和 另一个 数组连接起来，并返回一个新的 数组；var arr1 = ["a","b","c"];var arr2 = [1,2,3];var newArr = arr1.concat(arr2,"再次添加");newArr; //["a","b","c",1,2,3,"再次添加"];arr1; //["a","b","c"]

push和 pop

push()向数组的末尾添加若干元素，pop() 则把 数组的最后一个元素删除掉var arr = [1,2];arr.push("a","b");console.log(arr);//[1,2,"a","b"]

arr.pop(); //pop() “返回 b”;arr; //打印[1,2,"a"]

arr.pop();arr.pop();arr.pop(); //连续 3次 poparr; //打印[]

arr.pop(); //空数组继续 pop不会报错，而是返回 undefinedarr;//打印[]

unshift和 shift

unshift() 向数组前面添加若干元素，shift() 则把数组的第一个元素删除掉var arr = [1,2];arr.unshift("a","b"); // 返回新长度 4arr;//打印["a","b",1,2]

arr.shift();//返回"a"arr; //打印["b",1,2]

arr.shift();arr.shift();arr.shift(); //连续 3次arr; //打印[]

51

arr.shift(); //空数组继续删除不报错，返回 undefinedarr; //打印[]

slice

slice() 截取数组的部分元素，然后返回一个新的数组var arr = ["a","b","c","d","e","f","g"];console.log(arr.slice(0,3)); //从索引 0开始，到索引 3结束，但不包括 3：["a","b","c"]console.log(arr.slice(3)); //从索引 3开始到结束："d","e","f","g"

如果不给 slice()传递任何参数，他就会从头到尾截取所有元素。利用这一点，可以很容易的复制一份新的数组var arr = [1,2,3];var aCopy = arr.slice();aCopy; //[1,2,3]

sort

sort() 可以对当前数组排序var arr = ["b","c","a"];arr.sort();arr;//["a","b","c"]

reverse

reverse() 把整个数组的元素给掉个个，也就是反转var arr = ["one","two","three"];arr.reverse();arr; //["three","two","one"]

join

join() 方法把数组的每个元素用指定的字符串连接起来，然后新的字符串var arr = ["a","b","c",1,2,3];arr.join("-"); //"a-b-c-1-2-3"

splice

splice() 方法是修改数组的“万能方法”，他可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素；//splice(索引值，删除数量，"值 1"，"值 2");var arr = ["苹果","橘子","香蕉","芋头","桂圆","山楂"];

//从索引 2开始删除 3个元素，然后再添加两个元素arr.splice(2,3,"白梨","西瓜");console.log(arr); // "苹果","橘子","白梨","西瓜","山楂"

52

//只删除，不添加arr.splice(2,2); //"白梨","西瓜"console.log(arr); //"苹果","橘子","山楂"

//只添加，不删除arr.splice(2,0,"白梨","西瓜");console.log(arr);// "苹果","橘子","白梨","西瓜","山楂"

第三节 二维数组如果数组的某个元素又有一个数组，则可以形成多维数组，例如：var arr = [[1,2,3],["a","b","c"],500];var x = arr[1][1]; //b

第五章 字符串字符串是使用最多的一种数据类型，字符串拥有很多属性和方法。

第一节 字符串属性length

字符串的长度属性第二节 字符串的方法

slice()

slice(start[,end])，start-- 开始索引 end--结束索引

var str = "中华人民共和国";var str1 = str.slice(2,4); //人民

substr()

substr(start[,length])，start：开始，取 length个字符

var str = "中华人民共和国";var str1 = str.substr(2,5); //人民共和国

split()

split([separator[,limit]])，按条件分割字符串，返回数组

var str = "中华人民共和国";var arr = str.split(""); //["中", "华", "人", "民", "共", "和","国"]

53

var str1 = "杏|石|口|路|81|号";var arr1 = str1.split("|"); //["杏", "石", "口", "路", "81", "号"]

indexOf()

在父串中首次出现的位置，从 0 开始！没有返回-1

lastIndexOf()

倒序查找

charAt(index)

charAt(index) 指定索引的字符

toLowerCase()

转小写

toUpperCase()

转大写

第六章 正则表达式

第一节 基本概念

正则表达式（regular expression）描述了一种字符串匹配的模式，他是一个特殊的公式，由原子、元字符、模式修正符组成；它也是一个字符串！只不过是一个特殊的字符串主要实现对字符串的匹配、分割、查找、替换 等操作 正则表达式的主要作用：

• 正则匹配: 可以测试字符串内容是否可以与正则相匹配• 替换文本: 根据模式匹配字符串中的特定内容，进行替换、删除• 提取数据: 根据模式匹配从字符串中提取内容，生成数组

第二节 创建正则表达式通过 new 运算符定义RegExp 是一个对象，可以通过 new 运算符声明一个正则表达式：var re = new RegExp("a","i");//这是个最简单的正则表达式,将匹配字母 a，第二个参数 i,表示匹配时不分大小写

字面量定义

var re=/abc/g;

54

//全文匹配 abc

• 注意: 正则表达式内不要出现空格(除非想匹配空格)

第三节 元字符正则模式当中的元字符，通常都具有特殊的含义元字符 说明a-z 英文小写字母A-Z 英文大写字母0-9 数字\r \n \t 非打印字符\d 数字，相当于 0-9\D \d 取反\w 字母 数字 下划线\W \w 取反\s 空白字符\S 非空白字符[ ] 任意匹配[ ]中单个字符. 匹配任意字符（换行符除外）{n} 匹配 n次{n,} 匹配至少 n次{n,m} 至少 n次，最多m次* 匹配 0 个或多个，相当于{0,}+ 匹配 1 个或多个，相当于{1,}? 匹配 0个或 1个，相当于{0,1}^ 1、匹配正则开头 2、放在[^ ]，内容取反$ 匹配正则结尾| 匹配 | 两侧任选其一( ) 1. 分组 2.子存储

注意：

正则需要转义字符： ( ) { } ? * + . [ ] \ / ^ $ |

第四节 模式修饰符

符号 说明i 忽略大小写g 全文查找

55

m 多行查找（必须与 g 一起实用,并且,当使用^和$模式时才会起作用）var reg=/abc/ig; // 全文查找 忽略大小写

第五节 正则方法

test方法

• 检索字符串中指定的值。 返回 true 或 false。

• 正则内部有个 lastIndex 属性，这个属性记录每一次匹配后的索引位置，该属性与"g"修饰符存在以下关系:

没有 g修饰：lastIndex 属性的值始终为 0，每次执行匹配仅查找字符串中第一个匹配的项。var txt="this a cat, that a dog";var re=/cat/;alert(re.test(txt)); //trueconsole.log(re.lastIndex); //索引是 0alert(re.test(txt)); //true

有 g修饰：找到匹配的项后 lastIndex 的值被设置为匹配内容的下一个字符的索引，用来标识下次执行匹配时开始查找的位置。如果找不到匹配的项 lastIndex 的值会被设置为 0。var txt="this is a cat, that is a dog";var re=/cat/g;alert(re.test(txt)); //trueconsole.log(re.lastIndex); //索引是 10alert(re.test(txt)); //false

一般情况下,使用 test 方法，都不使用 g修饰符。exec 方法该方法用于检索字符串中的正则表达式的匹配，该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

第六节 支持正则的 String方法

方法 说明search() 第一个与正则相匹配的字符串的索引（不执行全局匹配，它将忽略标

志 g）match() 找到一个或多个正则表达式的匹配，没有找到任何匹配的文本，返回

null，否则，返回一个数组replace() 替换与正则表达式匹配的子串split() 把字符串分割为字符串数组

56

第七章 对象在 js 中，对象是属性和方法的集合，变量只能保存单一数据，对象则可以保存多种数据。

第一节 定义对象

//使用 new运算符var obj = new Object();obj.name = "小星";obj.age = 22;obj.sex = "男";

//字面量var obj={ name:"小星"， age:22, sex:"男"}

对象的数据访问

//用.语法obj.name

//用[]语法obj["name"]

JSON

json(JavaScript Object Notation)，是一种轻量级的数据交换格式。它基于 js对象的格式，以 key：value格式存储数据，独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。var man = { "name":"小星", "age":22, "sex":"男"};

• json 的 key 必须是字符串，需要用双引号• json 的 value 可以是数字、字符串、数组、对象• 数据由,分隔，最后一项数据后不能有,号• 字符串类型的值必须使用双引号

57

第二节 内置对象前面章节介绍过了 js 的内置对象，如下：对象 说明Object 是所有 JS 对象的超类(基类），JS 中的所有对象都是继承自 Object 对

象的Array 数组对象--定义数组属性和方法Number 数字对象Boolean 布尔对象--布尔值相关Error 错误对象--处理程序错误Function 函数对象--定义函数属性和方法Math 数学对象Date 日期对象RegExp 对象正则表达式对象--定义文本匹配与筛选规则String 字符串对象--定义字符串属性和方法前面章节中介绍过了 Array（数组）对象、String（字符串）对象、RegExp（正则）对象的一些使用方法，下面介绍Math（数学）对象、Date（日期）对象的使用。

第三节 Math 方法

方法 说明abs() 绝对值 （去除正负）random()

随机数，0-1 之间的随机数，1不会出现round() 四舍五入floor(x) 下舍入(向下取整)ceil(x) 上舍入(向上取整)max(x,y) x 和 y 中的最大值min(x,y) x 和 y 中的最小值cos(x) 的余弦sin(x) x的正弦sqrt(x) 返回 x的平方根pow(3,4) 返回 3的 4次方

random()

随机数 0-1 之间的随机数（1不会出现）， Date 方法：方法 说明

58

getFullYear() 返回 年（4位）getMouth() 返回 月（0--11）getDate() 返回 天getDay() 返回 星期 （0-6）getHours() 返回 小时getMinutes() 返回 分钟getSeconds() 返回秒getTime() 返回 1970年 1月 1日午夜到指定日期（字符串）的毫秒数setFullYear() 设置 年份setMouth() 设置 月setDate() 设置 天setHours() 设置小时setMinutes() 设置 分钟setSeconds() 设置 秒setTime() 使用毫秒的形式设置时间对象

注意:setDay( 这个真没有!!!!,星期是通过设定日期自动计算的 )setFullYear(year，month，day)//year：必需，表示年份的四位整数//month：可选, 介于 0 ~ 11 之间：如果不填，取系统当月 //-1为去年的最后一个月,12为明年的第一个月 //13为明年的第二个月//day：可选,表示月中某一天的数值。如果不填，取系统当日 //用本地时间表示。介于 1 ~ 31 之间： //0 为上个月最后一天 //-1 为上个月最后一天之前的天数 //如果当月有 31天: 32 为下个月的第一天 //如果当月有 30天: 32 为下一个月的第二天setHours(hour,min,sec,millisec)//可以有 4个参数//hour：小时//min：分钟//sec：秒//millisec：毫秒

//例：现在时间：13:11:43var date = new Date(2012, 2, 15, 13, 11, 43);//2012年 3月 15 日 13:11:43

//判断闰年function runYear(year){

if(year%4==0 && year%100!=0 || year%400==0){return true;

}};

59

第八章 面向对象

JavaScript是基于对象编程的，面向对象是一种编程思想。

第一节 类和对象

• 类：我们善于将事物进行分类，类是一个抽象的概念• 对象：具体的事物

– 猫是一类

– 楼下的大黄 对象

• 类是对象的抽象，对象是类的具体事例• 类不占用内存，对象占用内存空间• 对象的访问

• 声明对象

– 字面量声明 var obj = {}

– new运算符

var obj = new Object();

• 定义对象的属性和方法

– . 语法 ：oBox.id = "abc"

– [] 方括号语法 oBox["id"]= "abc"

• 遍历对象

– for in 循环

– 多用于遍历 json

var obj = { name:"zhangsan", age:20,}for(var key in obj){ console.log(key,obj.key)}//name,zhangsan//age,20

• 检测对象有没有某个属性if ("name" in obj)if (obj.name === undefined)

60

• 删除对象的属性 delete arr.name

第二节 定义对象

字面量创建

假如我们把猫看成是一类，都有名字和颜色的属性，那么，每一只猫就是这个类的实例，我们可以使用字面量方式定义对象：var cat1 = { name:"大黄", color:"黄色", say:function(){ alert("miao") }};

var cat2 = { name:"小黑", color:"黑色", say:function(){ alert("miao") }};

这样创建对象，一是创建对象比较麻烦，二是实例与原型（猫类）之间，没有任何联系。工厂模式可以写一个函数，批量创建对象（工厂模式中的函数，首字母大写）：function Cat(n,c){ return { name:n, color:c, say:function(){ alert("miao") } }}

生成实例对象，就等于是在调用函数var cat1 = Cat("大黄","黄色");var cat2 = Cat("小黑","黑色")

这样代码虽然简单了，但是实例之间还是没有什么联系

构造函数

• 为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。

• 所谓"构造函数"，其实就是一个普通函数，但是内部使用了 this 变量。对构造函数使用 new 运算符，

61

就能生成实例，并且 this 变量会绑定在实例对象上。• 构造函数首字母大写

• 构造函数中的 this，指向的事实例化的对象function Cat(n,c){ this.name=n; this.color=c;}

• 生成实例对象

var cat1 = new Cat("大黄","黄色")var cat2 = new Cat("小黑","黑色")

• 这时 cat1和 cat2会自动含有一个 constructor属性，指向它们的构造函数。

alert(cat1.constructor == Cat); //truealert(cat2.constructor == Cat); //true

• Javascript还提供了一个 instanceof运算符，验证原型对象与实例对象之间的关系。

• instanceof不认为原始类型值的变量是对象

var txt='adsdf';alert(txt instanceof String);//false

var age=123123;alert(age instanceof Number);//false

var re=/\d/;alert(re instanceof RegExp);//true

var arr=[];alert(arr instanceof Array)//true

第三节 原型和原型链

• 每类对象的实例对象，都有可能会有一些相同的属性，或者相同的功能，如果都写在构造函数上，会造成重复的内容，占用更多的内存。

• 为了解决这种代码的重复– 构造函数都有一个 prototype 属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

– 我们可以把那些不变的属性和方法，直接定义在 prototype 对象上。Cat.protoType.say = function(){ alert("miao")}cat1.say() //miaocat2.say() //miao

62

• 所有的函数都是 Function 的实例。在构造函数上都有一个原型属性---prototype，prototype也是一个 对象；这个对象上有一个 constructor 属性，该属性指向的就是构造函数。

• 而实例对象上有一个_proto_属性，该属性也指向原型对象，该属性不是标准属性，不可以用在编程中，该属性用于浏览器内部使用。

第四节 常用的 JavaScript设计模式

• 设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。

• 使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的；设计模式使代码编制真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。

单体模式• 单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果他可以被实例化，那么他只能被实例化一次。

• 特点：（1）可以来划分命名空间，从而清除全局变量所带来的危险。（2）利用分支技术来来封装浏览器之间的差异。（3）可以把代码组织的更为一体，便于阅读和维护。

代码实现/*Basic Singleton*/var Singleton = {

attribute:true,

method1:function(){},

method2:function(){}

};• 应用场景：• 单体模式在我们平时的应用中用的比较多的，相当于把我们的代码封装在一个起来，只是暴露一个

入口，从而避免全部变量的污染。工厂模式• 工厂模式的定义：提供创建对象的接口，意思就是根据领导（调用者）的指示（参数），生产相应

的产品（对象）。• 创建一个对象常常需要复杂的过程，所以不适合在一个复杂的对象中。• 创建对象可能会导致大量的重复代码，也可能提供不了足够级别的抽象。

63

• 工厂就是把成员对象的创建工作转交给一个外部对象，好处在于消除对象之间的耦合(也就是相互影响)。

• 分类：• 简单工厂模式：使用一个类，通常为单体，来生成实例。• 复杂工厂模式定义是：将其成员对象的实列化推到子类中，子类可以重写父类接口方法以便创建的

时候指定自己的对象类型。• 父类只对创建过程中的一般性问题进行处理，这些处理会被子类继承，子类之间是相互独立的，具

体的业务逻辑会放在子类中进行编写。• 应用场景：• 以下几种情景下工厂模式特别有用：（1）对象的构建十分复杂；（2）需要依赖具体环境创建不同实例；（3）处理大量具有相同属性的小对象。

单例模式• 单例模式定义了一个对象的创建过程，此对象只有一个单独的实例，并提供一个访问它的全局访问

点。也可以说单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。

代码实现单例的实现有很多种，下面只介绍其中的一种，使用闭包方式来实现单例，代码如下：var single = (function(){ var unique;

function getInstance(){ // 如果该实例存在，则直接返回，否则就对其实例化 if( unique === undefined ){ unique = new Construct(); } return unique; }

function Construct(){ // ... 生成单例的构造函数的代码 }

return { getInstance : getInstance }})();• 上面的代码中，unique便是返回对象的引用，而 getInstance便是静态方法获得实例。Construct 便

是创建实例的构造函数。• 可以通过 single.getInstance() 来获取到单例，并且每次调用均获取到同一个单例。这就是 单例模式

64

所实现的效果。• 应用场景：• 单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如全局缓存、浏览器的 window

对象。在 js 开发中，单例模式的用途同样非常广泛。试想一下，当我们单击登录按钮的时候，页面中会出现一个登录框，而这个浮窗是唯一的，无论单击多少次登录按钮，这个浮窗只会被创建一次。因此这个登录浮窗就适合用单例模式。

• 总结一下它的使用场景：• （1）可以用它来划分命名空间。• （2）借助单例模式，可以把代码组织的更为一致，方便阅读与维护。

第九章 函数函数用来整合一段代码，以备后面重复使用。函数用来表示一个行为，是一个独立的功能

第一节 函数的定义

//使用关键字 function 定义函数//定义函数，吃饭function chifan(){ console.log("点餐"); console.log("拿筷子"); console.log("吃东西")；}//直接调用函数chifan()；

//按钮点击调用oBox.onclick = chifan;

-----------------------------

function say(){ for(var i=0;i<3;i++){ console.log("重要的话说三遍！")； }}say();

-----------------------------//通过变量声明的函数，say调用必须出现在函数之后；否则会报错未定义var say = function(){ for(var i=0;i<3;i++){ console.log("重要的话说三遍！"); }}say(); //这里调用需要放在后面

65

第二节 局部变量和全局变量变量的作用域函数体内的变量：局部变量，仅在函数体内可以使用函数体外的变量：全局变量，对全局可见局部变量

function home(){ var wc = "我是家里的卫生间"；//局部变量 alert(wc);}home(); //调用alert(wc); //报错访问不到，函数体外对 wc不可见

全局变量

var wc = "我是全局变量";function home(){ var wc = "我是局部变量"; alert(wc);}home();

-----------------------

var a=3; //全局function wc(){ alert(a); //3 var b=5; alert(b);//5}wc();console.log(b); //报错，访问不到

典型错误，不使用 var声明的变量也是全局变量（不建议这样用）function home(){

wc = "我是私家厕所"; // 全局变量} home(); alert(wc);

第三节 函数参数

为了扩展函数的灵活性，可以将代码中可变化的部分提取出来，用变量代替function cooking(fu,zhu){

console.log(fu+"拌"+zhu+"做好啦！");

66

}cooking("糖","西红柿");cooking("醋","黄瓜");

第四节 返回值函数代表一个行为，返回值表示这个行为的结果return的含义

//理解返回值function getNum(){

return 2; //return的作用，将函数的结果返回给当前函数名}var result = getNum(); //如果希望返回值保存，就放在变量中；console.log(result); //2

return使用方法

• return只能返回一个数据• 如果函数中没有 return，则返回 undefined

return可以用来结束一个函数

function Fun(){ console.log("helloweb"); return; console.log("我还会执行吗？");}Fun();

function fn(){ for(var i=0;i<10;i++){ if(i == 3){ //循环 3次就 return break; } console.log("谁最帅！") ； //打印 3次 } return "看 return会不会执行我"； //return不执行，break执行}

第五节 匿名函数匿名函数没有名字的函数，可以将函数也看成一种数据，可以将它赋值给一个变量；//使用函数表达式定义函数//say本质上是一个指向函数对象的变量，我们称为函数变量var say = function(){ console.log("hello");}；say();

67

例子：

var oBtn = document.getElementById("box");oBth.onclick = function(){ alert("你点击我啦");}

第六节 自运行函数不用调用，自己执行，叫自运行函数function fn(){ //这里是代码}fn(); //运行 fn函数

----------------------

var fn = function(){ //这里是代码}fn(); //运行 fn函数

---------------------

//(fn)() 等价于 fn()(function(){ //这里是代码})()

第七节 闭包闭包 (closure)有权访问另外一个函数作用域中的变量的函数。创建闭包的常见方式有：• 在一个函数内部创建另外一个函数，并且把这个函数 return 出去。• 用函数为元素绑定事件，当事件发生时，还可以操作该函数中的变量。特性可以读取其它函数内部的变量让这些变量的值始终保持在内存中//方式 1----函数内部 return一个函数function run(){ var a=10; return function(){ a++; console.log(a); };};

68

var b=run();//alert(b); //b是一个函数

b();//可以访问另外一个作用域中变量的函数

//方式 2--函数内部为绑定事件function addClick(){ var txt="abcd"; document.getElementById('box').onclick=function(){ alert(txt); }};addClick();

//方式 3--函数内部将变量作为回调函数的参数function play(num,fn){ if(num>10){ return fn && fn(num); };};

var ss=play(20,function(n){ return n+1;});

console.log(ss);

第十章 BOM

第一节 BOM 概述BOM（browser object model）浏览器对象模型BOM提供了独立于内容而与浏览器窗口进行交互的对象、载入页面的相关信息，其核心对象是 window对象BOM 没有相关标准，每个浏览器都定义了自己的属性，并且，都有其自己对 BOM 的实现方式。W3C虽然没有为 BOM统一制定标准,但是其中的窗口对象、导航对象等,因功能趋同,实际上已经成为默认的标准。

第二节 BOM 对象window 对象window 对象（宿主对象）表示一个浏览器窗口（或一个框架），所有浏览器的属性和方法，都被定义在 window这个对象之上。 js 通过 window 对象，就可以对浏览器进行操作（读取/修改浏览器属性、操作标签元素、响应用户事件等）。 window对象是全局对象，并且是唯一的，因此在使用中可以省略不

写，例如：可以只写 document ，而不必写 window.document。同样，可以把window对象的方法当作函

69

数来使用，如只写 alert()，而不必写window.alert()。

window方法window的方法 说明alert() 提示框confirm() 带有确认 取消 按钮的提示框prompt() 带有可输入内容的文本域的提示框setInterval() 间隔定时器，可按照指定的周期（以毫秒计）来调用函

数或计算表达式setTimeout() 超时定时器，在指定的毫秒数后调用函数clearInterval() 清除间隔定时器clearTimeout() 清除超时定时器requestAnimationFrame 帧定时器

frames [ ] 框架集

把浏览器窗口分成几个窗框，每个窗框同时取得多个 URL地址，显示不同网页内容。history 历史记录

window.history.go(1) 前进（跳转）

window.history.go(-1) 后退（跳转）

window.history.forward() 前进

window.history.back() 后退

location 定位

window.location.href='http://www.baidu.com/' 页面跳转window.location.reload() 页面重载

navigator 导航

window.navigator.userAgent 浏览器类型、版本、操作系统类型、浏览器引擎类型等信息

screen 屏幕

window.screen.width 返回当前屏幕宽度(分辨率值)

window.screen.height 返回当前屏幕高度(分辨率值)

document 文档

window的 document的属性，代表所有 html的元素，这部分是 js主要操作的部分，因此这部分必须规范，才能进行统一开发。因此，W3C 将这部分进行了规范---DOM 标准。

70

第十一章 DOM

第一节 DOM概述

DOM介绍

DOM（document object model ）文档对象模型，定义了表示和修改文档所需的对象、行为和属性，以及这些对象之间的关系。

当你想要改变网页行为的时候你该怎么办呢？你不会用脚来踹网页或者用头来顶网页吧？这时候怎么办呢 ？而你手中有 javascript 这种工具！所以你就会考虑用 javascript来改变网页行为，而这时候你会想我怎么改变呢？而我发现网页原来有接口的，就好像你推车有车柄一样，你可以作用于车柄让它往前走，同样的你也会作用于网页的接口改变他的行为，而这个接口就是 DOM。所以 javascript 和 DOM 就好像你的手和车柄一样，你不会用你的头去撞车柄，同样你也不会用 CSS去改变网页行为！当然手也不只是限于推车，还可以做别的事情，javascript也一样可以干别的事情！DOM历史

DOM 0级：0级DOM被认为是在 IE 4.0 与Netscape Navigator4.0支持的最早的DHTML（早期原始版本，所有浏览器都支持）

DOM 1级：1998年，W3C 发布了第 1 级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素（所有浏览器都支持）。DOM 2 级: 对 DOM1 做了扩展（所有浏览器均支持）DOM 3 级: 对 DOM1、2 做了进一步的扩展（火狐、谷歌、IE9 以上浏览器支持）

第二节 DOM对象方法

方法 说明getElementById(id） 通过 id 获取 DOM 对象（对象）getElementsByTagName(tag) 通过标签获取 DOM 对象（“类似数组”对

象）getElementsByName(name) 通过 name 获取 DOM 对象（“类似数组”对

象）getElementsByIdClassName(class) 通过 class获取DOM对象（IE8以下不支持）

注意:

“类似数组”对象是模仿数组操作的方法来操作，结构如下：

71

{"0":element1,"1":element2,"2":element3,"length":3

}

第三节 DOM对象属性

html 标签的标准属性oDiv.id id 属性 oDiv.title 标题属性 其他（略）

• className属性

className用于读取/设置对象的 class（class作为 js 语言的保留字 所以用 className）

• style属性

style 属性包含着元素的样式，查询这个属性返回的是一个对象而不是一个简单的字符串。样式都存放在这个 style 对象的属性里

注意 ： style 属性只能读取到标签的行内样式 ( 使用 window.getComputedStyle方法读取 CSS样式);

offset 系列属性 （offset：偏移）

offsetWidth 宽度 offsetHeight 高度 offsetLeft 左 计算到有定位（position ）属性的父级 offsetTop 上 计算到有定位（position ）属性的父级 offsetParent 父级 有定位（position）属性的父级

注意 ： 元素隐藏(display:none)无法读取以上属性

innerHTML属性

元素的内部 html 内容 innerHTML很多情况下都优于 document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分

表单属性

表单是一类特殊标签，可以通过操作表单的特有属性，完成数据提交等功能，例： value 属性 text radio checkbox select等读取/ 设定值 disabled 属性 禁用元素（例：禁用按钮）

第四节 操作 DOM 对象属性和内容操作 html 标签任何一个 html 标签都包括标签名、内容、属性，本节讲解如何操作一个标签• 标签名：tagName

• 内容：innerHTML | innerText

72

讲解二者的区别

• innerHTML的坑：在用字符串方法增加 innerHTML 时，会覆盖原有内容，原有内容绑定的方法将消失

html 属性 attribute

• 相关方法

– setAttribute：html的属性称为 attribute

– getAttribute：

• obj.id 和 obj.getAttribute('id') 得到 id属性的区别，一个是属性，一个是节点

• html标签属性的数据类型：string

– hasAttribute

– removeAttribute

• 操作

– 标准 html属性

• 例：操作 src

• 例：操作 style

强调 background-color 在 js 中驼峰命名

– 非标准 html属性

• html 标签内可以自定义任意属性（记录数据）第五节 操作 DOM 间的关系

操作DOM元素

方法 说明createElement(tag) 创建元素removeChild(对象) 删除元素appendChild(对象) 插入元素replaceChild(替换对象，被替换对象) 替换元素insertBefore(对象，目标对象) 前部插入

注意：

appendChild replaceChild insertBefore 都具有移动对象的功能

DOM节点属性

DOM结构就象树一样，从文档根(document)，逐步分支展开

73

• 节点属性

每一个元素，都可以看作是树的一个分支节点每一个元素（节点）之间都存在着如下的一些关系：根结点 父结点 子结点 兄弟结点

节点属性W3C (包含文本/注释节点)

DOM3新增( 不包含文本/注释节点,IE9 以上 )

父节点 parentNode第一级所以子节点

childNodes children(兼容 IE6\7\8)

第一个子节点 firstChild firstElementChild最后一个子节点

lastChild lastElementChild

前一个兄弟节点

previousSbiling previousElementSibling

后一个兄弟节点

nextSibling nextElementSibling

克隆节点

cloneNode( 布尔值 ) true ：复制本节点以及所有子节点 false：只复制节点本身

节点类型

nodeType属性，例：

alert(oDiv.nodeType)

共有 12 种节点类型,以下是常用的 5 种:

编号 类型 说明1 Element 元素2 Attr 属性3 Text 元素的文本内容8 Comment 注释9 Document 整个文档（DOM树的根节点）10 DOCTYP

E文档类型声明<!DOCTYPE html>

第六节 DOM节点属性( Attribute )

每一个DOM 标签上，都默认会带有一些属性，例如： id 、class、title等，这些属性统称为DOM元素的 attribute（特性）

DOM 为我们提供了如下的方法来操作这些属性：setAttribute("属性名",属性值) 设置属性

74

getAttribute( 属性名 ) 获取属性

removeAttribute( 属性名 ) 删除属性:

hasAttributes(属性名) 判断属性是否存在（返回 ture/false）

attribute 与 property

• attribute

是每个 DOM 元素上的属性节点• property

JS 以对象的方式定义的属性（通常使用“.”点语法）• 相同点:

property 和 attribute，都可以读取/设定 html标签上的特性值

• 不同点:

attribute（特性） property（属性）DOM方法定义的特性 js 对象方式定义的属性DOM 标签上可以看到 DOM 标签上看不到(只保存在内存中)用 setAttribute定义特性 直接用"."点语法定义属性特性值是字符串 string 类型 属性值可以是任何类型

注意:

用 setAttribute 设定的特性，用 getAttribute 获取用"."语法设定的属性，用"."语法读取

第十二章 事件第一节 事件

用户在浏览网页时，会产生各种各样的交互事件，比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是通过操作 DOM上的一类特殊属性来实现的--------DOM 事件，不同的 DOM 事件会有不同的触发条件和交互效果。有些DOM 事件是所有 DOM 对象都有的，而有些DOM 事件，是部分 DOM 对象独有的。• 什么是事件

– 不同标签，有相同的事件，也有不同的事件– 当 事件 发生的时候，要做什么事（函数）

75

• 事件的触发（事件处理函数的调用）– 谁调用事件处理函数？？---函数只有调用才能执行

• 绑定事件（DOM0级）

通过为 DOM 对象的事件属性赋值一个函数的方式，为 DOM 元素绑定事件，当该对象的事件被触发时，调用这个函数，例如:

var oDiv=document.getElementById('box');oDiv.onclick=function(){ //为 oDiv绑定鼠标的点击(onclick)事件,当点击这个 div时,这个函数将会运行

alert('hello world'); //系统提示框};

//匿名函数//函数变量

• 事件监听(DOM2级方法)

– addEventListener( ) 增加事件监听 (可以为一个元素，同时绑定多个事件)

– removeEventListener( ) 删除事件监听

• 事件分类

– window事件

• onload 加载（某个页面或图像被完成）• onunload 用户退出页面

• onresize 窗口或框架被调整尺寸

• onscroll 滚动条事件

– 鼠标事件

• onclick 鼠标点击

• ondblclick 鼠标双击

• onmousedown 鼠标按键按下

• onmouseup 鼠标按键被松开

• onmouseout 鼠标从某元素移开

• onmouseover 鼠标被移到某元素之上

• onmouseenter 鼠标进入某元素

• onmouseleave 鼠标离开某元素

• onmousemove 鼠标移动

• oncontextmenu 右键菜单

76

– input事件

• onblur 元素失去焦点。文本输入框案例 →判断数字 isNaN → js 全局函数• onfocus 元素获得焦点。input输入框

• onchange 内容改变时触发。select选择，select.value 默认选项

– 键盘事件

• onkeydown 按键按下

• onkeypress 按键按下并释放

• onkeyup 按键释放

– form事件

• onreset 表单重置（重置按钮）

• onsubmit 表单提交(form内有 text被聚焦，直接回车可触发 onsubmit)

第二节 事件对象（Event）

鼠标在在页面上滑动，肯定是鼠标的 onmousemve 事件，如何得到鼠标的坐标值呢？一定会有个地方存储着这些值，方便我们去读取。获取事件数据，不同的事件会有不同数据绑定在事件上的匿名函数，只可以有一个参数，并且，这个参数就代表事件对象oDiv.onclick=function(ev){

//ev就是事件对象}//区别事件对象和函数传参

• 事件对象的相关属性:

键盘属性 说明ev.keyCode 键盘编号ev.ctrlKey Ctrl 键按下 ev.ctrlKey==1ev.altKey Alt 键按下 ev.altKey==1ev.shiftKey Shift 键按下 ev.shiftKey==1鼠标属性 说明ev.button 鼠标按钮 0：左键 1：中键 2：右键ev.clientX 鼠标指针的水平坐标ev.clientY 鼠标指针的垂直坐标ev.target 触发事件的目标元素

77

第三节 事件流

事件默认行为

• 很多的网页元素都会有默认的行为，比如说当你点击一下超链接 a 标签的时候，它会有一个跳转的行为；当你在网页上点鼠标右键时会出现一个右键菜单；这些行为，并不是通过绑定函数来实现的，这类行为被称为对象的默认行为

• 阻止默认行为：event.preventDefaut()

事件流

w3c 标准的事件流方向：捕获 → 事件目标→冒泡• 事件捕获

• 事件目标

• 事件冒泡 与 阻止事件冒泡

事件目标

• ev.targrt

• ev.target.nodeName

• ev.target.tagName

事件委派(delegate)

• 原理

将事件绑定在父级上，利用事件冒泡原理，通过判断事件的“目标元素”来触发父级上绑定的事件• 作用

– 不用分别为子元素绑定事件– 为未知元素绑定事件

第四节 事件监听（DOM2 级事件）可以为一个元素，同时绑定多个事件obj.addEventListener(事件，回调函数，冒泡/捕获) ;

btn.addEventListener("click",function(ev){ //ev 事件对象

alert(1212);

},false) //false 冒泡阶段

78

注意:

事件监听只能通过 JS 方式绑定在 DOM 对象上，不能通过标签事件绑定(标签上只有 onclick等原始事件)

• 阻止默认事件（DOM2 级事件）通过事件监听绑定的事件,不能用 return false阻止默认事件，必须通过 ev事件对象来阻止:

ev.preventDefault();//W3C 事件对象方式阻止默认事件

第四篇 轻量级框架应用 第一章 jQuery简介

第一节 jQuery是什么

• jQuery是一个 JavaScript库，它通过封装原生的 JavaScript函数得到一整套定义好的方法。

• 开发 jQuery ——库的目的是 WRITE LESS,DO MORE（写的少，做的多）。它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。

• 它的作者是 John Resig，于 2006年创建的一个开源项目，随着越来越多开发者的加入 jQuery已经集成了 JavaScript、CSS、DOM和Ajax于一体的强大功能。

第二节 jQuery主要功能

• 一款轻量级的 js库

• 丰富的DOM选择器

• 简单的事件操作

• 重新封装方法，让操作 DOM 属性更简单• 链式操作

• 丰富的动画效果

• Ajax操作支持

• 浏览器兼容

• 插件扩展开发，可扩展性强 第三节 jQuery对象

• jQuery 是一个构造函数，通过内置选择器对 DOM 元素进行“包装”，使之成为 jQuery 对象，这些对象继承了 jQuery 原型上定义的所有方法。

79

• jQuery将大量DOM操作定义成了方法（prototype上定义的函数），大大简化了DOM操作。

• JQuery 与 符，是 jQuery的别名（为了方便使用）

第四节 jQuery的缺点

不能向后兼容

每一个新版本不能兼容早期的版本。举例来说，有些新版本不再支持某些 selector，新版 jQuery却没有保留对它们的支持，而只是简单的将其移除。这可能会影响到开发者已经编写好的代码或插件。插件兼容性与上一点类似，当新版 jQuery推出后，如果开发者想升级的话，要看插件作者是否支持。通常情况下，在最新版 jQuery版本下，现有插件可能无法正常使用。开发者使用的插件越多，这种情况发生的几率也越高。多个插件冲突在同一页面上使用多个插件时，很容易碰到冲突现象，尤其是这些插件依赖相同事件或 selector 时最为明显。这虽然不是 jQuery 自身的问题，但却又确实是一个难于调试和解决的问题。

第二章 选择器第一节 基本选择器

• id选择器

$('#box')

• class选择器

$('.box')

• 标记选择器

$('p')

• * 代表所有标签

第二节 属性选择器

• [attribute] 匹配包含给定属性的元素

• [attribute=value]匹配给定的属性是某个特定值的元素

• [attribute!=value]匹配给定的属性不是某个特定值的元素

80

• [attribute^=value] 匹配给定的属性是以某些值开始的元素

• [attribute$=value] 配给定的属性是以某些值结尾的元素

• [attribute*=value] 匹配给定的属性是以包含某些值的元素

第三节 位置选择器

• :first

匹配第一个元素

• :last

获取最后一个元素

• :not

去除所有与给定选择器匹配的元素• :even

匹配所有索引值为偶数的元素，从 0 开始计数• :odd

匹配所有索引值为奇数的元素，从 0 开始计数• :eq

匹配一个给定索引值的元素• :gt

匹配所有大于给定索引值的元素• :lt

匹配所有小于给定索引值的元素第四节 后代选择器

后代选择器就是在给定祖先元素下匹配所有的后代元素，一个元素的后代可能是该元素的一个孩子、孙子、曾孙等。后代选择器中间是空格，它的的语法：$("选择器 1 选择器 2 ……")

第五节 子代选择器子代选择器是在给定父元素下匹配所有的子元素，这里的子元素只能是自己的孩子元素，不能是孙子，曾孙子里面的元素。后代选择器得到的内容包含子代选择器选择的内容。子代选择器的语法：

81

$("选择器 1>选择器 2>……")

第六节 选择器对象选择器对象找的是页面元素，选择器里面存放的都是一个一个 HTML 节点元素。选择器对象相关方法：$("选择器").each(function(index){this}) 选择器对象的遍历$("选择器").find() 找前面选择器匹配到的元素的子元素$("选择器").not() 在前面选择器匹配到的元素中去除某个或某多个$("选择器").add() 在前面选择器中在追加节点

第七节 选择器对象遍历应用及页面初始化• 选择器对象遍历应用

例子：有 5 个 li，给每个 li 加上 title 属性。这就需要先遍历这五个<li>标签，然后追加 title 属性。运行结果不方便截图，可以通过以下代码，自行测试，然后将鼠标分别放在<li>上看是否会出现提示语。• 页面初始化

现在将 JQuery 的函数放在页面最下方，是为了等页面加载结束之后，再运行代码，其实可以将代码放在<head>标签里面。只需将 JQuery 的函数代码放到以下函数就可以等到页面加载结束再运行。

第八节 子元素、表单、表单对象属性选择器子元素

• :first-child 匹配第一个子元素

• :last-child 匹配最后一个子元素

• :first-of-type 选择所有相同的元素名称的第一个兄弟元素

• :last-of-type 选择所有相同的元素名称的最后一个兄弟元素

• :nth-child 匹配其父元素下的第N个子或奇偶元素

• :nth-last-child() 选择所有他们父元素的第 n个子元素。计数从最后一个元素开始到第一个

• :nth-last-of-type() 选择的所有他们的父级元素的第 n个子元素，计数从最后一个元素到第一个

• :nth-of-type() 选择同属于一个父元素之下，并且标签名相同的子元素中的第 n个

• :only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配

• :only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素。

82

表单

• :input 匹配所有 input, textarea, select 和 button 元素

• :text 匹配所有的单行文本框

• :password 匹配所有密码框

• :radio 匹配所有单选按钮

• :checkbox 匹配所有复选框

• :submit 匹配所有提交按钮

• :image 匹配所有图像域

• :reset 匹配所有重置按钮

• :button 匹配所有按钮

• :file 匹配所有文件域

• :hidden 匹配所有隐藏域

表单对象属性

• :enabled 匹配所有可用元素

• :disabled 匹配所有禁用元素

• :checked 匹配所有选中的被选中元素(复选框、单选框等，不包括 select中的 option)

• :selected 匹配所有选中的 option元素（select元素用）

第九节 层级选择器

//匹配所有后代元素$('div span')

//匹配直接子元素$('div>span')

// 匹配所有紧接在 prev 元素后的 next 元素//$("prev + next")

// 匹配 prev 元素的所有同辈 siblings 元素$("prev ~ siblings")

第三章 DOM 操作第一节 查找获取

• text() - 设置或返回所选元素的文本内容

83

• html() - 设置或返回所选元素的内容（包括 HTML 标记）• val() - 设置或返回表单字段的值

第二节 插入

内部插入• append() 向每个匹配的元素内部追加内容

• appendTo() 把所有匹配的元素追加到另一个指定的元素集合中

• prepend() 向每个匹配的元素内部前置内容

• prependTo() 把所有匹配的元素前置到另一个、指定的元素集合中

外部插入• after() 在每个匹配的元素之后插入内容

• before() 在每个匹配的元素之前插入内容

• insertAfter() 把所有匹配的元素插入到另一个、指定的元素集合的后面

• insertBefore() 把所有匹配的元素插入到另一个、指定的元素集合的前面

第三节 包裹

• wrap() 把所有匹配的元素用其他元素的结构化标记包裹起来• unwrap() 这个方法将移出元素的父元素。 这能快速取消 .wrap()方法的效果

• wrapAll() 将所有匹配的元素用单个元素包裹起来• wrapInner() 将每一个匹配的元素的子内容(包括文本节点)用一个 HTML 结构包裹起来

第四节 替换

• replaceWith() 将所有匹配的元素替换成指定的HTML或DOM元素

• replaceAll() 用匹配的元素替换掉所有 selector匹配到的元素

第五节 删除

• empty() 删除匹配的元素集合中所有的子节点• remove() 从DOM中删除所有匹配的元素

第六节 克隆

• clone() 克隆匹配的DOM元素并且选中这些克隆的副本

84

第四章 筛选

第一节 过滤

• eq() 获取第N个元素

• first() 获取第一个元素

• last() 获取最后一个元素

• hasClass() 检查当前的元素是否含有某个特定的类（如果有，则返回 true）

• filter() 筛选出与指定表达式匹配的元素集合

• is() 匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回 true。• has() 保留包含特定后代的元素，去掉那些不含有指定后代的元素

• not() 删除与指定表达式匹配的元素

• slice(start,end) 选取一个匹配的子集

第二节 查找

• children() 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

• closest() 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素

• find() 搜索所有与指定表达式匹配的元素

• next() 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合• nextall() 查找当前元素之后所有的同辈元素

• nextUntil() 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止

• offsetParent() 返回第一个匹配元素用于定位的父节点

• parent() 取得一个包含着所有匹配元素的唯一父元素的元素集合

• parents() 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

• parentsUntil() 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止

• prev() 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合• prevall() 查找当前元素之前所有的同辈元素

• prevUntil() 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止

• siblings() 取得一个包含匹配的元素集合中每一个元素的兄弟元素集合

85

第三节 串联

• add() 把与表达式匹配的元素添加到 jQuery对象中

• end() 回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。第五章 JQuery 事件

第一节 页面载入• ready(fn) 当DOM 载入就绪可以查询及操纵时绑定一个要执行的函数$(document).ready(function(){

})

//简写方式$(function(){

})

第二节 事件绑定

• on() 在选择元素上绑定一个或多个事件的事件处理函数$("#box").on("click",function(){ /**/})

• off() 在选择元素上移除一个或多个事件的处理函数$("#box").off("click,mousemove");

第三节 鼠标事件

• click()事件：用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。• dbclick()事件：在用户完成迅速连续的两次点击之后触发，双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用。

• mousedown()事件：在用户敲击鼠标键时触发，跟 keydown 事件不一样，该事件仅在按下鼠标时触发。

• mouseup()事件：在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么 click 事件也会触发。

• hover() 事件： 一个模仿悬停事件（鼠标 over及 out）的方法。

86

第四节 键盘事件

• keydown()事件：当键盘或按钮被按下时，发生 keydown 事件。• keyup()事件：当键盘键被松开时发生 keyup 事件。• keypress()事件：当键盘或按钮被按下时，发生 keypress事件。

第五节 表单事件

• submit()事件：当提交表单时，会发生 submit 事件。• change()事件：当元素的值发生改变时，会发生 change事件。

第六节 文档窗口事件

• scroll()事件：当用户滚动指定的元素时，会发生 scroll 事件。• resize()事件：当调整浏览器窗口的大小时，发生 resize事件。

第七节 事件冒泡

适用的事件类型主要有键盘事件：keypress、keydown、keyup，以及鼠标事件：mouseup、mousedown。

• ev.pageX 鼠标相对于文档的左边缘的位置• ev.pageY 鼠标相对于文档的上边缘的位置• ev.stopPropagation() 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

• ev.preventDefault() 阻止默认事件行为的触发

• ev.target 最初触发事件的DOM元素

• ev.which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮第六章 效果

第一节 容器适应• 获取元素的宽高有以下几种方法： $(选择器).width() | innerWidth() | outerWidth()

$(选择器).height() | innerHeight() | outerHeight()

其中宽和高分别有三个方法： width()和 height()是指元素里面内容的宽高；

innerWidth()和 innerHeight()是指元素里面内容的宽高加上内边距的宽高；

87

outerWidth()和 outerHeight()是指元素里面内容的宽高加上内边距的宽高和边框；

• 获取窗口的宽高的方法如下： $(window).width()

$(window).height()

第二节 标签操作

标签内容操作

标签内容的操作，这个内容分为输入框中的值，比如单行文本框的值、文本 域的值和下拉框中的值等；还有 html 内容，html 是不过滤 html 标签的，而 text 是过滤 html 标签的。 (选择器) . val([值])：设置或返回所选元素的文本内容(选择器).html([值])：设置或返回所选元素的内容（包括 HTML 标记） $(选择器).text ([值]):设置或返回表单字段的值标签属性操作标签属性的操作就是唯一一个方法，如下面所示： $(选择器).attr(属性名[,值]) attr 是 Attribute 的前四个字母，方法里面有两个参数，其一属性名是比如操 作的是 title 属性，那属性名就写 title，其二值，如果是设置属性的值，就将值写 在第二个参数的位置，如果是获取属性的值，就不用加第二个参数标签样式操作标签的样式操作主要有以下方法：方法 描述

$(选择器).css (样式属性名[,值]) 方法设置或返回被选元素的一个或多个样式 属性$(选择器).addClass(类别名) 增加类别样式$(选择器).removeClass(类别名) 去除类别样式

$(选择器).toggleClass(类别名) 交替使用类别样式：有这个类别样式就去除，没有就追加；第三节 基本 滑动 淡出淡入

• show() 显示元素

• hide() 隐藏元素

• slidDown() 向下滑动显示

• slideUp() 向上滑动收起隐藏

• slideToggle() 交替滑动状态

88

• fadeIn() 淡入

• fadeOut() 淡出

• fadeTo() 动画到指定透明度

• fadeToggle() 交替淡出、淡入状态

第四节 自定义动画

• animate() 自定义动画

• stop() 停止所有在指定元素上正在运行的动画

• delay() 设置一个延时来推迟执行队列中之后的项目• finish() 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

第七章 AJAX

• $.ajax()

• jQuery 底层 AJAX 实现。简单易用的高层实现见 . get ,.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

• $.get() 通过远程 HTTP GET 请求载入信息

• $.getJSON() 通过 HTTP GET 请求载入 JSON 数据（如果返回的 JSON有误，不会有错误提示）

• $.post() 通过远程 HTTP POST 请求载入信息

• HTTP通讯协议（Hypertext Transfer Protocol）

• AJAX （ Asynchronous JavaScript and XML）

第一节 工作原理AJAX =异步 JavaScript 和 XML，简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。Ajax的工作原理如图所示：

89

通过Ajax的原理图可以发现，在浏览器中输入 url地址请求服务器时，是通过Ajax发送 http请求给服务器，服务的响应结果也是先返回给Ajax，先Ajax处理之后在返回给浏览器显示在页面。如果没有Ajax，就在图中表示为上下连接线，浏览器直接给服务器发送 http请求，服务器对请求进行处理后，将响应结果直接返回给浏览器展示出来。

Ajax的作用就是可以通过 js或 JQuery实现 http请求的发送，http请求包括 url地址，数据，数据的传值方式而且服务器响应之后必须有一个回传结果。

第二节 AJAX 的原生写法Ajax 的核心是 XMLHttpRequest 对象，它是 Ajax实现的关键，发送异步请求、接收响应及执行回调都是通过它来完成的。下面是 Ajax 的原生写法：//第一步：xhr = new XMLHttpRequest();

//第二步xhr.open("post","test.php");

//第三步：xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//第四步：xhr.send("a=1&b=10");//get请求报文体写法//第五步：xhr.onreadystatechange=function(){ if(xhr.status==200 && xhr.readyState==4){ var result=xhr.responseText;//获取到结果

alert(result);}

}

90

第三节 JQuery中AJAX语法

JQuery提供多个与AJAX有关的方法。通过 JQuery AJAX方法，使用Get或 Post从远程服务器上请求文本、HTML、XML或 JSON。然后将这些外部数据直接载入网页的被选元素中。JQuery提供以下Ajax 的写法： $.ajax({ url:'', type:'post|get', data:'数据', dataType:'text|json|xml|script', success:function(re){ //服务器回传数据处理 }})

第四节 JSON 对象JSON 是存储存储和交换文本信息的对象。JSON 可以理解为有格式的字符串，它可以存放数据，类似关联下标的数组。JSON 是以键值的形式存放，它的格式主要有以下两种格式，第一种：{name:'小张',age:19}

第二种：[{name:'小张 1',age:19}, {name:'小张 2',age:20}, {name:'小张 3',age:19}]

第一和第二种结合：{list:[{name:'小张 1',age:19}, {name:'小张 2',age:20}]}

第二种类似二维数组，当然也可以两者结合。Json存放数据更方便，通过一个 json 可以存放一个事物的所有属性，比如，可以存放一个学生的所有属性，姓名、年龄、性别、身高等。

第五节 XML使用

可扩展标记语言(eXtensible Markup Language)，是一种用于标记电子文件使其具有结构性的标记语言。

XML和HTML的区别：

XML HTML

所有的标记必须成对出现

不是所有的都需要成对出现区分大小写 不区分大小写

第六节 AJAX-load()方法

JQuery 中 load()方法是简单但强大的 AJAX 方法，能从服务器加载数据，并把返回的数据放入被选元素中。语法结构：

$(selector).load(url,data,callback);

91

其中的参数解释：Url - 加载的 URL；data - 规定与请求一同发送的查询字符串键值对集合，可选的；callback - 是 load()方法完成后所执行的函数名称，可选的；

第七节 AJAX-get() 和 post() 方法

JQuery中 get()和 post()方法用于通过HTTP GET 或 POST 请求从服务器请求数据。GET 是从指定的资源请求数据，POST 是从指定的资源提交要处理的数据。JQuery中Ajax其他写法为：

$.get(url,data,callback,dataType)

$.post(url,data,callback,dataType)

参数名称 描述url 请求的 url地址

data(可选) 发送到服务器的键值类型的数据callback(可选) 载入成功的回调函数（只有当状态是 success 才调用方法，里面含有三个参数：

responseTxt - 包含调用成功时的结果内容 statusTXT - 包含调用的状态 xhr - 包含XMLHttpRequest对象）

dataType(可选) 服务器返回内容的格式，包括 xml、html、json

第八节 AJAX跨域

跨域中这个"域"是指的两个域名，跨域是指 A域名下面有 A程序，B域名下面有 B程序，现在 A程序要通过 Ajax去访问 B域名下的 B程序，这种访问形式浏览器是拒绝的。AJAX 是不能直接请求另外一个域名下的程序的。针对这个问题的解决方法如下：请求的时候回传数据以 jsonp 的形式回传，紧跟着一个 jsonpCallback，请求成功后就会调用 fun1，因此需要声明 fun1，里面有个 data参数，这个参数的数据就是 B域名下 B程序回传的数据，在 fun1里面皆可以看到 B程序的数据，通过这种方式就实现了跨域。

附件

方法说明 原生 js jQuery

浏览器窗口可视区域高度 document.documentElement.clientHeight $(window).height()

浏览器窗口可视区域宽度 document.documentElement.clientWidth $(window).width()

文档高度 document.documentElement.scrollHeight $(document).height()

文档宽度 document.documentElement.scrollWidth $(document).width()

92

滚动条 top document.documentElement.scrollTop||document.body.scrollTop

$(window).scrollTop()

滚动条 left document.documentElement.scrollLeft||document.body.scrollLeft

$(window).scrollLeft()

DOM元素高度(style.height) getComputedStyle(elm,null).height $(elm).height()

DOM元素宽度(style.width) getComputedStyle(elm,null).width $(elm).width()

DOM 元素高度（含边框线）

elm.offsetHeight $(elm).outerHeight()

DOM 元素宽度（含边框线）

elm.offsetWidth $(elm).outerWidth()

DOM 元素内容实际高度（不受 overflow影响）

elm.scrollHeight $(elm).prop("scrollHeight")

DOM 元素内容实际宽度（不受 overflow影响）

elm.scrollWidth $(elm).prop("scrollWidth")

DOM元素内部高度（受overflow影响）

elm.clientHeight $(elm).innerHeight()

DOM元素内部宽度（受overflow影响）

elm.clientWidth $(elm).innerWidth()

DOM元素相对于定位父级top

elm.offsetTop $(elm).position().top

DOM元素相对于定位父级left

elm.offsetLeft $(elm).position().left

DOM元素相对于文档 top 无 $(elm).offset().top

DOM元素相对于文档 left 无 $(elm).offset().left