导图社区 网络应用系统程序设计
- 55
- 4
- 2
- 举报
网络应用系统程序设计
网络应用系统程序设计笔记，包括网页设计、HTML+CSS+JavaScript等内容，适用于期中期末复习。
编辑于2022-05-12 14:56:45- css
- html
- 网页设计
- Web设计
- 相似推荐
- 大纲
网络应用系统程序设计
绪论
网络应用系统设计模式
C/S模式 客户端/服务器
B/S模式 浏览器/服务器
传统网络应用系统实现技术
CGI
ASP
PHP
超文本预处理器
JSP
HTML
第1章 HTML5概述
介绍
HTML：超文本标记语言
HTML5
与HTML4的区别
有些元素可以省略标签的3种情况
不允许写结束标记的元素
可以省略结束标签
可以省略整个标签
特性
良好的语义特性
强大的绘图功能
增强的音视频播放和控制功能
HTML5的数据存储和数据处理的功能
获取地理位置信息
提高页面响应的多线程
文件API
开发环境
第2章 HTML5的文档结构元素
2.1 HTML的元素和属性
元素
从开始标记到结束标记的所有代码，其内容是开始标记与结束标记之间的内容
元素的属性
属性用来说明元素的特征
字符实体
符号& 实体名称 分号
颜色表示
书写规范
所有标记用尖括号（<>）括起来
标记成对出现，结束标签必须有关闭符
空格和回车是无效的，需使用HTML实体
标记不能有空格
2.2 基本结构元素
概述
<html>和</html> 表示该文档是HTML文档
<head>和</head> 表示文档头部信息
标题和主题
不会显示在页面正文中
<body>和</body> 网页的主体信息
显示在页面上的内容
头部内容 <head>标记
标题<title>标记
只能包含关于网页标题的文本
<title>网页标题</title>
元信息<meta>标记
字符集charset属性
指定字符编码
<meta charset=“UTF-8“/>
UTF-8 面向国际
gbk 面向国内
关键字描述
向搜索引擎说明网页的关键字
<meta name=“keywords“ content=“关键字1，关键字2”/>
页面描述
对网页概括的描述
<meta name=“description“ content=“网页的介绍”/>
页面跳转
设置网页自动刷新
<meta http-equiv= “Refresh“ content= “时间间隔的秒数”；url=要跳转的网站”/>
<base>标签
为所有链接规定默认地址或默认目标
<link>标签
链接外部文件，例如样式表
主题内容 <body>
标记网页的主体，包含文档的所有内容（文本、超链接、图像、表格和列表）
2.3 HTML5新增的结构元素
用DIV描述的网页布局
标签，只显示空白页面，具体展示用css实现
HTML5增加的结构元素
article元素
文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容
section元素
定义文档中的节
aside元素
非正文的部分
header元素
引导和导航作用的结构元素内容区域的标题
footer元素
上层容器元素的脚注
nav元素
页面导航的链接组
time元素
日期和时间
hgroup元素
标题组（主标题+子标题）
address元素
联系信息
main元素
网页中的主要内容
第3章 HTML5的基本页面元素
3.1 文本元素
段落标记<p>和换行标记<br/>
包含在<p></p>标记对中的内容会显示在一个段落里
另起一行使用换行标记<br/>
标题标记<hn>
<h1>定义最大的标题<h6>定义最小的标题
块标记<div>和<span>
<div>是一种块容器，默认占据一行<span>是一个行间容器，默认是行间的一部分
3.2 列表元素
有序列表标记<ol>
项目的序列，各项目前标用数字表示顺序
由<ol></ol>标记对实现，中间使用成对的<li></li>标记添加列表项目
属性
type属性
修改有序列表序号的样式
start属性
设置列表序号的起始值
无序列表标记<ul>
由<ul></ul>标记对实现，中间使用成对的<li></li>标记添加列表项目
属性
type属性
修改无序列表的样式
属性值必须小写
没有start属性
自定义列表<dl>
不是一个项目的序列，是一系列项目和它们的解释
自定义列表以<dl>标记开始自定列表项目以<dt>开始自定义列表的解释以<dd>开始
应用场景
对属于或者专有名词进行解释
定义列表的列表前没有任何项目
3.3 超链接元素
超链接属性
用标记<a>来定义标记对象通过标记中的href属性设置
<a href="url" target="target-windows" >链接标题</a>
超链接类型
内部链接
将超链接标记<a>中的href属性的URL值设置为相对路径
外部链接
将超链接标记<a>中的href属性的URL值设置为绝对路径
书签链接
页面内容多，页面长，需要不断翻页才能看到想要的内容时
超链接路径
绝对路径
文件的完整路径
相对路径
相对于当前文件的路径包含从当前文件指向目的文件的路径
跟路径
以“/”开头，后面紧跟文件的路径
基准URL标签<base>
<base href=“URL 公共部分”target=“公共窗口名”/>
语法解释
单标签
在一个文档中，最多只能出现一次，必须放到<head>标签对内
3.4 图像元素和多媒体元素
标签
图像标记<img>
不是在网页中插入图像，而是从网页上链接并显示一幅图像。
<img src=“url” title=“description”/>
属性
src属性
指定图像文件所在的路径
title属性
添加图像的替代文字，可以用alt代替
width/height属性
设置图像的宽度和高度
border属性
设置图像的边框
align属性
设置图像对齐方式
属性的取值
多媒体文件标记<embed>
可直接调用多媒体文件
语法格式
<embed src=“url” autostart=“”></embed>
插入Flash动画
插入音频
插入视频
滚动文字设置<marquee>
3.5 表格元素
HTML的表格标记
常用标记
<table>
表格标记
<tr>
行标记
<td>
单元格标记
<th>
表头标记
HTML表格的属性
HTML5支持的表格属性
设置表格边框宽度 border
设置单元格跨列 colspan
设置单元格跨行 rowspan
表格的其他属性
3.6 内嵌框架
也叫浮动框架，是在浏览器窗口中嵌入子窗口，即将一个文档嵌入在另一个网页中显示。
<iframe src=“url”></iframe>
属性
src
设置源文件的地址
name
设置框架名称，是链接标记的target所需参数
weight
设置内嵌框架窗口宽度
height
设置内嵌框架窗口高度
scrolling
设置是否显示滚动条，默认为auto，表示根据需要自动出现。Yes表示有，No表示无
bordercolor
设置边框颜色
align
设置框架对齐方式
页面基本元素的应用
第4章 HTML5的表单元素
4.1 表单定义元素form
<form name="formname" method="post/get" action="url" entype="encoding"></form>
表单信息的处理过程
访问者填写完表单提交到Web服务器
服务器端运行服务端程序处理表单数据
动态生成一个HDML网页回复访问者
数据发送形式
数据从浏览器向服务器发送时，会分成HTTP头和HTTP正文体两部分来发送
头包含有关用户代理、服务器信息、内容类型等信息，这些信息通常以纯文本发送，因而不安全
HTTP正文体包含正文实体，这些信息是编码后再发送的，所以比 HTTP头发送的信息更安全
POST和GET提交方法的比较
GET方法
将表单数据以HTTP头的形式附加到URL地址后面，因而不安全
对传送数据的长度有限制
只能传送ASCII码的字符
表单的默认提交方法
POST方法
以HTTP正文体形式发送，因而相对比较安全。
对传送数据的长度没有限制
当数据涉及到保密问题或所传送的数据是用于执行插入或更新数据库操作时，必须使用POST
4.2 HTML表单输入元素及属性
表单输入元素input
<input name=“controlName” type=“controlType”>
属性
text
文本框
password
密码框
file
文件域
checkbox
复选框
radio
单选按钮
button
标准按钮
submit
提交按钮
reset
重置按钮
image
图像域
demo0401
demo0402
列表框元素select
下拉列表
select标记同时嵌套列表项标记option，可以实现列表框效果
<select>标记用于定义列表框
<option>标记用于向列表框中添加列表项目
<form> <select name="列表框名称" size=""> <option value="选项值">选项显示内容 <option value="选项值">选项显示内容 </select></form>
属性
select
name
设置列表的名称，必设属性
size
用于定义列表框的行数
设置能同时显示的列表选项个数（默认为1）
multiple
设置列表中的项目可多选
option
value
设置选项值，该值被提交到服务器端处理，必设属性
selected
设置默认选项
demo0403
文本域输入元素textarea
输入文字信息，行间可以换行
<form> <textarea name="texta" rows="5" cols="80"></textarea></form>
demo0404
4.3 HTML5新增的表单元素和属性
HTML5新增input类型（即input的属性）
数值输入域 number
可以在表单中插入数值输入域，还可以限定输入数字的范围
<input name=""type=" number" min="" max="" step="" value=""/>
属性
max
定义允许输入的最大值
min
定义允许输入的最小值
step
定义步长
value
定义默认值
demo0405
滑动条 range
可以在表单中插入表示数值范围的滑动条还可以限定可接受数值的范围
<input name="" type="range" min="" max="" step="" value=""/>
demo0406
日期选择器 date pickers
<form>请选择日期：<input name="user_date" type="date" /></form>
类型
data 选取日、月、年
month 选取月、年
week 选取周、年
time 选取时间（小时和分钟）
datatime 选取时间、日、月、年（UTC-世界标准时间）
datatime-local 选取时间、日、月、年（本地时间）
demo0407
url类型
输入url地址的文本框
提交时如果该文本框中内容不是url地址格式的文字，则不允许提交
<input name="u1" type="url" value=http://www.icourses.cn/>
emaill类型
文本框具有一个multiple属性——允许在改文本框中输入一串以逗号分隔的email地址
<input name="email" type="email" value=fning@163.com/>
tel类型
让input元素生成一个只能输入电话号码的文本框
search类型
让input元素生成一个专门用于输入搜索关键字的文本框
用户搜索关键字后，文本框右侧会出现一个“×”按钮单击该按钮将清空文本框中的输入内容
<input name="" type="search" >
Firefox浏览器不支持该特性，search类型在Firefox浏览器中跟普通的文本框完全一样
color类型
让input元素生成一个颜色选择器当用户在颜色选择其中选中某种颜色后，color文本框内自动显示用户选中的颜色
<input name="" type="color" >
IE11不支持该color类型color类型文本框在该浏览器中跟普通的文本框完全一样
HTML5表单新增属性
form属性
在HTML5中，可以将表单元素写在页面上的任何位置，然后给该元素指定一个form属性，属性值为该表单的id，通过这种方式声明该元素属于哪个具体的表单
formmethod和formaction属性
HTML5新增formaction属性，使得点击不同的按钮，可以将表单提交到不同的页面可以使用formmethod属性对每个表单元素分别指定不同的提交方法
placeholder属性
指当文本框<input type="text">处于未输入状态时文本框中显示的输入提示
<input type="text" placeholder="default text"/>
autofocus属性
将文本框、选择框或按钮等加上该属性，当页面打开时，该控件将自动获得焦点，从而替代使用JavaScript代码
<input type="text" autofocus/>
autocomplete属性
用于辅助输入的自动完成功能
大部分设置为on，可以显示指定待输入的数据列表
之前输入的选项自动保存，再次打开会显示
可以指定其值为"on""off"与" "三类值不指定时，使用浏览器的默认值
<input type="text"name="" autocomplete="on"/>
required属性
可以应用在大多数输入元素上
在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中提示用户这个元素必须输入内容
pattern属性
email、number、url等input类型的元素，要求输入内容符合一定的格式
如果对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。若不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字。
例如：<input type="text" pattern="[0-9][A-Z]{3}" name=part placeholder="输入内容:一个数字与三个大写字母。" />
min属性和max属性
min与max这两个属性是数值类型或日期类型的input元素的专用属性，它们限制了在 input元素中输入的数值与日期的范围。
提交按钮新增取消校验属性
有时需要把表单中已填写好的数据暂存一下，以便将来调出来继续填写
此时我们可以不用关心数据是否有效，即可以取消表单的有效性校验。
在HTML5中，取消表单校验的常用方式有两种：
为<form>元素设置novalidate属性
对提交按钮设置formnovalidate属性
基本语法
<input type="submit" formnovalidate>
由指定的提交按钮来关闭表单的输入校验，只有当用户通过指定了formnovalidate属性的按钮提交表单时才会关闭表单的输入校验
<form novalidate>
将关闭整个表单的校验，不管提交什么按钮都将不进行校验
4.4 一个会员注册表单
demo0411
CSS
第13章 CSS3的选择器
13.1 CSS3概述
13.1.1 CSS3介绍
13.1.2 CSS的一个示例
demo1301
使用CSS的优点
结构和风格分离
扩充HTML标记
提高网站维护效率
实现精美的页面布局
13.2 CSS的基本选择器
CSS可以认为是多个选择器组成的集合，每个选择器由3个基本部分组成——“选择器名称”、“属性”和“值”
selector { property:value; }
13.2.1 标记选择器
声明标记的CSS样式
一个HTML页面由很多不同的标记组成，例如<p>、<h1>、<div>等
tagName { property:value;}
13.2.2 类选择器
类选择器用来为一系列标记定义相同的呈现方式。
.className { property:value; }
13.2.3 ID选择器
用做网页元素的唯一标识
一个HTML文件中一个元素的ID属性值中惟一的
#idName{ property:value ;}
demo1304 ID选择器的应用
13.3 在HTML中使用CSS的方法
13.3.1 行内样式
直接把CSS代码添加到HTML的代码行中，由<style>标记支持
<h1 style="color:blue;font-style:bold"></h1>
行内样式的作用域只有一行
13.3.2 嵌入样式
将样式定义作为网页代码的一部分，写在HTML文档的<head>和</head>之间，通过<style>和</style>标记来声明。
嵌入的样式可以作用于整个HTML文档中
demo1305
13.3.3 链接样式
放在单独文件中，下载一次所有页面都可以使用
优点
体现了“页面内容”和“样式定义”分离实现了内容描述和CSS代码的分离网站的前期制作和后期维护都十分方便
链接样式先要定义一个扩展名为“.css”的文件（即外部样式表），该文件包含需要用到的CSS规则，不包含任何其他的HTML代码。
不用<style></style>
链接样式表的方法就是在HTML文件的<head>部分添加代码，格式如下。 <link rel="stylesheet" type="text/css" href=" mystyle.css" />
demo0306
13.3.4 导入样式
与链接样式的操作过程基本相同，都需要一个单独的外部CSS文件，然后再将其导入到HTML文件中，但在语法和运行过程上有所差别。
HTML文件初始化时将外部CSS文件导入到HTML文件内，作为文件的一部分，类似于嵌入
需要在内嵌样式表的<style>标记中使用@import导入一个外部的CSS文件
<style type="text/css"> @import "mystyle.css";</style>
demo1307
13.3.5 样式的优先级
行内样式>嵌入样式>链接样式>导入样式
13.4 CSS复合选择器
两个或多个基本选择器通过不同方式组合而成的选择器，可以实现更强、更方便的选择功能，主要有交集选择器、并集选择器和后代选择器等。
13.4.1 交集选择器
由两个选择器直接连接构成的，其结果是选中两者各自作用范围的交集。
第一个必须是标记选择器
第二个必须是类选择器或ID选择器
例如：“h1.class1；p#id1”
标记是某种样式，希望标记中某一段是另一种样式
tagName.className { property:value;}
demo1311
13.4.2 并集选择器
对多个选择器进行集体声明，多个选择器之间用“，”隔开，每个选择器可以是任何类型选择器。
如果某些选择器定义的样式完全相同，或者部分相同，则可以使用并集选择器。
selector1,selector2,… { property:value;}
demo1312
13.4.3 后代选择器
在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行控制。
例如，当<div>与</div>之间包含<b>标记时，就可以使用后代选择器定义出现在<div>标记中的<b>标记的格式。
后代选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开。
两个选择器之间用空格隔开，并且selector2是selector1包含的对象。
selector1 selector2 { property:value;}
demo1313
13.4.4 子选择器
selector1>selector2
必须是直接的儿子，不能是孙子
13.4.5 相邻选择器
相邻选择器的定义符号是加号（+），可以选中紧跟在它后面的一个兄弟元素（这两个元素具有共同的父元素）。
13.5 CSS3新增的选择器
13.5.1 属性选择器
通过各种各样的属性，可以给元素增加很多附加信息。
例如，通过id属性，可以区分不同的元素；通过class属性，可以设置元素的样式。
为了扩展属性选择器的功能，可以使用^、$和*这三个通配符。
属性选择器及其功能
[att*="value"]
包含特定值的元素
[att^="value"]
包含以特定值开头的元素
[att$="value"]
包含以特定值结尾的元素
[att="value"]
等于某特定值的元素
demo1316
13.5.2 伪类选择器
伪类选择器区别于类选择器
类选择器是由用户自行定义
伪类选择器是在CSS中已经定义好的选择器
伪类选择器可以分为结构伪类选择器和UI元素伪类选择器2种。
结构伪类选择器
基本结构伪类选择器
:root
匹配文档的根元素
:not
对某个结构元素使用样式，但排除这个结构元素下面的子结构元素。
:empty
指定当元素内容为空白时使用的样式。
:target
对页面中某个target元素（该元素的id被当做页面的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
与元素位置有关的结构伪类选择器
E:first-child
匹配第一个子元素
E:last-child
匹配最后一个子元素
E:nth-child(n)
匹配第n个位置的子元素（n可以为关键字（odd even）数字或公式，从1开始）。
E:nth-last-child(n)
匹配倒数第n个位置的子元素。
demo1317
UI伪类选择器
常用的UI伪类选择器
E:enabled
选择匹配E的所有可用UI元素。
E:disabled
选择匹配E的所有不可用UI元素。
E:checked
选择匹配E的所有处于选中状态的UI元素。注意，在网页中，UI元素一般是指包含在form元素内的表单元素。
E:read-only
指定当元素处于只读状态时的样式。
E:read-write
定当元素处于非只读状态时的样式。
E:hover
指定当鼠标指针移动到元素上面时元素所使用的样式。
E:active
定当元素被激活时使用的样式。
E:focus
指定当元素处获得焦点时使用的样式。
demo1318
demo1319
13.5.3 伪元素选择器
:first-letter和:first-line
:first-letter用于选中元素内容的首字符。
:first-line用于选中元素中的首行文本。
:before和:after
必须配合content属性使用才有意义
作用是在指定的标记内产生一个新的行内标记该行内元素的内容由content属性里的内容决定。
before选择器用于在某个元素之前插入内容。
<E>: before { content:文字或其他内容 }
after选择器用于在某个元素之后插入内容。
<E>: after { content:文字或其他内容 }
demo1321
13.6 使用CSS设计网站页面
网页布局
在页面中应用的样式
第14章 使用CSS3设置元素
14.1 用CSS3设置文本样式
14.1.1 字体属性
14.2 用CSS3设置颜色与背景
14.3 用CSS3设置图像效果
14.4 用CSS3美化表单的应用
第15章 CSS3的盒模型及网页布局
JavaScript
第1章 JavaScript快速入门
1.1 初识JavaScript
什么是JavaScript
JavaScript：是Web开发领域中的一种功能强大的编程语言。
作用：主要用于开发交互式的Web页面，使网页的互动性更强，用户体验更好。
网页制作涉及的技术：HTML、CSS和JavaScript。
HTML代表了结构，结构是网页的骨架，从语义的角度，描述页面结构。
CSS代表了样式，样式是网页的外观，从审美的角度，美化页面。
JavaScript代表行为，行为是网页的交互逻辑，从交互的角度，提升用户体验。
JavaScript的由来
JavaScript的用途已经不仅局限于浏览器了，Node.js的出现使得开发人员能够在服务器端编写JavaScript代码，使得JavaScript的应用更加广泛。
JavaScript的特点
脚本语言
常见的脚本语言：JavaScript、VBScript、Perl、PHP、Python等。非脚本语言：C、C++、Java、C#等。
脚本语言与非脚本语言的区别
非脚本语言一般需要编译、链接，生成独立的可执行文件后才能运行。脚本语言依赖于解释器，只在被调用时自动进行解释或编译。
可跨平台
支持面向对象
除了经典的JavaScript库，又诞生了Bootstrap、AngularJS、Vue.js、Backbone.js、React、Wwebpack等框架和工具。
1.2 开发工具
浏览器
排版引擎：负责将取得的网页内容（如HTML、CSS等）进行解析和处理，然后显示到屏幕中。
Trident、Blink、EdgeHTML、WebKit、Gecko
JavaSript引擎：用于解析JavaScript语言，通过执行代码来实现网页的交互效果。
Chakra、V8、JavaScriptCore、SpiderMonkey、Rhino
代码编辑器
HBuilder、NetBeans、Sublime Text、Notepad++、WebStorm、Adobe Dreamweaver
语法规则
严格区分大小写
1.3 JavaScript入门
JavaScript引入方式
嵌入式
<script> JavaScript语句;</script>
外链式
<script src="js/test.js"></script>
行内式
<input type="button" onclick="alert('Hello');" value="test">
JavaScript异步加载
存在的问题：引入JavaScript代码时，页面的下载和渲染都会暂停，等待脚本执行完成后才会继续（内嵌式或外链式）。
解决的办法
对于不需要提前执行的代码，将<script>标签放在<body>标签的底部，可以减少对整个页面下载的影响。
用HTML5为<script>标签新增的两个可选属性：async和defer。
<script src="http://js.test/file.js" async></script>
async异步加载，即先下载文件，不阻塞其他代码执行，下载完成后再执行。
<script src="http://js.test/file.js" defer></script>
defer用于延后执行，即先下载文件，直到网页加载完成后再执行。
常用输出语句
alert() 警告框
console.log() 控制台输出
document.write()文档页面输出
注释
单行注释使用“//”、多行注释使用“/* */”
数据与运算
数学运算
比较两个数字的大小
比较的结果是true或false
使用字符串保存数据
使用单引号或双引号包裹的数据是字符串
比较两个字符串是否相同
“==”运算符可以比较两个字符串是否相同
字符串与数字的拼接
“+”运算符的操作数只要有一个是字符串，就表示字符串拼接。“+”运算符的操作数全部为数字时，表示相加。
根据比较结果执行不同的代码
if…else
函数
函数的用途
函数的返回值
函数执行后可返回一个表示执行结果的值
函数的参数
函数支持传入一个或多个参数，多个参数可使用逗号分隔。
自定义函数
对象
对象的用途
弹出警告框、输入框，或者更改网页文档内容等效果
window对象
弹出警告框、输入框，或者更改网页文档内容等效果
document对象
与网页文档进行交互
String对象
对字符串进行处理
自定义对象
事件
在网页中滑动、点击鼠标，滚动屏幕，敲击键盘等
<body><input id="btn" type="button" value="test"> <script> document.getElementById('btn').onclick = function() { alert(this.value); // 获取按钮的value属性，输出结果：test}; </script></body>
【案例】改变网页背景色
【案例】验证用户输入的密码
第2章 基本语法
2.1变量
标识符
定义规则
表示方法
驼峰法
保留关键字
变量的使用
var 声明变量
var a;
变量的赋值
3 种方式
ES6中新增了const关键字，用于实现常量的定义
2.2数据类型
数据类型分类
基本数据类型
Boolean（布尔型）
true和false值只有全部为小写时才表示布尔型
String（字符型）
包含在单引号（"）或双引号（""）
转义字符”/”
Number（数值型）
不区分整数和浮点数，所有数字都是数值型
NaN非数值
Null（空型）
空型（Null）只有一个特殊的null值，于表示一个不存在的或无效的对象与地址
JavaScript中大小写敏感，因此变量值只有是小写的null时才表示空型（Null）
typeof null ——>object
Undefined（未定义型）
undefined表示没有为变量设置值，而null则表示变量（对象或地址）不存在或无效
注意：null和undefined与空字符串（''）和0都不相等
引用数据类型
Object（对象）
数据类型检测
typeof操作符
在利用typeof检测null的类型时返回的是object而不是null
Object.prototype.toString.call()
数据类型转换
转布尔型
Boolean()函数
Boolean()函数会将任何非空字符串和非零的数值转换为true，将空字符串、0、NaN、undefined和null转换为false
数字
除了0和NaN,都是true
字符串
除了空串，都是true
Null
false
Undefined
false
Object
true
演示示例：判断用户是否有内容输入
转数值型
Number函数
字符串
纯数字：数字
有非数字内容：NaN
空串/全空格：0
子主题
布尔
true：1
false：0
Null
0
Undefined
NaN
parseInt（）函数
字符串——> 整数
对非String使用时，会先转换为String再操作
parseFloat（）函数
除了纯数字/数字开头的字符串都是NaN
注意
所有函数在转纯数字时会忽略前面的0
parseFloat（）函数会将数据转换为浮点数
parseInt（）函数可通过第二个参数设置转换的进制数
isNaN（）函数对结果进行判断
undefined、NaN和Object返回true，其他返回false
转字符型
String（）函数
可以将任意类型转换为字符型
toString（）方法
除了null和undefined没有toString（）方法外，其他数据类型都可以完成字符的转换
2.3 表达式
2.4 运算符
算术运算符
自增
a++ a
++a a+1
取模运算结果的正负取决于被模数（%左边的数）的符号
字符串运算符
“+”操作的两个数据中只要有一个是字符型，则“+”就表示字符串运算符，用于返回两个数据拼接后的字符串
除了“+”与字符串，其余，如“-”都会转成Number
赋值运算符
将运算符右边的值赋给左边的变量
结合性为“从右向左”
比较运算符
结果是布尔类型的true或false
“==”和“!=”运算符在比较时，只比较值是否相等
“===”与“!==”要比较数值和其数据类型是否相等
逻辑运算符
返回值类型是布尔类型
结合性是从左到右
使用“&&”连接两个表达式时，如果左边表达式的值为false，则右边的表达式不会执行，逻辑运算结果为false
使用“||”连接两个表达式时，如果左边表达式的值为true，则右边的表达式不会执行，逻辑运算结果为true。
三元运算符
条件表达式 ? 表达式1 : 表达式2
先求条件表达式的值。如果为true，则返回表达式1的执行结果。如果条件表达式的值为false，则返回表达式2的执行结果。
位运算符
针对二进制数的每一位进行运算的符号
仅能对数值型的数据进行运算
运算符优先级
【案例】计算圆的周长和面积
2.5流程控制
选择结构
条件判断语句
if单分支语句
if…else双分支语句
if…else if…else多分支语句
switch多分支语句
switch (表达式) { case 值1：代码段1; break; case 值2：代码段2; break;... default: 代码段n;}
循环结构
while
若循环条件永远为true时，则会出现死循环
do…while
while是先判断条件后执行循环体，而do...while会无条件执行一次循环体后再判断条件
for
跳转语句
break
终止当前语句的执行，跳出switch选择结构或循环语句，执行后面的代码。
continue
结束本次循环的执行，开始下一轮循环的执行操作。
// 定义标签label : statement// 使用标签break/continue label;
break和continue语句还可跳转到指定的标签语句处，实现嵌套语句的多层次跳转
label表示标签的名称，如start、end等任意合法的标识符。statement表示具体执行的语句，如if、while、变量的声明等。
【案例】打印金字塔
【案例】九九乘法表
第3章 数组
3.1 初始数组
Array 对象属性
length
prototype
Array 对象方法
pop( )
push( )
shift( )
unshift( )
3.2 创建数组
实例化Array对象的方式
var arr1 = new Array（）;
直接使用“[]”创建数组
var arr2 = [];
可以创建含有空存储位置的数组
3.3 数组的基本操作
获取数组长度
length属性
获取数组长度，还可以修改数组长度
console.log(arr.length);
设置的length>原数组长度
没有值的数组元素会占用空存储位置
设置的length=原数组长度
设置的length<原数组长度
多余的数组元素将会被舍弃
在利用Array对象方式创建数组时，也可以指定数组的长度
var arr = new Array(3);
JavaScript中不论何种方式指定数组长度后，并不影响继续为数组添加元素，同时数组的length属性值会发生相应的改变。
数组的访问与遍历
for
for… in
for (variable in object) {...}
variable指的是数组下标
object表示数组的变量名称
自动从0到最后一个元素
demo0302
ES6新增的for…of 语法
var arr = [1, 2, 3];for (var value of arr) { console.log(value);}
变量value：表示每次遍历时对应的数组元素的值
变量arr：表示待遍历的数组
元素的添加与修改
与访问数组中的元素的方式相同
数组名[下标] = 值
元素的删除
delete关键字
只能删除数组中指定下标的元素值，删除后该元素依然会占用一个空的存储位置。
解构赋值
[a, b, c] = [1, 2, 3];
当左侧变量的数量小于右侧的元素的个数，则忽略多余的元素。
当左侧变量数量大于右侧的元素个数时，则多余的变量会被初始化为undefined
① 右侧为变量
var arr = [1, 2, 3];[a, b] = arr;// 输出结果：1 - 2console.log(a + ' - ' + b);
②变量数值交换
var n1 = 4, n2 = 8;[n1, n2] = [n2, n1];// 输出结果：8 - 4console.log(n1 + ' - ' + n2);
【案例】查找最大值与最小值
3.4 常见二维数组操作
创建与遍历
创建
使用Array对象创建数组
var arr = new Array(new Array, new Array);// 空二维数组
使用“[]”创建数组
var empty = [[], []]; // 空二维数组
遍历
一维数组可以利用for、for…in或for…of（ES6提供）进行遍历
二维数组只需在遍历数组后，再次遍历数组的元素即可
var arr = []; // 创建一维空数组for(var i = 0 ; i< 3; ++i){ arr[i] = []; // 将当前元素设置为数组 arr[i][0] = i; // 为二维数组元素赋值}
保证添加的元素（如arr[i]）已经被创建为数组
【案例】二维数组转置
3.5 常见数组方法
栈和队列方法
在数组的末尾或开头添加数组的新元素
push()
添加到数组的末尾，并返回数组的新长度
unshift()
添加到数组的开头，并返回数组的新长度
返回值是新数组的长度
在数组的末尾或开头删除数组元素
pop()
从数组的末尾移出并返回一个元素
shift()
从数组的开头移出并返回一个元素
返回的是移出的数组元素
检索方法
检测给定的值是否是数组，或是查找指定的元素在数组中的位置
方法
includes()
确定数组中是否含有某个元素
var data = ['peach', 'pear', 26, '26', 'grape'];// 从数组下标为3的位置开始检索数字26console.log(data.includes(26, 3)); // 输出结果：false// 从数组下标为data.length - 3 的位置查找数字26console.log(data.includes(26, -3)); // 输出结果：true
第1个参数表示待查找的值
第2个参数用于指定在数组中查找的下标
设置为大于数组长度时，数组不会被检索，直接返回false。
设置为小于0的数时，则检索的索引位置等于数组长度加上指定的负数，若结果仍是小于0的数，则检索整个数组。
Array.isArray()
确定传递的值是否是一个 Array
indexOf()
返回在数组中可以找到给定值的第一个索引
第2个参数用于指定开始查找的下标
当其值大于或等于数组长度时，直接返回-1
当其值为负数时，则查找的下标位置等于数组长度加上指定的负数，若结果仍是小于0的数，则检索整个数组。
demo05
lastIndexOf()
返回指定元素在数组中的最后一个的索引
第2个参数用于指定查找的下标，且由于其采用逆向的方式检索
当其值大于或等于数组长度时，则整个数组都会被查找
当其值为负数时，则索引位置等于数组长度加上给定的负数，若其值仍为负数，则直接返回-1。
demo06
除了Array.isArray()方法外，其余方法默认都是从指定数组索引的位置开始检索，且检索方式与运算符“===”相同，即只有全等时才会返回比较成功的结果。
数组转字符串
join()
将数组的所有元素连接到一个字符串中
toString()
返回一个字符串，表示指定的数组及其元素
var arr = ['a','b','c'];console.log(arr.join()); // 输出结果：a,b,cconsole.log(arr.join('-')); // 输出结果：a-b-cconsole.log(arr.toString()); // 输出结果：a,b,c
join()和toString()方法的相同点
①可将多维数组转为字符串，默认情况下使用逗号连接。②当数组元素为undefined、null或空数组时，对应的元素会被转换为空字符串
join()和toString()方法的不同点
join()方法可以指定连接数组元素的符号
其他方法
concat()
返回一个合并两个或多个数组后的新数组
slice()
从一个数组的指定下标范围内拷贝数组元素到一个新数组中
splice()方法的第1个参数的值等于或大于数组长度时，从数组末尾开始操作；当该值为负数时，则下标位置等于数组长度加上指定的负数，若其值仍为负数，则从数组的开头开始操作。
在执行后返回一个新的数组，不会对原数组产生影响
splice( )
删除数组中的指定元素
sort( )
对数组的元素进行排序，并返回数组
会对原数组产生影响
第4章 函数
4.1 函数的定义与调用
初识函数
内置函数
parseFloat()用于返回解析字符串后的浮点数
isNaN()判断给定参数是否为NaN
parseInt()用于返回解析字符串后的整数值
自定义函数
function 函数名([参数1, 参数2, ……]){ 函数体……}
参数设置
无参函数
不需要提供任何数据，即可完成指定功能的情况
function greet() { console.log('Hello everybody!');}
有参函数
开发时函数体内的操作需要用户传递数据的情况
function maxNum(a, b) { a = parseInt(a); b = parseInt(b); return a >= b ? a : b;}
获取函数调用时传递的所有实参
实现方式：利用arguments对象，在函数体内可获取函数调用时传递的实参。
function transferParam() { console.log(arguments.length); console.log(arguments);}
其他操作：length属性可获取实参的总数，具体实参值可利用数组遍历方式。
含有默认值的参数与剩余参数
function greet(name, say = 'Hi, I\'m ') { console.log(say + name);}
“…变量名”的方式动态接收用户传递的不确定数量的实参
一个确定形参
function transferParam(num1, ...theNums) { theNums.unshift(num1); console.log(theNums);}
无确定的形参
function transferParam(...theNums) { console.log(theNums);}
函数的调用
函数名称([参数1, 参数2, ……])
【案例】字符串大小写转换 case01
4.2 变量的作用域
函数内var关键字声明的变量，不能在函数外访问。
声明变量后就可以在任意位置使用该变量嘛？ ×
全局变量
不在任何函数内声明的变量（显示定义）或在函数内省略var声明变量（隐式定义）
局部变量
在函数体内利用var关键字定义的变量称为局部变量，它仅在该函数体内有效。
块级变量
仅在“{}”中间有效
垃圾回收机制
保留局部变量的值的方式
利用return返回
利用全局变量保存
4.3 匿名函数
函数表达式
函数表达式
var fn = function sum(num1, num2) { return num1 + num2;};fn();
函数声明方式
sum();function sum(num1, num2) { return num1 + num2;};
匿名函数
没有函数名称的函数
可以先使用再定义
① 函数表达式中省略函数名
var fn = function (num1, num2) { return num1 + num2;};fn(1, 2);
② 自调用方式
(function (num1, num2) { return num1 + num2;})(2, 3);
③ 处理事件
document.body.onclick = function () { alert('Hi, everybody!');};
箭头函数
参数 (p1, p2, …, pN) => { statements } 函数体
// 设置2个参数var fn2 = (x, y) => x + y;console.log(fn2(1, 2) );// 输出结果：3
4.4 嵌套与递归
函数嵌套与作用域链
嵌套函数：在一个函数内部存在另一个函数的声明
作用域链
内层函数只能在外层函数作用域内执行，在内层函数执行的过程中，若需要引入某个变量，首先会在当前作用域中寻找，若未找到，则继续向上一层级的作用域中寻找，直到全局作用域
递归调用
【案例】求斐波那契数列第N项的值
网页计算器case03
第5章 对象
5.1 面向对象概述
面向过程与面向对象
面向对象的特征
封装性
封装
隐藏内部的实现细节，只对外开放操作接口
接口
对象的方法
优势
继承性
多态性
提示
在封装时，如何给外部调用者提供完整且最小的接口，使外部调用者可以顺利得到想要的功能，不需要研究其内部的细节
在进行继承和多态设计时，对于继承了同一个对象的多种不同的子对象，如何设计一套相同的方法进行操作。
5.2 自定义对象
对象的定义
字面量语法
“{ }”语法
var o4 = { name: 'Jim', age: 19, gender: '男', sayHello: function() { console.log('你好'); }};
组成：属性和方法
JSON数据格式
应用于数据存储和交互
JSON是一个字符串，使用双引号包裹对象的成员名和字符串型的值。
JSON与对象的区别
JSON是一个字符串
JSON不仅可以用来保存对象，还可以保存数字、字符串、数组等其他类型的数据。
{"name":"Tom","age":24,"work":true,"arr":[1,2]}或[{"name":"Tom","age":24},{"name":"Jim","age":25}]
访问对象成员
语法：对象.成员
var o5 = {}; // 创建一个空对象o5.name = 'Jack'; // 为对象增加属性o5.introduce = function () { // 为对象增加方法 alert('My name is ' + this.name); // 在方法中使用this代表当前对象};alert(o5.name); // 访问name属性，输出结果：Jacko5.introduce(); // 调用introduce()方法，输出结果：My name is Jack
可变成员名语法：对象[变量名] = 值
var o6 = {}; // 创建一个空对象var key = 'id'; // 通过变量保存要操作的属性名o6[key] = 123; // 相当于“o6['id'] = 123”或“o6.id = 123”
对象成员的遍历
语法：for…in
var obj = {name: 'Tom', age: 16};for (var k in obj) { console.log(k + '-' + obj[k]);}
变量k保存了每个对象成员的名称
obj[k]访问成员属性的值
判断对象成员是否存在
in运算符
var obj = {name: 'Tom', age: 16};console.log('name' in obj); // 输出结果：trueconsole.log('gender' in obj); // 输出结果：false
5.3 构造函数
为什么使用构造函数
实现模板的方式
通过工厂函数，在其内部通过字面量“{ }”的方式创建对象来实现，缺点是无法区分对象的类型。
通过构造函数创建对象
JavaScript 内置的构造函数
Object、String、Number等构造函数
语法：new 构造函数名()
// 通过构造函数创建对象var obj = new Object(); // 创建Object对象var str = new String('123'); // 创建String对象
“对象.constructor”属性指向了该对象的构造函数
通过console.log()输出时，[native code]表示该函数的代码是内置的
自定义构造函数
自定义构造函数
构造函数的命名推荐采用帕斯卡命名规则，即所有的单词首字母大写
在构造函数内部，使用this来表示刚刚创建的对象
function Person(name, age) { this.name = name; this.age = age; this.sayHello = function () { console.log('Hello, my name is ' + this.name); };}
使用构造函数
var p1 = new Person('Jack', 18);var p2 = new Person('Alice', 19);console.log(p1); console.log(p2); p1.sayHello();console.log(p1.constructor);
class关键字
作用：用来定义一个类
在类中可以定义constructor构造方法
私有成员
概念
var关键字定义的变量称为私有成员
特点
在实例对象后无法通过“对象.成员”的方式进行访问，但是私有成员可以在对象的成员方法中访问
特性
私有成员name体现了面向对象的封装性
示例
function Person() { var name = 'Jim'; this.getName = function () { return name; };}var p = new Person(); // 创建实例对象pconsole.log(p.name); // 访问私有成员，输出结果：undefinedp.getName(); // 访问对外开放的成员，输出结果：Jim
5.4 内置对象
String对象
成员
length
charAt ( index )
indexOf ( searchValue )
在字符串中首次出现的位置
lastIndexOf ( searchValue )
在字符串中最后出现的位置
substring(start[, end])
substr(start[, length])
toLowerCase()
toUpperCase()
split([separator[, limit])
replace(str1, str2)
案例
限制用户名长度在3~10范围内，不允许出现敏感词admin
var name = 'Administrator';if (name.length < 3 || name.length > 10) { alert('用户名长度必须在3~10之间。');}if (name.toLowerCase().indexOf('admin') !== -1) { alert('用户名中不能包含敏感词：admin。');}
字符串加密（凯撒密码）
去掉空格字符串
Number对象
成员
MAX_VALUE
MIN_VALUE
toFixed(digits)
演示
var num = 12345.6789;num.toFixed(); // 四舍五入，不包括小数部分，返回结果：12346num.toFixed(1); // 四舍五入，保留1位小数，返回结果：12345.7num.toFixed(6); // 用0填充不足的小数位，返回结果：12345.678900Number.MAX_VALUE; // 获取最大值，返回结果：1.7976931348623157e+308 Number.MIN_VALUE; // 获取最小正值，返回结果：5e-324
Math对象
成员
PI
abs(x)
max([value1[,value2, ...]])
min([value1[,value2, ...]])
pow(base, exponent)
sqrt(x)
ceil(x)
floor(x)
round(x)
random()
Math.random()获取指定范围内的随机数
//公式为Math.random() * (n - m) + m，表示生成大于或等于m且小于n的随机值 Math.random() * (3 - 1) + 1; // 1 ≤ 返回结果 < 3Math.random() * (20 - 10) + 10; // 20 ≤ 返回结果 < 20Math.random() * (99 - 88) + 88; // 88 ≤ 返回结果 < 99Math.floor(Math.random() * (3- 1+ 1) + 1);// 返回结果 是1、2、3中的任意一个
Date对象
成员
getFullYear()
获取表示年份的4位数字，如2020
setFullYear(value)
设置年份
getMonth()
获取月份，范围0~11（0表示一月）
setMonth(value)
设置月份
getDate()
获取月份中的某一天，范围1~31
setDate(value)
设置月份中的某一天
getDay()
获取星期，范围0~6（0表示星期日）
getHours()
获取小时数，返回0~23
setHours(value)
设置小时数
示例
根据Date对象获取时间日期
var date = new Date(); // 基于当前时间创建Date对象// 示例结果：Fri Oct 06 2017 11:53:04 GMT+0800 (中国标准时间)date.toString();date.getFullYear(); // 示例结果：2017date.getMonth(); // 示例结果：9date.getDate(); // 示例结果：6
根据Date对象指定一个日期
// 方式1：分别传入年、月、日、时、分、秒（月的范围是0~11，即真实月份-1）var date1 = new Date(2017, 9, 1, 11, 53, 4);date1.toString(); // 返回结果：Sun Oct 01 2017 11:53:04 GMT+0800 (中国标准时间)// 方式2：通过字符串传入日期和时间var date2 = new Date('2017-10-01 11:53:04');date2.toString(); // 返回结果：Sun Oct 01 2017 11:53:04 GMT+0800 (中国标准时间)
处理设置的日期不合理的情况
new Date('2017'); // Sun Jan 01 2017 08:00:00 GMT+0800 (中国标准时间)new Date(2017, 9); // Sun Oct 01 2017 00:00:00 GMT+0800 (中国标准时间)new Date(2017, -1); // Thu Dec 01 2016 00:00:00 GMT+0800 (中国标准时间)new Date(2017, 12); // Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)new Date(2017, 0, 0); // Sat Dec 31 2016 00:00:00 GMT+0800 (中国标准时间)
【案例】制作月历
代码实现思路：构造当月1号的日期型对象。判断1号是星期几，写第一行。写本月剩余的时间。
第6章 BOM
6.1 什么是BOM对象
BOM：Brower Object Model，指的是浏览器对象模型。
作用：操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。
浏览器对象：浏览器提供的一系列内置对象的统称。
BOM浏览器对象模型：各内置对象之间按照某种层次组织起来的模型的统称。
window对象
document（文档对象）
也称为DOM对象，是HTML页面当前窗体的内容，同时也是JavaScript重要组成部分之一
history（历史对象）
主要用于记录浏览器的访问历史记录，也就是浏览网页的前进与后退功能
location（地址栏对象）
用于获取当前浏览器中URL地址栏内的相关数据
navigator（浏览器对象）
用于获取浏览器的相关数据，例如浏览器的名称、版本等，也称为浏览器的嗅探器
screen（屏幕对象）
可获取与屏幕相关的数据，例如屏幕的分辨率等
6.2 window对象
全局作用域
window对象：是BOM中所有对象的核心，同时也是BOM中所有对象的父对象。定义在全局作用域中的变量、函数以及JavaScript中的内置函数都可以被window对象调用。
弹出对话框和窗口
属性
closed
name
opener
parent
self
top
方法
alert()
prompt()
作用：用于生成用户输入的对话框。
第1个参数：用于设置用户输入的提示信息。第2个参数：用于设置输入框中的默认信息。
prompt('请输入测试的选项');prompt('请输入测试的选项', '用户名和密码');
confirm()
作用：弹出一个确认对话框，该对话框中包含提示消息以及确认和取消按钮。
参数：用于设置确认的提示信息。返回值：点击“确定”按钮，返回true。点击“取消”按钮，返回false。
open()
作用：用于打开一个新的浏览器窗口，或查找一个已命名的窗口。
语法：open(URL, name, specs, replace)
第1个参数：打开指定页面的URL地址，若没有指定，则打开一个新的空白窗口。第2个参数：指定target属性或窗口的名称。第3个参数：用于设置浏览器窗口的特征（如大小、位置、滚动条等），多个特征之间使用逗号分隔。第4个参数：设置为true，表示替换浏览历史中的当前条目，设置false（默认值），表示在浏览历史中创建新的条目。
close()
用于关闭浏览器窗口，调用该方法的对象就是需要关闭的窗口对象
窗口位置和大小
框架操作
window对象提供的frames属性可通过集合的方式，获取HTML页面中所有的框架，length属性就可以获取当前窗口中frames的数量。
设置框架
<body> <iframe name="frame01"></iframe> <iframe name="frame02"></iframe> <iframe name="frame03"></iframe></body>
获取窗口对应给定对象的内容
// 方式1：window.frames['frame01'].document.write('frame01 text.');// 方式2：window.frames.frame02.document.write('frame02 text.');// 方式3：window.frames[2].document.write('frame03 text.');
利用parent获取当前window对象所在的父窗口
window.parent; // 如果在框架中，获取父级窗口，否则返回自身引用window.parent.frames; // 获取同级别的框架
定时器
在指定时间后执行特定操作，也可以让程序代码每隔一段时间执行一次，实现间歇操作。
方法
setTimeout()
在指定的毫秒数后调用函数或执行一段代码
setInterval()
按照指定的周期（以毫秒计）来调用函数或执行一段代码
setTimeout()和setInterval()方法区别：
相同点：都可以在一个固定时间段内执行JavaScript程序代码。
setTimeout()只执行一次代码，setInterval()会在指定的时间后，自动重复执行代码。
提示
setTimeout()方法在执行一次后即停止了操作；setInterval()方法一旦开始执行，在不加干涉的情况下，间歇调用将会一直执行到页面关闭为止。
若要在定时器启动后，取消该操作，可以将setTimeout()的返回值（定时器ID）传递给clearTimeout()方法；或将setInterval()的返回值传递给clearInterval()方法。
【案例】限时秒杀
6.3 location对象
更改URL
URL：Uniform Resource Locator，统一资源定位符。
在Internet上访问的每一个网页文件，都有一个访问标记符，用于唯一标识它的访问位置，以便浏览器可以访问到，这个访问标记符称为URL。
方法
assign()
载入一个新的文档
reload()
重新载入当前文档
replace()
用新的文档替换当前文档
获取URL参数
Web开发中，经常通过URL地址传递的参数执行指定的操作，如商品的搜索，排序等。此时，可以利用location对象提供的search属性返回URL地址中的参数。
获取URL的指定部分：location.属性名。设置URL的指定部分：location.属性名 = 值。
【案例】定时跳转
6.4 history对象
历史记录跳转
history对象可对用户在浏览器中访问过的URL历史记录进行操作。
属性
length
方法
back()
加载history列表中的前一个URL
forward()
加载history列表中的下一个URL
go()
加载history列表中的某个具体页面
可根据参数的不同设置，完成历史记录的任意跳转。当参数值是一个负整数时，表示“后退”指定的页数；当参数值是一个正整数时，表示“前进”指定的页数。
当go()方法的参数为1或-1时，与forward()和back()方法的作用相同。
6.5 navigator对象
6.6 screen对象
screen对象用于返回当前渲染窗口中与屏幕相关的属性信息，如屏幕的宽度和高度等。以下展示主流浏览器中支持的screen属性。
第七章 DOM
7.1 DOM对象简介
DOM：Document Object Model，文档对象模型。
文档中的标签称为元素（Element）
文档中的所有内容称为节点（Node）
根据节点作用分为
标签节点
文本节点
属性节点
注释节点
DOM对象的继承关系
document和Element是两种不同类型的节点（Node）对象。它们不仅能够使用Node对象的一系列属性和方法完成节点操作。也可以使用特有的属性和方法完成不同类型节点的操作。
7.2 HTML元素操作
获取操作的元素
document对象的方法和属性
方法
document.getElementById()
返回对拥有指定id的第一个对象的引用
返回拥有指定id的元素
document.getElementsByName()
返回带有指定名称的对象集合
document.getElementsByTagName()
返回带有指定标签名的对象集合
document.getElementsByClassName()
返回带有指定类名的对象集合（不支持IE6~8）
返回集合
属性
document.body
document.documentElement
返回文档的html元素
document.forms
document.images
document.getElementsByTagName(‘body’)[0]与document.body全等
HTML5新增的document对象方法
querySelector()
返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用
querySelectorAll()
返回文档中匹配到指定的元素或CSS选择器的对象集合
Element对象的方法和属性
方法
getElementsByClassName()
getElementsByTagName()
属性
children
返回的也是对象集合，若要获取其中一个对象，也需通过下标的方式获取
HTMLCollection对象
getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集
用于元素操作
返回的集合中可以将id和name自动转换为一个属性
NodeList对象
用于节点操作
元素内容
属性
innerHTML
设置或返回元素开始和结束标签之间的HTML
保持编写的格式以及标签样式
innerText
设置或返回元素中去除所有标签的内容
纯文本
textContent
设置或者返回指定节点的文本内容
保留格式，包括回车
方法
document.write()
向文档写入指定的内容
document.writeln()
向文档写入指定的内容后并换行
【案例】改变盒子大小
元素属性
属性
attributes
返回一个元素的属性集合
方法
setAttribute(name, value)
设置或者改变指定属性的值
getAttribute(name)
返回指定元素的属性值
removeAttribute(name)
从元素中删除指定的属性
元素样式
style.属性名称
需要去掉CSS样式名里的中横线“-”，并将第二个英文首字母大写
设置背景颜色的background-color，在style属性操作中，需要修改为backgroundColor
问题：一个元素的类选择器可以有多个，在开发中如何对选择器列表进行操作？
原来的解决方案：利用元素对象的className属性获取，获取的结果是字符型，然后再根据实际情况对字符串进行处理。
HTML5提供的办法：新增的classList（只读）元素的类选择器列表。
classList
获取该元素的所有class
属性
length
方法
add()
添加类名，一次只能添加一个
remove()
将元素的类名删除，一次只能删除一个
toggle()
若元素之前没有指定名称的样式则添加，如果有则移除
item()
根据接收的数字索引参数，获取元素的类名
contains
判断元素是否包含指定名称的样式，若包含则返回true，否则返回false
【案例】标签栏切换效果
7.3 DOM节点操作
获取节点
属性
firstChild、lastChild
nodeName
nodeValue
nextSibiling
previousSibling
parentNode
childNodes
访问当前元素节点的所有子节点的集合
childNodes属性与前面学习过的children属性的区别
相同点
都可以获取某元素的子元素
不同点
childNodes属性用于节点操作，返回值中还会包括文本节点等其他类型的节点，是一个NodeList对象的集合。
children属性用于元素操作，返回的是HTMLCollection对象的集合
由于document对象继承自Node节点对象，因此document对象也可以进行以上的节点操作
节点追加
方法
document.createElement()
创建元素节点
document.createTextNode()
创建文本节点
document.createAttribute()
创建属性节点
appendChild()
在指定元素的子节点列表的末尾添加一个节点
insertBefore()
为当前节点增加一个子节点（插入到指定子节点之前）
getAttributeNode()
返回指定名称的属性节点
setAttributeNode()
设置或者改变指定名称的属性节点
create系列的方法是由document对象提供的，与Node对象无关
节点删除
方法
removeChild()
removeAttributeNode()
案例：百度音乐盒
第8章 事件
8.1 事件处理
事件概述
事件流
事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件流。
传播顺序解决方案
事件捕获方式
从DOM树的根节点到发生事件的元素节点
事件冒泡方式
从发生事件的元素节点到DOM树的根节点
W3C的解决方案
先捕获 再冒泡
事件的绑定方式
行内绑定式
<标签名 事件="事件的处理程序">
this指向window对象
动态绑定式
DOM元素对象.事件 = 事件的处理程序;
this指向当前正在操作的DOM元素对象
事件监听式
DOM对象.addEventListener(type, callback, [capture]);
type指的是为DOM对象绑定的事件类型，它是由on与事件名称组成的，如onclick
callback表示事件的处理程序
参数capture默认值为false，表示在冒泡阶段完成事件处理，将其设置为true时，表示在捕获阶段完成事件处理。
8.2 事件对象
获取事件对象
var event = e || window.event;
常用属性和方法
8.3 事件分类
页面事件
焦点事件
鼠标事件
【案例】鼠标拖拽特效
键盘事件
表单事件
第11章 HTML5的IndexedDB数据库
11.1 IndexedDB 数据库概述
NoSQL数据库
新一代数据库，其含义是Not Only SQL 或non-relational，具有非关系型、高效的特点
IndexedDB 数据库
IndexedDB 数据库和对象仓库
一个网站可能有一个或多个IndexedDB 数据库，每个数据库必须具有惟一的名称；一个数据库可包含一个或多个对象仓库。
版本更新和事务处理
IndexedDB 数据库中创建或删除对象仓库、创建或删除索引的操作，可以看作是数据库的结构发生变化，必须使用新的版本号来更新数据库的版本，以避免重复修改数据库结构。
索引和游标
IndexedDB数据库中，只能对被索引的属性值进行检索。对象仓库可有一个或多个索引。
IndexedDB 中的游标能够迭代一个对象仓库中的所有记录。IndexedDB 中的游标是双向的，所以可以向前和向后迭代记录，还可以跳过非惟一索引中的重复记录。
IndexedDB的异步API
同步API
用于Web浏览器中
IndexedDB大部分操作的结果返回模式，使用异步API的请求—响应模式
异步请求
onsuccess回调函数
在数据库操作成功时调用
onerror回调函数
在一个操作未成功时调用
11.2 创建数据库
创建和连接数据库
open()方法
用于创建或打开指定的数据库
var dbRequest =indexedDB.open(dbName,dbVersion);
IndexedDB 数据库中的对象定义
indexedDB
window.indexedDB=window.indexedDB||window.webkitIndexedDB;
IDBTransaction
window.IDBTransaction=window.IDBTransaction||window.webkitIDBTransaction|;
IDBKeyRange
window.IDBKeyRange= window.IDBKeyRange||window.webkitIDBKeyRange;
IDBCursor
window.IDBCursor= window.IDBCursor||window.webkitIDBCursor;
删除数据库
deleteDatabase()方法
function deleteDatabase() { var deleteDbRequest = window.indexedDB.deleteDatabase(dbName); deleteDbRequest.onsuccess = function (e) { //成功处理 }; deleteDbRequest.onerror = function (e) { //错误处理 };}
连接数据库的完整示例
11.3 数据库的版本更新和事务处理
版本更新
在使用IndexedDB 数据库的时候，所有数据的操作都需要在一个事务内部执行。
对于对象仓库与索引的操作，类似于关系数据库中表结构或索引的操作，必须在版本更新事务内部进行
事务处理
创建对象仓库与索引、对象仓库执行所有读取和写入操作的操作必须在事务中进行。
事务具有三种模式
readonly
提供对某个对象仓库的只读访问，在查询对象仓库时使用
readwrite
提供对某个对象仓库的读取和写入权限
versionchange
提供读取和写入权限来修改对象仓库定义，或者创建一个新的对象仓库
transaction()方法
var tx = idb. transaction (storeNames,mode);
11.4 创建对象仓库
对象仓库是数据记录的集合。在数据库中创建一个新对象仓库，需要对现有数据库进行版本更新。
创建对象仓库，需要在数据库对象上调用 createObjectStore() 方法
createObjectStore() 方法
var objectStore=idb. createObjectStore(name,optionalParameters);
name为对象仓库名
optionalParameters为可选参数，是一个JSON对象（他的keyPath属性指定对象仓库中记录的主键值）
11.5 创建索引
可以使用对象仓库的键来检索对象存储中的记录，也可以使用索引的字段来检索记录。
在IndexedDB数据库中，只能对被索引的属性值进行检索。对象仓库可具有一个或多个索引。
var idx=store.createIndex( indexName,"indexItem",optionalParameters);
indexName参数值为一个字符串，表示索引名
indexItem表示用记录对象的哪个属性来创建索引
optionalParameters为一个JSON对象（该对象的unique属性值为true，表示数据记录的索引属性值必须是唯一的）
11.6 保存和删除数据
保存数据
首先要连接IndexedDB 数据库
此时，open()方法中的数据库版本号参数可以省略不写
连接成功后使用该数据库对象的transaction方法开启一个读写事务
再使用put()方法或add()方法插入数据
var req = store.put(value);
插入数据
首先连接数据库
接着开启事务
transaction()方法开启事务
获取对象仓库
objectStore()方法获取该事务对象的作用范围中的某个对象仓库
var store = tx.objectStore('students');
最后插入数据
function inputData() { var idb; var dbRequest = indexedDB.open(myDb.dbName, myDb.dbVersion); dbRequest.onsuccess = function (e) { console.log("Connect success"); idb = e.target.result; var tx = idb.transaction(["students"], "readwrite"); //开启事务 var store = tx.objectStore("students"); //获取对象仓库 for (var i = 0; i < ss.length; i++) { var req = store.put(ss[i]); //插入数据 } req.onsuccess = function () { console.log("data input success"); }}}
检索数据
用对象仓库的主键获取记录
在获取对象仓库成功后，使用对象仓库的get()方法从对象仓库中获取一条数据
var req = store.get(key);
req.onsuccess = function (e) { //获取数据成功时所执行的处理 } req.onerror = function(e) { //获取数据失败时所执行的处理 }
使用索引对象获取记录
var tx = idb.transaction(['students']， "readonly"); var store = tx.objectStore('students'); var idx = store.index('sName'); var req = idx.get('Mike');
删除数据
delete()方法
var req=store.delete (keyPath);
11.7 使用游标检索批量数据
openCursor()方法
在对象仓库中打开游标
var req=store.openCursor(range,direction);
range参数是一个IDBKeyRange对象，该对象的返回游标的作用范围
direction参数用于指定游标的读取方向
指定游标范围的方法
IDBKeyRange.bound(lower,upper, lowerOpen，upperOpen);
返回指定范围内的所有记录，前两个参数是范围的下边界和上边界。
两个可选参数lowerOpen 和 upperOpen，取值为true或false，表明下边界或上边界上的记录是否包含在范围内。如果取值为true，不包括边界；如果取值为false，包括边界。默认值为false。
IDBKeyRange.lowerBound (lower,lowerOpen)
超过指定的边界值之后的所有记录。可选参数lowerOpen，表明下边界的记录是否包含在范围中
IDBKeyRange.upperBound(upper,upperOpen);
返回指定的边界值之前的所有记录。可选参数upperOpen，表明上边界的记录是否应包含在范围中
IDBKeyRange.only(value)
仅返回与指定值匹配的记录
指定游标的顺序
IDBCursor.NEXT：顺序循环
IDBCursor.NEXT_NO_DUPLICATE：顺序循环且键值不重复
IDBCursor.PREV：倒序循环
IDBCursor.PREV_NO_DUPLICATE：倒序循环且键值不重复
数据遍历
查找指定范围的记录
在openCurson()方法中设定查询范围
如果检索的数据不是对象仓库的主键，还需要使用对象仓库的index()方法获取当前要检索数据的索引
遍历对象仓库中的所有数据
连接数据库
启动事务，并指定事务的作用范围
var tx=idb.transaction(["students"],"readonly"); var store=tx.objectStore("students");
打开游标
store.openCursor()方法
打开游标后，游标指向对象仓库中的第一条记录，并触发IDBRequest对象的onsuccess事件，显示这条记录
cursor.continue()方法
将游标移动到下一条记录，并继续触发IDBRequest对象的onsuccess事件，显示这条记录，直到所有记录处理结束
对象
indexedDB对象
创建和连接数据库 open()
删除数据库 deleteDatabase( )
idb对象
开启事务 transaction（）
创建对象仓库 createObjectStore（）
store对象
创建索引 createIndex（）
索引对象 index（）
新增数据 put（）
检索数据 get（key）
删除数据 delete（keypath）
打开游标 openCursor（range,direction）
与运算
if
第一个值为true——>返回第二个值
浮动主题