web学习笔记

落日映苍穹つ 2022-05-17 23:37 124阅读 0赞

常用属性............................................................................................ 1

Html基础........................................................................................... 3

常用快捷键................................................................................ 3

认识大前端................................................................................ 4

前端工作就是 : 将设计图通过 Html,CSS,JS等技术生成网页............................................................................................ 4

应用于 : 移动端 PC端................................................... 4

用户体验 : UI设计................................................ 4

学习态度............................................................................ 4

认识网页.................................................................................... 4

网页由文字,图片,按钮,超链接等组成。........................... 4

Web标准............................................................................ 4

浏览器................................................................................ 5

浏览器内核......................................................................... 5

浏览器和服务器的那点事.................................................................................................... 6

Url地址.................................................................................................... 7

认识html.................................................................................... 7

Html 全称 : HyperText Markup Language........................ 7

Html结构标准(html 5 才开始的)...................................... 8

Html标签分类.................................................................... 8

Html标签关系分类............................................................ 8

开发工具............................................................................ 9

设置默认浏览器............................................................... 10

标签.......................................................................................... 10

单标签.............................................................................. 10

双标签.............................................................................. 11

文本标签.......................................................................... 11

图片标签.......................................................................... 12

路径.......................................................................................... 12

相对路径.......................................................................... 12

绝对路径.......................................................................... 13

超链接...................................................................................... 13

锚链接.............................................................................. 13

空链 不知道链接到那个页面的时候，用空链............. 14

压缩文件下载 不推荐使用.................................................................................................. 14

超链接优化写法 <base target="\_blank"> 让所有的超链接都在新窗口打开................................................................... 14

另存为 ctrl+shift+s............................................................... 15

特殊字符.................................................................................. 15

列表.......................................................................................... 15

无序列表.......................................................................... 15

有序列表.......................................................................... 16

自定义列表....................................................................... 16

音乐标签.................................................................................. 17

滚动.......................................................................................... 17

head里的一些常用东西........................................................... 18

!+tab html5的标签结构............................................... 18

Charset 编码................................................................. 18

关键字.............................................................................. 18

网页描述.......................................................................... 18

网页重定向....................................................................... 19

链接外部样式表(css)........................................................ 19

设置icon图标.................................................................. 19

表格.......................................................................................... 20

表格的标准结构............................................................... 21

表头和单元格合并........................................................... 22

表格标题、边框颜色、内容垂直对齐............................ 22

表单.......................................................................................... 24

表单的作用是收集信息。................................................ 24

标签语义化.............................................................................. 28

Css基础........................................................................................... 28

Css概念................................................................................... 28

选择器写法....................................................................... 29

选择器...................................................................................... 29

基础选择器....................................................................... 29

复合选择器....................................................................... 31

文本元素.................................................................................. 34

属性.................................................................................. 34

文本属性连写................................................................... 35

文字的表达方式............................................................... 35

样式表书写位置....................................................................... 36

标签分类(显示方式)................................................................ 37

块元素.............................................................................. 37

行内元素.......................................................................... 37

行内块元素(内联元素)..................................................... 37

块元素、行内元素 转换.................................................. 38

css三大特性............................................................................. 39

层叠性.............................................................................. 39

继承性.............................................................................. 39

优先级 默认样式<标签选择器<类选择器<id选择器<行内样式<!important.................................................................... 39

链接伪类.................................................................................. 40

文本修饰.......................................................................... 40

背景属性.................................................................................. 41

background-color 背景颜色..................................... 41

background-image 背景图片...................................... 41

Background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺...................................... 41

Background-position left | right | center | top | bottom 背景定位.................................................................... 41

Background-attachment 背景是否滚动 scroll | fixed.......................................................................................... 41

背景属性连写................................................................... 41

行高.......................................................................................... 42

行高的单位....................................................................... 42

补充:................................................................................. 43

PX特点............................................................................ 43

EM特点............................................................................ 43

１ 盒子模型............................................................................ 44

１.1 边框 border.......................................................... 44

１.2 边框合并 border-collapse:collapse;..................... 45

１.3 获取焦点................................................................. 45

１.4 内边距..................................................................... 46

１.5 外边距..................................................................... 46

１.6 行内元素可以定义左右的外边距，上下会被忽略掉。.......................................................................................... 47

文档流（标准流）................................................................... 47

浮动布局.................................................................................. 47

浮动的作用....................................................................... 48

清除浮动.................................................................................. 48

Overflow.................................................................................. 51

定位.......................................................................................... 51

定位的盒子居中显示............................................................... 52

标签包含规范.......................................................................... 53

规避脱标流.............................................................................. 55

图片和文字垂直居中对齐....................................................... 55

Css可见性................................................................................ 56

css之内容移除（网页优化）.................................................. 56

Css精灵图................................................................................ 57

属性选择器.............................................................................. 57

emmet快捷键：....................................................................... 57

html:......................................................................................... 58

生成结构的快捷键：....................................................... 58

生成id名和类名.............................................................. 58

生成同级元素：............................................................... 58

生成子类标签................................................................... 58

带固定数量的标签:.......................................................... 58

ul>li\*5+tab........................................................................ 58

带有序号名称................................................................... 58

生成带有内容的标签：................................................... 58

css............................................................................................. 59

前端基本功—javascript................................................................... 59

JS概述..................................................................................... 59

JS作用.............................................................................. 59

浏览器工作原理(了解)..................................................... 60

弱类型脚本语言（解释型语言，解析执行与编译执行）..... 60

解析执行与编译执行....................................................... 60

弱类型脚本语言............................................................... 60

组成（前端标准和JS组成）.................................................. 61

前端标准（HTML/CSS/JS）........................................... 61

JS组成.............................................................................. 61

输出语句.................................................................................. 61

引入方式.................................................................................. 62

内嵌式（学习期间用）................................................... 62

外链式（实际开发）....................................................... 62

变量.......................................................................................... 62

命名规则.......................................................................... 62

变量使用.......................................................................... 62

数据类型.................................................................................. 63

数据类型划分................................................................... 63

字面量.............................................................................. 63

简单数据类型介绍........................................................... 63

数据类型转换.......................................................................... 65

任何简单类型转换成String（三种方法）...................... 66

任何简单类型转换成Number.......................................... 66

任何简单类型转换成Boolean.......................................... 67

操作符...................................................................................... 67

操作符种类....................................................................... 67

优先级.............................................................................. 68

&&和||运算....................................................................... 68

流程控制.................................................................................. 69

循序结构.......................................................................... 69

选择结构.......................................................................... 69

循环结构 (js中没有块级作用域,只有在function中有). 70

案例：...................................................................................... 72

数组.......................................................................................... 72

数组的概述....................................................................... 72

数组的定义....................................................................... 73

数组的操作....................................................................... 73

遍历数组（获取并操作数组中的每一个元素）（！！！重点！！！）........................................................................... 74

案例：.............................................................................. 74

调试（打断点）............................................................... 74

函数基础.................................................................................. 75

函数概述.......................................................................... 75

函数的定义....................................................................... 75

参数.................................................................................. 75

返回值.............................................................................. 76

案例.................................................................................. 76

函数名、函数体和函数加载问题（重点记忆）............. 77

作业：.............................................................................. 77

函数定义.......................................................................... 77

变量和作用域（隐式全局变量和变量声明提升）......... 78

小知识.............................................................................. 80

函数高级.................................................................................. 80

匿名函数（了解）........................................................... 80

函数是一种类型（了解）................................................ 81

函数作为参数（了解）................................................... 81

递归（理解）................................................................... 81

对象和面向对象....................................................................... 81

JS中的对象（Object）基于面向对象............................. 81

创建自定义对象............................................................... 82

对象字面量和JSON......................................................... 82

Json组成.......................................................................... 83

for...in...遍历JSON.......................................................... 83

参数和传值问题............................................................... 83

数组高级API........................................................................... 84

学习API的方法............................................................... 84

Array的内置方法............................................................. 84

事件.......................................................................................... 88

概述.................................................................................. 88

事件三要素....................................................................... 88

案例.................................................................................. 90

DOM概述................................................................................ 90

解析过程.......................................................................... 90

DOM (文档对象模型).................................................. 90

DOM的数据结构（树状）............................................. 92

HTML的组成部分为节点（ Node ）............................ 92

DOM节点的获得............................................................. 92

DOM 访问关系（节点的获得）..................................... 93

DOM节点操作 （！！！！！重点！！！！！）......... 96

DOM详解（属性操作）......................................................... 97

DOM元素........................................................................ 97

案例.................................................................................. 98

value和innerHTML和innerText和textContent............. 98

DOM详解................................................................................ 98

DOM案例........................................................................ 98

总结.................................................................................. 99

工具类的封装tools.js(了解,尝试).................................. 100

DOM创建元素............................................................... 101

内置对象BOM....................................................................... 101

Date................................................................................. 102

String.............................................................................. 103

Math................................................................................ 105

offset家族.............................................................................. 106

三大家族和一个事件对象.............................................. 106

Offset家族简介.............................................................. 106

offsetLeft和style.left区别............................................. 107

动画和封装............................................................................ 107

动画定义........................................................................ 107

动画的种类..................................................................... 108

动画原理........................................................................ 108

体验匀速动画................................................................. 108

案例........................................................................................ 108

焦点图............................................................................ 108

切换图............................................................................ 109

无缝滚动........................................................................ 109

缓动动画................................................................................ 109

三个函数........................................................................ 109

缓动动画原理................................................................. 109

体验缓动动画................................................................. 110

分析为什么没有到达指定位置...................................... 110

offsetLeft和style.left的值的获取问题.......................... 110

按例：筋斗云................................................................. 110

第二家族scroll....................................................................... 111

Scroll家族组成.............................................................. 111

获取title、body、head、html标签............................... 112

Json回顾........................................................................ 112

Scroll()的封装................................................................ 113

案例................................................................................ 114

小知识.................................................................................... 114

onscroll事件................................................................... 114

屏幕跳转........................................................................ 114

前端基本功—javascript 第八天............................................ 114

今日内容：............................................................................ 114

scroll家族.............................................................................. 115

案例................................................................................ 115

事件对象（event）................................................................ 115

事件对象的获取（event的获取）................................. 115

兼容获取方式有两种：................................................. 116

event内容重要内容........................................................ 116

screenX、pageX和clientX的区别................................ 117

pageY和pageX的兼容写法（低版本不支持,很重要）................................................................................................ 118

新事件（onmousemove）.............................................. 118

案例................................................................................ 118

第三大家族client................................................................... 119

主要成员........................................................................ 119

三大家族区别（三大家族总结）.................................. 119

client家族特殊用法之:检浏览器宽/高度(可视区域)..... 120

Onresize事件.................................................................. 120

案例：根据浏览器可视区域大小，给定背景色........... 120

事件总结........................................................................ 120

获得屏幕宽高................................................................. 121

冒泡........................................................................................ 121

阻止冒泡........................................................................ 121

addEventListener(参数1，参数2，参数3)................... 121

案例................................................................................ 122

缓动框架................................................................................ 123

封装框架遇到的两个问题.............................................. 123

获取任意类型的CSS样式的属性值............................. 123

开闭原则........................................................................ 123

回调函数........................................................................ 124

案例（缓动框架的应用）.............................................. 124

缓动框架存在的问题..................................................... 125

缓动框架案例................................................................. 125

正则表达式（RegExp）........................................................ 126

概述................................................................................ 126

正则表达式的特点是：................................................. 127

正则表达式声明............................................................. 127

test() 方法...................................................................... 128

正则内部类（帮我们写好的工具直接使用）............... 128

正则边界（重点）......................................................... 130

量词（重点）................................................................. 130

案例：............................................................................ 130

replace 函数................................................................... 131

jQuery............................................................................................ 132

jQuery 基础课程—jQuery选择器........................................ 132

为什么要学jQuery？..................................................... 132

jQuery是什么？............................................................. 133

如何使用jQuery？（重点）.......................................... 134

jQuery详细解释............................................................. 135

JS跟jQuery的区别是什么？（理解）......................... 140

为什么要学jQuery选择器？......................................... 141

强大的jQuery选择器（重点）..................................... 141

jQuery 基础课程—jQuery-DOM操作.................................. 143

使用jQuery操作DOM.................................................. 143

为什么要使用jQuery操作DOM................................... 143

重点内容........................................................................ 144

样式操作........................................................................ 145

jQuery动画是什么？..................................................... 147

jQuery节点操作............................................................. 153

操作form表单............................................................... 156

尺寸位置操作................................................................. 158

jQuery其他必备知识............................................................. 161

重点内容........................................................................ 161

操作form表单............................................................... 161

尺寸位置操作................................................................. 163

jQuery事件机制............................................................. 165

jQuery补充.................................................................... 170

jQuery插件机制............................................................. 172

H5................................................................................................... 173

1.1 认识HTML5................................................................... 173

1.2 语法规范......................................................................... 174

语义标签................................................................................ 175

常用新语义标签............................................................. 176

兼容处理........................................................................ 176

表单........................................................................................ 177

输入类型 (表单类型，表单元素，表单属性,表单事件.)......................................................................................... 177

表单元素（标签）......................................................... 178

表单属性........................................................................ 179

表单事件........................................................................ 180

案例练习........................................................................ 181

181

多媒体.................................................................................... 182

音频................................................................................ 182

视频................................................................................ 183

DOM扩展.............................................................................. 184

获取元素........................................................................ 184

类名操作........................................................................ 184

自定义属性..................................................................... 185

案例练习 (tab 切换)...................................................... 185

新增API................................................................................. 186

多媒体............................................................................ 186

拖拽................................................................................ 188

历史................................................................................ 188

地理定位........................................................................ 189

Web存储........................................................................ 190

全屏................................................................................ 191

网络状态........................................................................ 192

应用缓存........................................................................ 192

Font Awesome 字体框架............................................... 195

CSS3.............................................................................................. 196

1.3 CSS3的现状.................................................................... 196

1.4 如何对待......................................................................... 197

准备工作................................................................................ 197

统一环境........................................................................ 197

如何使用手册................................................................. 197

基础知识................................................................................ 198

选择器............................................................................ 198

颜色................................................................................ 201

文本 (shadow阴影)....................................................... 202

盒模型............................................................................ 203

边框................................................................................ 204

渐变................................................................................ 210

背景................................................................................ 214

过渡(transition)............................................................... 216

2D转换.......................................................................... 220

1、 3d变换.................................................................... 222

2、透视：...................................................................... 222

3、transform-style:preserve-3d;...................................... 222

4、 backface-visibility:hidden; 背面不可见.................. 223

5、动画：...................................................................... 223

伸缩布局........................................................................ 224

Web字体................................................................................ 227

字体格式........................................................................ 228

字体图标........................................................................ 228

兼容性.................................................................................... 229

高级应用................................................................................ 229

ajax................................................................................................. 231

HTTP服务搭建...................................................................... 231

AMP............................................................................... 231

AMP集成环境............................................................... 231

WAMP安装................................................................... 231

测试访问........................................................................ 232

配置局域网访问............................................................. 233

配置网站根目录............................................................. 234

PHP基础................................................................................ 234

PHP简介........................................................................ 234

PHP常见语法................................................................ 234

PHP中的header............................................................. 239

PHP表单........................................................................ 240

PHP\_GET数据获取....................................................... 240

PHP\_POST数据获取..................................................... 241

POST&GET错误处理.................................................... 241

PHP文件上传处理 $\_FILES对象....................... 242

PHP文件上传处理02\_文件保存................................. 242

常见网络传输协议................................................................. 243

HTTP协议............................................................................. 244

监测工具........................................................................ 244

请求/请求报文................................................................ 244

响应/响应报文....................................................................... 246

常见的响应状态..................................................................... 248

PHP设置上传文件大小......................................................... 248

修改php.ini.................................................................... 248

修改内容........................................................................ 248

Ajax的基本概念和使用........................................................ 249

同步&异步..................................................................... 249

异步更新网站........................................................................ 249

网站内容更新:................................................................ 249

Ajax概念............................................................................... 249

XMLHttpRequest.................................................................... 250

XMLHttpRequest\_API讲解................................................... 252

1.创建XMLHttpRequest对象(兼容性写法).................. 252

2.发送请求:.................................................................... 253

3.POST请求注意点:...................................................... 253

4.onreadystatechange事件.............................................. 253

4.服务器响应内容.......................................................... 254

Ajax传输xml......................................................................... 254

XML简介....................................................................... 254

XML语法....................................................................... 255

XML解析....................................................................... 256

PHP中设置Header................................................................ 256

Ajax传输json........................................................................ 257

JSON解析...................................................................... 257

JavaScript 中.................................................................. 257

Ajax工具函数封装................................................................ 259

原生Ajax写法回顾........................................................ 259

抽取公共部分................................................................. 260

Jquery中的ajax..................................................................... 261

格式化表单$('form').serialize()....................................... 261

JQueryAjax使用............................................................ 262

模版引擎................................................................................ 265

模版引擎简介................................................................. 265

模版插件原理................................................................. 266

常见的模板插件............................................................. 266

ArtTemplate基本使用.................................................... 266

同源以及跨域........................................................................ 267

同源................................................................................ 267

跨域方案(了解).............................................................. 268

JSONP(了解).................................................................. 268

jQuery 的$.ajax()........................................................... 269

瀑布流.................................................................................... 270

什么是瀑布流?............................................................... 271

瀑布流实现原理............................................................. 272

移动端开发.................................................................................... 272

设备................................................................................ 272

移动web页面的作用..................................................... 272

注意点............................................................................ 273

移动web的注意点......................................................... 273

移动端的浏览器............................................................. 273

电脑上查看移动端界面................................................. 273

常见前端编辑器............................................................. 274

Viewport................................................................................. 274

viewport的概念.............................................................. 274

修改viewport................................................................. 274

可选值............................................................................ 275

移动web样式注意................................................................ 275

点击高亮效果................................................................. 275

盒子模型........................................................................ 276

Input默认样式清除........................................................ 276

最小宽度和最大的宽度................................................. 276

视网膜屏幕..................................................................... 276

左右两张的无限轮播..................................................... 277

touch............................................................................... 277

过度事件........................................................................ 278

图片分辨率问题............................................................. 279

移动端屏幕适配布局方式.............................................. 279

抽取通用样式................................................................. 279

学习布局........................................................................ 279

移动京东站首页js效果................................................. 279

过度结束事件................................................................. 280

移动端特有事件............................................................. 280

常见的封装..................................................................... 280

LESS............................................................................... 280

less只是一个纯文本...................................................... 281

less使用.......................................................................... 281

考拉编译注意点............................................................. 281

less的作用...................................................................... 282

如何让代码写的通用性更强.......................................... 282

响应式............................................................................ 284

微金所............................................................................ 286

响应式布局..................................................................... 286

bootsrap使用.................................................................. 287

标签页导航..................................................................... 288

bootstrap使用................................................................. 289

栅格系统的偏移............................................................. 289

zepto............................................................................... 290

响应式布局..................................................................... 290

bootsrap使用.................................................................. 291

微金所信息区域............................................................. 292

# **常用属性** #

cursor:**pointer**;//设定鼠标移入的形状为一只伸出食指的手

position: **absolute**;/\*子布局为绝对布局，从而让此控件随着父布局放大或缩小时位置不变\*/

position: **relative**;/\*使父布局为相对布局\*/

right: 10**px**;/\*让控件在右侧\*/  
margin: 0 **auto**;/\*使内部的div居中\*/

text-align: **center**;/\*文本内容居中\*/  
text-decoration: **none**;/\*去掉a标签的下划线\*/

/\*隐藏\*/  
.hide\{  
display: **none**;  
\}  
/\*显示\*/  
.show\{  
display: **block**;  
\}

box.onmouseover = fun1;/\*鼠标悬停，即鼠标停留在图片等上方\*/  
box.onmouseout = fun2;/\*鼠标移出，即鼠标离开图片等所在的区域\*/

list-style-type: **none**;/\*去掉每个li前面的点\*/

background: url("images/bgs.png") **no-repeat**;/\*no-repeat使背景图片不重复\*/

input.disabled = true;//禁用输入框

input.disabled = false;//解禁输入框

input.style.border = "1px solid red"//设置输入框的样式

input.style.border = ""//清空输入框的样式

input\{

/\*去掉input边框\*/

border:0 none;

/\*去掉被点击后的边框\*/

outline-style: none;

/\*设置边框连写\*/

border:dashed 1px green;

/\*获取焦点\*/

input:focus\{

border:dotted 1px red;

border-width: 3px;

outline: **none**;/\*清除鼠标点击输入框时出现的蓝色边框\*/

<input type=**"text"** οnblur=**"**fn(this)**"** οnfοcus=**"**fn2(this)**"**>

border: 2**px solid** \#e4e4e4;/\*设置外边框\* dotted 点线,dashed 虚线,solid 实线/

z-index: 100;/\*设置层次，值越大层次越高\*/

font-weight: **bold**;/\*设置字体加粗\*/

border-radius: 4**px**;/\*设置圆角\*/

/\*获取窗口内部的宽高\*/  
var w = window.innerWidth;  
var y = window.innerHeight;

overflow 属性规定当内容溢出元素框时发生的事情

可能的值

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#3f3f3f;border-color:#3f3f3f;width:86.2pt;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">值</span></strong></p> </td> 
   <td style="background-color:#3f3f3f;border-color:#3f3f3f;width:520.55pt;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">描述</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#aaaaaa;width:86.2pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">visible</span></p> </td> 
   <td style="background-color:#ffffff;width:520.55pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">默认值。内容不会被修剪，会呈现在元素框之外。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;width:86.2pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">hidden</span></p> </td> 
   <td style="width:520.55pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">内容会被修剪，并且其余内容是不可见的。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#aaaaaa;width:86.2pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">scroll</span></p> </td> 
   <td style="background-color:#ffffff;width:520.55pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;width:86.2pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">auto</span></p> </td> 
   <td style="width:520.55pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#aaaaaa;width:86.2pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">inherit</span></p> </td> 
   <td style="background-color:#ffffff;width:520.55pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">规定应该从父元素继承</span><span style="color:#000000;"> overflow </span><span style="color:#000000;">属性的值。</span></p> </td> 
  </tr> 
 </tbody> 
</table>

a标签空连方式：

1,href=“\#”

2，href=“javascript:;”

3，herf=“javascript:void(0)”

Opacity:0.3;//单独设置透明度

Array.from(数组)//将伪数组转换成真数组

onselectstart=”return false”禁止被选中

# **Html基础** #

## **常用快捷键** ##

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+c</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">复制</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+v</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">粘贴</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+x</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">剪切</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+a</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">全选</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+s</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">保存文件</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+z</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">撤销一步</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Windows+d</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">显示桌面</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Windows+e</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">资源管理器</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Windows+r</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">打开运行窗口</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Alt+tab</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">切换软件窗口&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+tab</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">切换页签</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">F2</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">重命名</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">F5</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">刷新</p> </td> 
  </tr> 
 </tbody> 
</table>

## **认识大前端** ##

### **前端工作就是 : 将设计图通过 Html,CSS,JS等技术生成网页** ###

### **应用于 : 移动端 PC端** ###

### **用户体验 : UI设计** ###

### **学习态度** ###

养成一种习惯。

## **认识网页** ##

### **网页由文字,图片,按钮,超链接等组成。** ###

### **Web标准** ###

W3c组织（万维网联盟）

Html 结构标准 相当于 结构,骨骼,组成

Css 表现标准 相当于给人化妆

Js 行为标准 想当于 行为,功能,动作 灵动

### **浏览器** ###

◆浏览器是一个上网的客户端（软件）。

### **浏览器内核** ###

渲染引擎

### **浏览器和服务器的那点事** ###

IIS web服务器 提供网页浏览服务

### **Url地址** ###

## **认识html** ##

### **Html 全称 : HyperText Markup Language** ###

超文本标记语言。

超文本

标记 < html >

语言

### **Html结构标准(html 5 才开始的)** ###

< ! DOCTYPE html> 声明文档类型

<html> 根标签

<head> 头标签

<title></title> 标题标签

</head>

<body> 主体标签

</body>

</html>

Html 与htm是一样的。

后缀名能否决定文件格式?

不能,只能决定 打开方式

### **Html标签关系分类** ###

包含（嵌套关系）: <head> <title></title > </head >

并列关系 :<head></head> <body></body>

### **Html标签分类** ###

单标签 <! Doctype html>

双标签 <html></html> <head></head> <title></title>

### **开发工具** ###

Dw 历史悠久，设计师使用。

Sublime 轻量级 有很多好用的插件。

Webstorm 重量级 项目级别的开发工具,太过智能现在用不到。

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">新建文件、打开文件、打开文件夹</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Html:xt+tab</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">Html结构代码</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">tab</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">补全标签代码</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+shift+d</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">快速复制一行</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+shiif+k</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">快速删除一行</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+鼠标左键单击</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">集体输入</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+h</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">查找替换</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+f</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">查找</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+/</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">注释</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+L</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">快速选择一行</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">Ctrl+shift+↑（↓）</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">快速上移（下移）一行</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">F11</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">全屏</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">查看----布局</p> </td> 
  </tr> 
 </tbody> 
</table>

### **设置默认浏览器** ###

Chrome浏览器右上角，设置里选择设置默认浏览器。

## **标签** ##

### **单标签** ###

◆注释标签 ctrl+/

<!— 内容 -->

◆ 换行标签 <br />

◆ 水平线标签 <hr />

### **双标签** ###

特点：上下自动生成空白行。<br />换行不会生成空白行。

**标题标签**

**h1-h6** **取值到h6**

### **文本标签** ###

**<font>****文本内容</font>**

**文本格式化标签**

**文本加粗标签 <strong></strong> <b></b>** **工作里尽量使用strong**

**文本倾斜标签**

<em></em> <i></i> 工作里尽量使用em

**删除线标签**

**<del></del> <s></s>** **工作里尽量使用del**

**下划线标签**

<ins></ins> <u></u> 工作里尽量ins

◆注意：之所以工作里使用<strong></strong> <em></em> <del></del>

<ins></ins> 是因为更有语义化。

### **图片标签** ###

Src 图片的来源 必写属性

Alt 替换文本 图片不显示的时候显示的文字

Title 提示文本 鼠标放到图片上显示的文字

Width 图片宽度

Height 图片高度

◆图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。

## **路径** ##

### **相对路径** ###

相对于文件自身出发，就是相对路径。

◆文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。

◆图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称

◆图片（html）在文件的上一级目录里，..+/+图片（html）名称

◆图片在文件的上一级的其他目录里，../文件夹名称/图片名称

★总结：找到下一级目录（文件夹）的图片（文件）用 /

跳出当前目录使用../

### **绝对路径** ###

## **超链接** ##

href 去往的路径（跳转的页面） 必写属性

title 提示文本 鼠标放到链接上显示的文字

target=”\_self” 默认值 在自身页面打开（关闭自身页面，打开链接页面）

target=”\_blank” 打开新页面 （自身页面不关闭，打开一个新的链接页面）

### **锚链接** ###

1.  先定义一个锚点

1.  超链接到锚点

### **空链 不知道链接到那个页面的时候，用空链** ###

### **压缩文件下载 不推荐使用** ###

### **超链接优化写法   <base target="\_blank"> 让所有的超链接都在新窗口打开** ###

## **另存为 ctrl+shift+s** ##

## **特殊字符** ##

## **列表** ##

### **无序列表** ###

<ul>

<li></li> 列表项

</ul>

type=”square” 小方块

Type=”disc” 实心小圆圈

Type=”circle” 空心小圆圈

### **有序列表** ###

<ol>

<li></li> 列表项

</ol>

◆type=”1,a,A,i,I” type的值可以为1,a,A,i,I

start=”3” 决定了开始的位置。

### **自定义列表** ###

<dl>

<dt></dt> 小标题

<dd></dd> 解释标题

</dl>

## **音乐标签** ##

注意:此标签是h5 特有的,老版本不支持

hidden属性表示是否隐藏播放界面

## **滚动** ##

scrolldelay="10" 设置移动速度,数值越小越快 ,默认 90

scrollamount="5" 设置移动距离数值越大移动距离越大

## **head里的一些常用东西** ##

### **!+tab html5的标签结构** ###

### **Charset 编码** ###

Ascll

Ansi 扩展的ASCII编码

Unicode 日文/韩文

Gbk 中文

Gb2312 中文

Big5 繁体

Utf-8 通用字符集

### **关键字** ###

### **网页描述** ###

### **网页重定向** ###

### **链接外部样式表(css)** ###

### **设置icon图标** ###

## **表格** ##

展示数据。 是对网页重构的一个有益补充。

<table> 表格

<tr> 行

<td></td> 列

</tr>

</table>

◆属性：

Border=”1” 边框:1默认为2px

Width=”500” 宽度

Height=”300” 高

cellspacing=”2” 单元格与单元格的距离 : 0

cellpadding=”2” 内容距边框的距离

align=”left | right | center”

如果直接给表格用align=”center” 表格居中

如果给tr或者td使用 ，tr或者td内容居中。

bgcolor=”red” 背景颜色。

bordercolor="green" 边框颜色

### **表格的标准结构** ###

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

### **表头和单元格合并** ###

◆ 表头 <caption></caption>

colspan=”2” 合并同一行上的单元格

rowspan=”2” 合并同一列上的单元格

### **表格标题、边框颜色、内容垂直对齐** ###

◆表格标题 <th></th>用法和td一样

标题的文字自动加粗水平居中对齐

◆边框颜色

◆内容垂直对齐方式

Valign=”top | middle | bottom”

## **表单** ##

### **表单的作用是收集信息。** ###

表单的组成

◆提示信息

◆表单控件

◆表单域

属性：action:处理信息

Method=”get | post”

Get通过地址栏提供（传输）信息，安全性差。

Post 通过1.php来处理信息，安全性高。

◆文本输入框

maxlength="6" 限制输入字符长度

readonly=”readonly” 将输入框设置为只读状态（不能编辑）

disabled="disabled" 输入框未激活状态

name="username" 输入框的名称

value="大前端" 将输入框的内容传给处理文件

◆密码输入框

★注意：文本输入框的所有属性对密码输入框都有效。

◆单选框

★只有将name的值设置相同的时候，才能实现单选效果。

★checked=”checked” 设置默认选择项。

◆下拉列表

<option>下拉列表选项</option>

</select>

属性：

Multiple=”multiple” 将下拉列表设置为多选项

Selected=”selected” 设置默认选中项目

<optgroup></optgroup> 对下拉列表进行分组。

Label=”” 分组名称。

◆多选框

Checked=”checked” 设置默认选中项

◆多行文本框

Cols 控制输入字符的长度。

Rows 控制输入的行数

◆ 文件上传控件

◆文件提交按钮

★：可以实现信息提交功能

◆普通按钮

★不能提交信息，配合JS使用。

◆图片按钮

★图片按钮可实现信息提交功能

☆提交按钮与图片按钮的区别：唯一的区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去。

◆重置按钮

★将信息重置到默认状态

◆表单信息分组

<fieldset></fieldset> 对表单信息分组

<legend></legend> 表单信息分组名称  
html5补充表单控件

## **标签语义化** ##

好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。

标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

\-标签语义化意义：

1:网页结构合理

2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取；

3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）

4:便于团队开发和维护

1：尽可能少的使用无语义的标签div和span；

2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

3：不要使用纯样式标签，如：b、font、u等，改用css设置。

4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；

# **Css基础** #

## **Css概念** ##

CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)

Css是用来美化html标签的，相当于页面化妆。

◆样式表书写位置

### **选择器写法** ###

选择器是一个选择谁（标签）的过程。

选择器\{属性:值； 属性:值;\}

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:205.55pt;"> <p style="margin-left:0cm;">属性</p> </td> 
   <td style="vertical-align:top;width:290.45pt;"> <p style="margin-left:0cm;">解释</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:205.55pt;"> <p style="margin-left:0cm;"><strong>width:20px;</strong></p> </td> 
   <td style="vertical-align:top;width:290.45pt;"> <p style="margin-left:0cm;"><strong>宽</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:205.55pt;"> <p style="margin-left:0cm;"><strong>height:20px;</strong></p> </td> 
   <td style="vertical-align:top;width:290.45pt;"> <p style="margin-left:0cm;"><strong>高</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:205.55pt;"> <p style="margin-left:0cm;"><strong>background-color:red;</strong></p> </td> 
   <td style="vertical-align:top;width:290.45pt;"> <p style="margin-left:0cm;"><strong>背景颜色</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:205.55pt;"> <p style="margin-left:0cm;"><strong>font-size:24px;</strong></p> </td> 
   <td style="vertical-align:top;width:290.45pt;"> <p style="margin-left:0cm;"><strong>文字大小</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:205.55pt;"> <p style="margin-left:0cm;"><strong>text-align:left | center| right</strong></p> </td> 
   <td style="vertical-align:top;width:290.45pt;"> <p style="margin-left:0cm;"><strong>内容的水平对齐方式</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:205.55pt;"> <p style="margin-left:0cm;"><strong>text-indent:2em;</strong></p> </td> 
   <td style="vertical-align:top;width:290.45pt;"> <p style="margin-left:0cm;"><strong>首行缩进</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:205.55pt;"> <p style="margin-left:0cm;"><strong>color:red;</strong></p> </td> 
   <td style="vertical-align:top;width:290.45pt;"> <p style="margin-left:0cm;"><strong>文字颜色</strong></p> </td> 
  </tr> 
 </tbody> 
</table>

## **选择器** ##

### **基础选择器** ###

◆标签选择器

标签\{属性：值;\}

特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。

◆类选择器（重点）

写法

.自定义类名\{属性:值; 属性:值；\}

特点： 谁调用，谁生效。

一个标签可以调用多个类选择器。

多个标签可以调用同一个类选择器。

★类选择器命名规则

◎不能用纯数字或者数字开头来定义类名

◎不能使用特殊符号或者特殊符号开头（\_）来定义类名

◎不建议使用汉字来定义类名

◎不推荐使用属性(css关键字)或者属性的值来定义类名

关键字:凡是被css语言所定义过的词语就叫做关键字

◆ID选择器

写法

\#自定义名称\{属性:值;\}

特点： 一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。

一个标签只能调用一个ID选择器。

一个标签可以同时调用类选择器和ID选择器。

◆通配符选择器

\*\{属性:值;\}

特点：给所有的标签都使用相同的样式。

★不推荐使用，增加浏览器和服务器负担。

◆颜色的显示方式

◎直接写颜色的名称

◎十六进制显示颜色 0-9 a-f RGB

\#000000; 前2为代表红色，中间2位代表绿色，后边2位代表蓝色。

◎rgb

◎rgba

a代表alpha 不透明度 值 0-1

### **复合选择器** ###

概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。

◆交集选择器

标签+类（ID）选择器\{属性：值；\}

特点：即要满足使用了某个标签，还要满足使用了类（id）选择器。

◆后代选择器（重点）

选择器+空格+选择器\{属性：值;\}

后代选择器首选要满足包含（嵌套）关系。

父集元素在前边，子集元素在后边。

特点：无限制隔代。

只要能代表标签，标签、类选择器、ID选择器自由组合。

◆子代选择器

选择器>选择器\{属性:值;\}

选中直接下一代元素。

◆并集选择器

选择器+，+选择器+，选择器\{属性:值;\}

## **文本元素** ##

### **属性** ###

font-size:16px; 文字大小

font-weight: 700 ; 值从100-900，文字粗细，不推荐使用(font-weight:bold;)

font-family:微软雅黑(Lobster-Regular); 文本的字体

Font-style: normal / italic; normal 默认值 italic 斜体

line-height: 行高

### **【】【】文本属性连写** ###

font: font-style font-weight font-size/line-height font-family;

◆：注意：font:后边写属性的值。一定按照书写顺序。

文本属性连写文字大小和字体为必写项。

Font:italic 700 16px/40px 微软雅黑;

### **文字的表达方式** ###

◆直接写中文名称。

◆写字体的英文名称。

◆unicode 编码

## **样式表书写位置** ##

◆内嵌式写法

<head>

样式表写法

</style>

</head>

◆外链式写法

写在head里，<link rel=”stylesheet” href=”1.css”>

◆行内样式表

◆三种写法特点:

★内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。

★外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。推荐使用

★行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。 （不推荐使用）

## **标签分类(显示方式)** ##

### **块元素** ###

典型代表,div,h1-h6,p,ul,li

特点: ★独占一行

★可以设置宽高

★ 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。

### **行内元素** ###

典型代表 span ,a, ,strong , em, del, ins

特点：★在一行上显示

★不能直接设置宽高

★元素的宽和高就是内容撑开的宽高。

### **行内块元素(内联元素)** ###

典型代表 input img

特点：★在一行上显示

★可以设置宽高

### **块元素、行内元素 转换** ###

◆块元素转行内元素

display:inline;

◆行内元素转块元素

display:block;

◆块和行内元素转行内块元素

display:inline-block;

## **css三大特性** ##

### **层叠性** ###

当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码。和标签调用选择器的顺序没有关系。

### **继承性** ###

继承性发生的前提是包含（嵌套关系）

★文字颜色可以继承

★文字大小可以继承

★字体可以继续

★字体粗细可以继承

★文字风格可以继承

★行高可以继承

总结：文字的所有属性都可以继承。

◆特殊情况：

h系列不能继承文字大小。

a标签不能继承文字颜色。

### **优先级   默认样式<标签选择器<类选择器<id选择器<行内样式<!important**  ###

0 1 10 100 1000 1000以上

**◆优先级特点**

**★继承的权重为0**

**★权重会叠加**

## **链接伪类** ##

a:link\{属性:值;\} a\{属性:值\}效果是一样的。

a:link\{属性:值;\} 链接默认状态

a:visited\{属性:值;\} 链接访问之后的状态

a: text-decoration \{属性:值;\} 鼠标放到链接上显示的状态

a:active\{属性:值;\} 链接激活的状态

：focus\{属性:值；\} 获取焦点

### **文本修饰** ###

text-decoration: none | underline | line-through

## **背景属性** ##

### **background-color 背景颜色** ###

### **background-image 背景图片** ###

### **Background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺** ###

### **Background-position left | right | center | top | bottom 背景定位** ###

★方位值只写一个的时候，另外一个值默认居中。

★写2个方位值的时候，顺序没有要求。

★写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。

### **Background-attachment 背景是否滚动 scroll | fixed** ###

### **背景属性连写** ###

★：连写的时候没有顺序要求，url为必写项。

## **行高** ##

浏览器默认文字大小：16px

行高：是基线与基线之间的距离

行高=文字高度+上下边距

一行文字行高和父元素高度一致的时候，垂直居中显示。

### **行高的单位** ###

总结:单位(px)除了像素以外，行高都是与文字大小乘积。

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:93.4pt;"> <p style="margin-left:0cm;">行高单位</p> </td> 
   <td style="vertical-align:top;width:150.75pt;"> <p style="margin-left:0cm;">父元素文字大小</p> </td> 
   <td style="vertical-align:top;width:155.25pt;"> <p style="margin-left:0cm;">子元素文字大小</p> </td> 
   <td style="vertical-align:top;width:93.25pt;"> <p style="margin-left:0cm;">行高</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:93.4pt;"> <p style="margin-left:0cm;">40px</p> </td> 
   <td style="vertical-align:top;width:150.75pt;"> <p style="margin-left:0cm;">20px</p> </td> 
   <td style="vertical-align:top;width:155.25pt;"> <p style="margin-left:0cm;">30px</p> </td> 
   <td style="vertical-align:top;width:93.25pt;"> <p style="margin-left:0cm;">40px</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:93.4pt;"> <p style="margin-left:0cm;">2em</p> </td> 
   <td style="vertical-align:top;width:150.75pt;"> <p style="margin-left:0cm;">20px</p> </td> 
   <td style="vertical-align:top;width:155.25pt;"> <p style="margin-left:0cm;">30px</p> </td> 
   <td style="vertical-align:top;width:93.25pt;"> <p style="margin-left:0cm;">40px</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:93.4pt;"> <p style="margin-left:0cm;">150%</p> </td> 
   <td style="vertical-align:top;width:150.75pt;"> <p style="margin-left:0cm;">20px</p> </td> 
   <td style="vertical-align:top;width:155.25pt;"> <p style="margin-left:0cm;">30px</p> </td> 
   <td style="vertical-align:top;width:93.25pt;"> <p style="margin-left:0cm;">30px</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:93.4pt;"> <p style="margin-left:0cm;">2</p> </td> 
   <td style="vertical-align:top;width:150.75pt;"> <p style="margin-left:0cm;">20px</p> </td> 
   <td style="vertical-align:top;width:155.25pt;"> <p style="margin-left:0cm;">30px</p> </td> 
   <td style="vertical-align:top;width:93.25pt;"> <p style="margin-left:0cm;">60px</p> </td> 
  </tr> 
 </tbody> 
</table>

总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。

◆推荐行高使用像素为单位。

### **补充:** ###

### **PX特点** ###

\-1. IE无法调整那些使用px作为单位的字体大小；

\-2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

\-3. Firefox能够调整px和em，rem，但是有大部分的国产浏览器使用IE内核。

### **EM特点** ###

\-1. em的值并不是固定的；

\-2. em会继承父级元素的字体大小。

em是以字为单位，1em是占一个字符的宽度，大小随着字符的字号而变化。  
px是像素，是对所有浏览器都显示为一样大小的。

*   *   **盒子模型**

1.  1.  1.   **边框 border**

border-top-style: solid 实线

dotted 点线

dashed 虚线

border-top-color 边框颜色

border-top-width 边框粗细

◆**边框属性的连写**

**特点：没有顺序要求，线型为必写项。**

◆四个边框值相同的写法

**特点：没有顺序要求，线型为必写项。**

1.  1.  1.   **边框合并 border-collapse:collapse;**

1.  1.  1.   **获取焦点**

1.  1.  1.   **内边距**

Padding-left | right | top | bottom

◆padding连写

Padding: 20px; 上右下左内边距都是20px

Padding: 20px 30px; 上下20px 左右30px

Padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40

Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px

◆**内边距撑大盒子的问题**

内边距影响盒子的宽度

边框影响盒子的宽度

**盒子的宽度=****定义的宽度+****边框宽度+****左右内边距**

**◆继承的盒子一般不会被撑大**

包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。

1.  1.  1.   **外边距**

margin-left | right | top | bottom

◆外边距连写

Margin: 20px; 上下左右外边距20PX

Margin: 20px 30px; 上下20px 左右30px

Margin: 20px 30px 40px; 上20px 左右30px 下 40px

Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px

◆**垂直方向外边距合并**

两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。

◆**嵌套的盒子外边距塌陷**

解决方法: 1 给父盒子设置边框

2给父盒子 overflow:hidden; 隐藏溢出

bfc 格式化上下文 感兴趣了解

1.  1.  1.   **行内元素可以定义左右的外边距，上下会被忽略掉。**

## **文档流（标准流）** ##

元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。

## **浮动布局** ##

float: left | right

特点：

★元素浮动之后不占据原来的位置（脱标）

★浮动的盒子在一行上显示

★行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）

### **浮动的作用** ###

◆文本绕图

◆制作导航

◆网页布局

## **清除浮动** ##

当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。

◆清除浮动不是不用浮动，清除浮动产生的不利影响。

◆清除浮动的方法

clear: left | right | both

工作里用的最多的是clear:both;

★额外标签法

在最后一个浮动元素后添加标签,。

★给父集元素使用overflow:hidden; bfc

如果有内容出了盒子，不能使用这个方法。

★伪元素清除浮动 推荐使用

CSS初始化

为了考虑到浏览器兼容问题,不同的浏览器对有些标签的默认值是不同的,如果没有CSS初始化会出现浏览器之间的页面差异

腾讯：

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select\{margin:0;padding:0\}

body\{font:12px"宋体","Arial Narrow",HELVETICA;background:\#fff;-webkit-text-size-adjust:100%;\}

a\{color:\#2d374b;text-decoration:none\}

a:hover\{color:\#cd0200;text-decoration:underline\}

em\{font-style:normal\}

li\{list-style:none\}

img\{border:0;vertical-align:middle\}

table\{border-collapse:collapse;border-spacing:0\}

p\{word-wrap:break-word\}

新浪：

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div\{margin:0;padding:0;border:0;\}

body\{background:\#fff;color:\#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";\}

ul,ol\{list-style-type:none;\}

select,input,img,select\{vertical-align:middle;\}

a\{text-decoration:none;\}

a:link\{color:\#009;\}

a:visited\{color:\#800080;\}

a:hover,a:active,a:focus\{color:\#c00;text-decoration:underline;\}

淘宝：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td \{ margin:0; padding:0; \}

body, button, input, select, textarea \{ font:12px/1.5tahoma, arial, \\5b8b\\4f53; \}

h1, h2, h3, h4, h5, h6\{ font-size:100%; \}

address, cite, dfn, em, var \{ font-style:normal; \}

code, kbd, pre, samp \{ font-family:couriernew, courier, monospace; \}

small\{ font-size:12px; \}

ul, ol \{ list-style:none; \}

a \{ text-decoration:none; \}

a:hover \{ text-decoration:underline; \}

sup \{ vertical-align:text-top; \}

sub\{ vertical-align:text-bottom; \}

legend \{ color:\#000; \}

fieldset, img \{ border:0; \}

button, input, select, textarea \{ font-size:100%; \}

table \{ border-collapse:collapse; border-spacing:0; \}

## **Overflow** ##

## **定位** ##

定位方向: left | right | top | bottom

◆position:static; 静态定位。默认值，就是文档流。

◆绝对定位

Position:absolute;

特点：

★元素使用绝对定位之后不占据原来的位置（脱标）

★元素使用绝对定位，位置是从浏览器出发。

★嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。

★嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。

★给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）

◆相对定位

Position: relative;

特点：

★使用相对定位，位置从自身出发。

★还占据原来的位置。

★**子绝父相（父元素相对定位，子元素绝对定位）**

★行内元素使用相对定位不能转行内块

◆固定定位

相对于父级或同级别元素

Position:fixed;

特点：

★固定定位之后，不占据原来的位置（脱标）

★元素使用固定定位之后，位置从浏览器出发。

★元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）

## **定位的盒子居中显示** ##

★:margin:0 auto; 只能让标准流的盒子居中对齐。

★定位的盒子居中：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)

## **标签包含规范** ##

◆div可以包含所有的标签。

◆p标签不能包含div h1等标签。

◆h1可以包含p，div等标签。

◆行内元素尽量包含行内元素，行内元素不要包含块元素。

## **规避脱标流** ##

◆尽量使用标准流。

◆标准流解决不了的使用浮动。

◆浮动解决不了的使用定位。

## **图片和文字垂直居中对齐** ##

vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;

## **Css可见性** ##

overflow:hidden; 溢出隐藏

visibility:hidden; 隐藏元素 隐藏之后还占据原来的位置。

display:none; 隐藏元素 隐藏之后不占据原来的位置。

Display:block; 元素可见

Display:none 和display:block 常配合js使用。

## **css之内容移除（网页优化）** ##

◆使用text-indent:-5000em;

◆将元素高度设置为0,使用内边距将盒子撑开，给盒子使用overflow:hidden;将文字隐藏。

## **Css精灵图** ##

## **属性选择器** ##

## **emmet快捷键：** ##

emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。

## **html:** ##

### **生成结构的快捷键：** ###

！+ tab,可以生成html5的结构代码。

### **生成id名和类名** ###

标签名.类名\#id名+tab

没有标签名.类名+tab ==>div

### **生成同级元素：** ###

标签名+标签名+标签名 “+”tab

### **生成子类标签** ###

标签名>子标签名>子标签名>子标签名+tab

标签名>子标签名>子标签名>子标签名^^子标签名+tab

### **带固定数量的标签:** ###

### **ul>li\*5+tab** ###

### **带有序号名称** ###

ul>li.abc$\*3 + tab

### **生成带有内容的标签：** ###

ul>li>a\{item\}\*5

## **css** ##

width:30px==>w30+tab

Height:30px==>h30+tab

Margin:30px==>mg30+tab

Padding:30px==> pd30+tab

Line-height:12px==>lh12px+tab

Background==>bg+tab

# **Js高级** #

## **语法:** ##

**后代：>**

**缩写**：nav>ul>li

<nav>

<ul>

</ul></nav>

**兄弟：+**

**缩写**：div+p+bq

**上级：^**

**缩写**：div+div>p>span+em^bq

**缩写**：div+div>p>span+em^^bq

**分组：()**

**缩写**：div>(header>ul>li\*2>a)+footer>p

<div>

<ul>

</ul>

</header>

<p></p>

</footer></div>

**缩写**：(div>dl>(dt+dd)\*3)+footer>p

<div>

<dl>

</dl></div><footer>

**乘法：\***

**缩写**：ul>li\*5

<ul>

**自增符号：$**

**缩写**：ul>li.item$\*5

<ul>

**缩写**：h$\[title=item$\]\{Header $\}\*3

<h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3>

**缩写**：ul>li.item$$$\*5

<ul>

**缩写**：ul>li.item$@-\*5

<ul>

**缩写**：ul>li.item$@3\*5

<ul>

**ID和类属性**

**缩写**：\#header

**缩写**：.title

**缩写**：form\#search.wide

**缩写**：p.class1.class2.class3

**自定义属性**

**缩写**：p\[title="Hello world"\]

**缩写**：td\[rowspan=2 colspan=3 title\]

**缩写**：\[a='value1' b="value2"\]

**文本：\{\}**

**缩写**：a\{Click me\}

<a href="">Click me</a>

**缩写**：p>\{Click \}+a\{here\}+\{ to continue\}

<p>Click <a href="">here</a> to continue</p>

**隐式标签**

**缩写**：.class

**缩写**：em>.class

**缩写**：ul>.class

<ul>

**缩写**：table>.row>.col

<table>

</tr></table>

### **HTML** ###

*所有未知的缩写都会转换成标签，例如，foo → <foo></foo>*

**缩写**：!

<!doctype html><html lang="en"><head>

<title>Document</title></head><body>

</body></html>

**缩写**：a

**缩写**：a:link

**缩写**：a:mail

**缩写**：abbr

**缩写**：acronym

**缩写**：base

**缩写**：basefont

**缩写**：br

<br />

**缩写**：frame

**缩写**：hr

<hr />

**缩写**：bdo

**缩写**：bdo:r

**缩写**：bdo:l

**缩写**：col

<col />

**缩写**：link

**缩写**：link:css

**缩写**：link:print

**缩写**：link:favicon

**缩写**：link:touch

**缩写**：link:rss

**缩写**：link:atom

**缩写**：meta

**缩写**：meta:utf

**缩写**：meta:win

**缩写**：meta:vp

**缩写**：meta:compat

**缩写**：style

**缩写**：script

**缩写**：script:src

**缩写**：img

**缩写**：iframe

**缩写**：embed

**缩写**：object

**缩写**：param

**缩写**：map

**缩写**：area

**缩写**：area:d

**缩写**：area:c

**缩写**：area:r

**缩写**：area:p

**缩写**：form

**缩写**：form:get

**缩写**：form:post

**缩写**：label

**缩写**：input

**缩写**：inp

**缩写**：input:hidden

*别名：input\[type=hidden name\]*

**缩写**：input:h

*别名：input:hidden*

**缩写**：input:text, input:t

*别名：inp*

**缩写**：input:search

*别名：inp\[type=search\]*

**缩写**：input:email

*别名：inp\[type=email\]*

**缩写**：input:url

*别名：inp\[type=url\]*

**缩写**：input:password

*别名：inp\[type=password\]*

**缩写**：input:p

*别名：input:password*

**缩写**：input:datetime

*别名：inp\[type=datetime\]*

**缩写**：input:date

*别名：inp\[type=date\]*

**缩写**：input:datetime-local

*别名：inp\[type=datetime-local\]*

**缩写**：input:month

*别名：inp\[type=month\]*

**缩写**：input:week

*别名：inp\[type=week\]*

**缩写**：input:time

*别名：inp\[type=time\]*

**缩写**：input:number

*别名：inp\[type=number\]*

**缩写**：input:color

*别名：inp\[type=color\]*

**缩写**：input:checkbox

*别名：inp\[type=checkbox\]*

**缩写**：input:c

*别名：input:checkbox*

**缩写**：input:radio

*别名：inp\[type=radio\]*

**缩写**：input:r

*别名：input:radio*

**缩写**：input:range

*别名：inp\[type=range\]*

**缩写**：input:file

*别名：inp\[type=file\]*

**缩写**：input:f

*别名：input:file*

**缩写**：input:submit

**缩写**：input:s

*别名：input:submit*

**缩写**：input:image

**缩写**：input:i

*别名：input:image*

**缩写**：input:button

**缩写**：input:b

*别名：input:button*

**缩写**：isindex

**缩写**：input:reset

*别名：input:button\[type=reset\]*

**缩写**：select

**缩写**：option

**缩写**：textarea

**缩写**：menu:context

*别名：menu\[type=context\]>*

**缩写**：menu:c

*别名：menu:context*

**缩写**：menu:toolbar

*别名：menu\[type=toolbar\]>*

**缩写**：menu:t

*别名：menu:toolbar*

**缩写**：video

**缩写**：audio

**缩写**：html:xml

**缩写**：keygen

**缩写**：command

**缩写**：bq

*别名：blockquote*

**缩写**：acr

*别名：acronym*

**缩写**：fig

*别名：figure*

**缩写**：figc

*别名：figcaption*

**缩写**：ifr

*别名：iframe*

**缩写**：emb

*别名：embed*

**缩写**：obj

*别名：object*

**缩写**：src

*别名：source*

**缩写**：cap

*别名：caption*

**缩写**：colg

*别名：colgroup*

**缩写**：fst, fset

*别名：fieldset*

**缩写**：btn

*别名：button*

**缩写**：btn:b

*别名：button\[type=button\]*

**缩写**：btn:r

*别名：button\[type=reset\]*

**缩写**：btn:s

*别名：button\[type=submit\]*

## **异常处理** ##

## **常见的异常分类** ##

*  运行环境的多样性导致的异常（浏览器）
 *  语法错误，代码错误

异常最大的特征，就是一旦代码出现异常，后面的代码就不会再执行

## **异常捕获** ##

捕获异常，使用`try-catch`语句

try{

//这里写可能出现异常的代码

}catch(e){

//这里的e就是捕获的异常对象

//可以在这里写，出现异常后的处理代码

}

异常捕获语句执行的过程为：

1.  代码正常运行, 如果在try中出现了错误, try 里面出现错误的语句后面的代码都不再执行, 直接跳转到 catch 中
2.  catch中处理错误信息
3.  然后继续执行后面的代码
4.  如果 try 中没有出现错误, 那么不走 catch 直接执行后面的代码

通过`try-catch`语句进行异常捕获之后，代码将会继续执行，而不会中断。

**注意：**

*  语法错误异常用`try-catch`语句无法捕获，因为在预解析阶段，语法错误会直接检测出来，而不会等到运行的时候才报错。
 *  try-catch在一般日常开发中基本用不到，但是如果要写框架什么的，用的会非常多。因为这个会让框架变得健壮

## **抛出异常** ##

如何手动的抛出异常呢？

案例：自己写的一个函数，需要一个参数，如果用户不传参数，此时想直接给用户抛出异常，就需要了解如何抛出异常。

抛出异常使用`throw`关键字，语法如下：

throw 异常对象;

异常对象一般是用`new Error("``异常消息``")`, 也可以使用任意对象

function test(para){

if(para == undefined){

throw new Error("请传递参数");

//这里也可以使用自定义的对象

throw {
        "id":1, msg:"参数未传递"};

}

try{

test();

}catch(e){

console.log(e);

}

## **异常的传递机制** ##

function f1 () {

f2(); // f1 称为调用者, 或主调函数, f2 称为被调用者, 或被调函数

}

function f2 () {

f3();

}

function f3() {

throw new Error( 'error' );

}

f1();

当在被调函数内发生异常的时候，异常会一级一级往上抛出。

## **异常捕获语句的完整模式** ##

异常捕获语句的完整模式为`try-catch-finally`

try {

//可能出现错误的代码

} catch ( e ) {

//如果出现错误就执行

} finally {

//结束 try 这个代码块之前执行, 即最后执行

}

`finally`中的代码，不管有没有发生异常，都会执行。一般用在后端语言中，用来释放资源，JavaScript中很少会用到

## **面向对象** ##

## **面向对象的基本概念** ##

### **1.什么是面向对象编程？** ###

### **2.面向过程和面向对象的对比** ###

***Example 1******：洗衣服***

面向过程的思维方式：

step 1:收拾脏衣服

step 2:打开洗衣机盖

step 3:将脏衣服放进去

step 4:设定洗衣程序

step 5:开始洗衣服

step 6:打开洗衣机盖子

step 7:晒衣服

面向对象的思维方式：

洗衣机需要什么对象？

女朋友

洗衣机

在面向对象的思维方式中：我们只关心要完成事情需要的对象。

**总结：面向对象是一种解决问题的思路，一种****编程思想****。**

**对象是什么呢？**

万物皆对象

**JavaScript中的对象是什么？**

**在****JavaScript****中，所谓的对象，就是键值对的集合。**

**编写代码的时候的原则****:DRY**

Don’t repeat yourself

**属性和方法是什么？**

比如要描述一个人，这个人有`name`,`age`,`gender`,体现在代码中：

{ name:"张三", age:18, gender:"Male" }

比如要做一个学生管理系统，那学生就是要设计的对象，学生拥有`name`,`age`,`gender`,`address`,`phone`,体现在代码中：

{ name:"刘亦菲", age:18, gender:"female", address:"上海", phone:"110" }

### **3.总结** ###

*  面向过程关注的实现功能的步骤，是如何把功能拆解后一步步的实现
 *  面向对象则是关注的实现功能的一系列的对象

## **面向对象编程举例** ##

设置页面中的`div`和`p`的边框为`1px solid red`

## **传统的处理办法** ##

// 任务需求:

// 1> 获取div标签

var divs = document.getElementsByTagName( 'div' );

// 2> 遍历获取到的div标签

for(var i = 0; i < divs.length; i++) {

//3> 获取到每一个div元素,设置div的样式

divs[i].style.border = "1px dotted black";

}

// 4> 获取p标签

var ps = document.getElementsByTagName("p");

// 5> 遍历获取到的p标签

for(var j = 0; j < ps.length; j++) {

// 获取到每一个div元素 设置p标签的样式

ps[j].style.border = "1px dotted black";

}

## **使用函数进行封装优化** ##

// 通过标签名字来获取页面中的元素

function tag(tagName) {

// var dvs = document.getElementsByTagName(tagName);

// return dvs;

return document.getElementsByTagName(tagName);

}

// 封装一个设置样式的函数

function setStyle(arr) {

for(var i = 0; i < arr.length; i++) {

// 获取到每一个div元素

arr[i].style.border = "1px solid #abc";

}

var dvs = tag("div");

var ps = tag("p");

setStyle(dvs);

setStyle(ps);

## **使用面向对象的方式** ##

// 更好的做法：是将功能相近的代码放到一起

var tools = {

getEle: {

tag: function (tagName) {

return document.getElementsByTagName(tagName);

id: function (idName) {

return document.getElementById(idName);

}

setCss: {

setStyle: function (arr) {

for(var i = 0; i < arr.length; i++) {

arr[i].style.border = "1px solid #abc";

}

css: function() {},

addClass: function() {},

removeClass: function() {}

// ...

}

// 属性操作模块

// 动画模块

// 事件模块

// ...

};

var divs = tools.getEle.tag();

tools.setCss.setStyle(divs);

## **构造函数的作用** ##

function Person(name, age){

this.name = name;

this.age = age;

}

//断点调试，进行类型查看

var p1 = new Person();

var p2 = new Object();

var p3 = new Date();

var p4 = new RegExp();

var p5 = {};

## **1.构造函数是干什么用的？** ##

在JavaScript中，构造函数是给对象添加属性，初始化属性用的。

## **2. 对象的创建过程** ##

var p = new Person();

以上面这个p对象创建为例：

1.  首先使用new关键字创建对象，类似于使用`{}`,这个时候创建出来的对象是一个"没有任何成员"的对象。这里需要注意两点：
    
     *  使用`new`关键字创建的对象，对象的类型就是创建这个对象使用的构造函数的函数名
     *  使用`{}`创建对象，对象的类型一定是`Object`，相当于使用了`new Object()`
2.  使用构造函数为其初始化成员
    
     *  在构造函数调用开始的时候，有一个赋值操作，也就是让`this =``刚创建出来的对象`
     *  在构造函数中，`this`就代表刚创建出来的对象
3.  在构造函数中，利用对象的动态特性，为对象添加成员

## **面向对象的特性** ##

JavaScript面向对象的特性

### **1. 封装性** ###

对象是将数据与功能组合到一起, 即封装

1.  js 对象就是 键值对的集合
    
     *  键值如果是数据( 基本数据, 复合数据, 空数据 ), 就称为属性
     *  如果键值是函数, 那么就称为方法
2.  对象就是将属性与方法封装起来
3.  方法是将过程封装起来

### **2. 继承性** ###

所谓继承就是自己没有, 别人有,拿过来为自己所用, 并成为自己的东西

### **2.1. 传统继承基于模板** ###

子类可以使用从父类继承的属性和方法。

class Person {

string name;

int age;

}

class Student : Person {

}

var stu = new Student();

stu.name

即：让某个类型的对象获得另一个类型的对象的属性的方法

### **2.2. js 继承基于对象** ###

在JavaScript中，继承就是当前对象可以使用其他对象的方法和属性。

js继承实现举例：混入（mix）

function mix ( o1, o2 ) {

for ( var k in o2 ) {

o1[ k ] = o2[ k ];

}

## **3. 多态性（基于强类型）只做了解** ##

把不同的子类对象都当作父类来看，可以屏蔽不同子类对象之间的差异，写出通用的代码，做出通用的编程，以适应需求的不断变化。

动物 animal = new 子类(); // 子类：麻雀、狗、猫、猪、狐狸...

动物 animal = new 狗();

animal.叫();

## **原型** ##

## **传统构造函数存在的问题** ##

### **1. 发现问题** ###

现有构造函数如下：

function Person(name, age){

this.name = name;

this.age = age;

this.sayHi = function(){

console.log("你好");

}

调用该构造函数创建对象，并对比创建出来的对象的`sayHi`方法：

var p = new Person("张三", 18);

var p1 = new Person("李四", 19);

console.log(p.sayHi == p1.sayHi); //输出结果为false

由于每个对象都是由`new Person`创建出来的，因此每创建一个对象，函数sayHi都会被重新创建一次，这个时候，每个对象都拥有一个独立的，但是功能完全相同的方法。

**功能相同的函数，完全没有必要再内存中存在这么多份。所以就造成了资源浪费。**

### **2. 解决问题** ###

这里最好的办法就是将函数体放在构造函数之外. 在构造函数中只需要引用该函数即可。

function sayHello(){

console.log("你好");

}

function Person(name, age){

this.name = name;

this.age = age;

this.sayHi = sayHello;

}

//调用该构造函数创建对象，并对比创建出来的对象的sayHi方法

var p = new Person("张三", 18);

var p1 = new Person("李四", 19);

console.log(p.sayHi == p1.sayHi); //输出结果为true

**这样写依然存在问题：**

*  全局变量增多，会增加引入框架命名冲突的风险
 *  代码结构混乱，会变得难以维护

## **使用原型解决构造函数问题** ##

### **1. 关键点** ###

*  每一个函数在定义的时候，都会有跟它关联的一个对象被创建出来
 *  每一个由构造函数创建出来的对象，都会默认的和构造函数的神秘对象关联
 *  当使用一个方法进行属性或者方法访问的时候，会先在当前对象内查找该属性和方法
 *  如果当前对象内未找到，就回去跟它关联的神秘对象内进行查找

function Person(name, age){

this.name = name;

this.age = age;

this.sayHi = function(){

console.log("Hello!");

};

}

var p = new Person("张三", 18);

p.sayHi(); //当前对象内有这个方法，所以不会去神秘对象内进行查找

var p1 = new Person("李四", 19);

p1.sayHello(); //当前对象没没有找到这个方法，所以去神秘对象内进行查找

问题来了，如何访问到这个神秘对象呢？

//可以通过 构造函数.prototype 访问这个神秘对象

console.log(Person.prototype);

当尝试给这个对象新增一个方法之后:

Person.prototype.sayHello = function(){

console.log("我是神秘对象中的方法");

};

使用`p`,`p1`都可以访问这个方法：

p.sayHello();

p1.sayHello();

**总结：**

所有对象共享神秘对象(构造函数.prototype)内的属性和方法。

### **2. 解决方案** ###

既然所有对象共享神秘对象(构造函数.prototype)内的属性和方法。我们只需要将需要共享的东西，也就是重复占用内存的东西，全部都放到 神秘对象(构造函数.prototype)中，那么所有对象就都可以使用，并且内存里面也只有一份了。

***改造构造函数***

function Person(name, age){

this.name = name;

this.age = age;

}

Person.prototype.sayHi = function(){

console.log("你好");

};

//测试

var p = new Person("张三", 18);

var p1 = new Person("李四", 19);

console.log(p.sayHi == p1.sayHi); //输出true

### **3.常见的错误** ###

**3.1. 将属性写在神秘对象（构造函数.prototype）内**

function Car(name){

this.name = name;

}

function Person() {}

Person.prototype.name = '张三'; //基本类型的属性影响不大

Person.prototype.car = new Car("法拉利"); //引用类型的属性，会被所有的对象共享

var p = new Person();

**3.2. 赋值的错误**

function Person() {}

Person.prototype.name = '张三';

var p1 = new Person();

var p2 = new Person();

p1.name = '李四';

console.log( p1.name );

console.log( p2.name );

// 如果是访问数据, 当前对象中如果没有该数据就到构造函数的原型属性中去找

// 如果是写数据, 当对象中有该数据的时候, 就是修改值; 如果对象没有该数据, 那么就添加值

## **原型相关的概念** ##

### **1. 神秘对象称与构造函数** ###

*  神秘对象就是构造函数的 "原型属性"
 *  简称原型 (构造函数的原型)

### **2. 神秘对象与构造函数所创建出来的对象** ###

*  神秘对象针对构造函数创建出来的对象称为 "原型对象"
 *  简称原型 (对象的原型）

### **原型继承** ###

*   *  原型中的成员, 可以直接被实例对象所使用
     *  实例对象直接 "含有" 原型中的成员
     *  因此实例对象 继承自 原型
     *  这样的继承就是 "原型继承"

## **原型的使用** ##

### **1. 使用对象的动态特性** ###

function Person () { }

Person.prototype.func = function () {

console.log( 'something' );

};

var p = new Person();

p.func();

### **2. 直接替换原型对象** ###

function Person () { };

Person.prototype = {

func: function () {

console.log( '22222' );

}

};

var p = new Person();

p.func();

### **3. 直接替换原型会出现的问题** ###

function Person () { }

Person.prototype.func = function () {

console.log( 'something' );

};

var p = new Person();

Person.prototype.func = function () {

console.log( 'something' );

};

var p1 = new Person();

p.func();

p1.func();

***替换原型之后，在替换前创建出来的对象和替换后创建出来的对象的原型对象不一致***

## **对象的`__proto__`属性** ##

### **1、标识符命名规则** ###

*  区分大小写,`Name`和`name`是两个不同的变量
 *  标识符可以以下划线`_`,美元符`$`或者字母开头，但是不能是数字
 *  标识符可以由下划线`_`，美元符`$`，字母，数字组成

### **2.神秘对象的访问** ###

### **构造函数的`prototype`属性** ###

之前我们访问神秘对象的时候，使用的是`原型属性``prototype`

function Person(){}

//通过构造函数的原型属性prototype可以直接访问原型

Person.prototype;

在之前是无法通过构造函数创建出来的对象访问原型的

function Person(){}

var p = new Person();

//以前不能直接通过p来访问神秘对象

### **实例对象的`__proto__`属性** ###

`__proto__`属性最早是火狐浏览器引入的，用以通过实例对象来访问原型，这个属性在早期是非标准的属性

有了`__proto__`属性，就可以通过构造函数创建出来的对象直接访问神秘对象

function Person(){}

var p = new Person();

//实例对象的__proto__属性可以方便的访问到原型对象

p.__proto__;

//既然使用构造函数的`prototype`和实例对象的`__proto__`属性

//都可以访问原型对象

//就有如下结论

p.__proto__ === Person.prototype;

### **3.`__proto__`属性的用途** ###

*  可以用来访问原型
 *  在实际开发中除非有特殊的需求，不要轻易的使用实例对象的`__proto__`属性去修改原型的成员，
 *  在调试过程中，可以轻易的查看原型的成员

tips:

早期如何通过实例对象访问原型？

可以使用实例对象访问构造函数属性`constuctor`

var p = new Person();

p.constructor.prototype;

4.给实例继承自原型的属性赋值需要注意的问题

function Person(){};

Person.prototype.name = "周华健";

var o1 = new Person();

var o2 = new Person();

o1.name = "李宗盛"; //这里修改的不是原型对象的name属性，而是给o1自己新增了一个name属性，进行了赋值

//我们可以对比一下o1和o2的name值

console.log(o1.name , o2.name);

## **继承的实现方式** ##

通过继承来让`dog`对象可以使用`animal`对象的属性和方法，那怎么实现继承呢？

### **1. 最简单的继承实现** ###

**直接遍历父对象的属性，将所有的属性加到当前对象上**

var animal = {

name:"Animal",

sex:"male",

age:5,

bark:function(){

console.log("Animal bark");

}

};

var dog = {};

for (var k in animal){

dog[k]= animal[k];

}

### **2. 原型继承** ###

每一个构造函数都有`prototype`原型属性，通过构造函数创建出来的对象都继承自该原型属性。所以可以通过更改构造函数的原型属性来实现继承。

function Dog(){

this.type = "yellow Dog";

}

function extend(obj1, obj2){

for (var k in obj2){

obj1[k] = obj2[k];

}

};

//使用混入的方式，将属性和方法添加到构造函数的原型属性上，构造函数所创建出来的实例就都有了这些属性和方法。

extend(Dog.prototype, {

name:"",

age:"",

sex:"",

bark:function(){}

})

//使用面向对象的思想把extend方法重新封装

//extend是扩展的意思，谁要扩展就主动调用extend这个方法

//所以extend应该是对象的方法，那现在我们要扩展的是构造函数的原型对象

//所以给构造函数的原型对象添加一个extend方法

//如下：

Dog.prototype.extend = function(obj){

for (var k in obj){

this[k]=obj[k];

}

//调用方式就变成了下面这种形式

Dog.prototype.extend({

name:"",

age:"",

sex:"",

bark:function(){}

});

## **属性搜索原则** ##

访问一个对象的成员的时候，首先是在实例中找，没有找到, 就去原型中找, 但是原型中没有怎么办?

### **原型链** ###

每一个对象都有原型属性，那么对象的原型属性也会有原型属性，所以这样就形成了一个链式结构，我们称之为原型链。

## **属性搜索原则** ##

所谓的属性搜索原则，也就是属性的查找顺序，在访问对象的成员的时候，会遵循如下的原则:

1.  首先在当前对象中查找，如果找到，停止查找，直接使用，如果没有找到，继续下一步
2.  在该对象的原型中查找，如果找到，停止查找，直接使用，如果没有找到，继续下一步
3.  在该对象的原型的原型中查找，如果找到，停止查找，直接使用，如果没有找到，继续下一步。
4.  继续往上查找，直到查找到`Object.prototype`还没有, 那么是属性就返回 `undefied`，是方法，就报错`xxx is not a function`。

## **原型链结构** ##

凡是对象就有原型, 原型又是对象, 因此凡是给定义一个对象, 那么就可以找到他的原型, 原型还有原型. 那么如此下去, 就构成一个对象的序列. 称该结构为原型链.

使用构造函数创建出对象, 并且没有利用赋值的方式修改原型, 就说该对象保留默认的原型链.

默认原型链结构是什么样子呢?

function Person() {

}

var p = new Person();

// p 具有默认的原型链

默认的原型链结构就是:

当前对象 \-> 构造函数.prototype -> Object.prototype -> null

在实现继承的时候, 有时会利用替换原型链结构的方式实现原型继承, 那么原型链结构就会发生改变

function ToolsCollection () {

}

ToolsCollection.prototype = [];

var arr = new ToolsCollection();

// arr -> [] -> Array.prototype -> Object.prototype -> null

// var arr = new Array();

## **原型式继承** ##

观察：DOM对象的原型链

原型式继承就是利用修改原型链的结构( 增加一个节点, 删除一个节点, 修改节点中的成员 ), 来使得实例对象可以使用整条链中的所有成员.

## **绘制原型链结构** ##

**注意**：函数也有`__proto__`属性，暂时不考虑这个！

观察如下代码，绘制相应的原型链结构图:

function Person(){};

var p = new Person();

**注意**：

在 js 中, 所有的对象字面量在解析以后, 就是一个具体的对象了. 那么可以理解为 调用的 对应的构造方法.

*  例如在代码中写上 `{}`, 就相当于`new Object()`
 *  例如代码中有 `[]`, 就相当于`new Array()`
 *  例如代码中有 `/./`, 就相当于`new RegExp( '.' )`

注意: 在底层理论执行的过程中, 是否有调用构造函数, 不一定. 和浏览器的版本有关.

## **对象相关的其他知识** ##

### **Object.prototype成员介绍** ###

### **`Object.prototype`常用成员** ###

<table style="width:0px;"> 
 <thead> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:205.9pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">成员</span></strong></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:109.1pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">描述</span></strong></p> </td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:205.9pt;"> <p style="margin-left:0cm;"><code><span style="color:#333333;">Object.prototype.__proto__</span></code></p> </td> 
   <td style="background-color:#ffffff;width:109.1pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">指向当对象被实例化的时候，用作原型的对象。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:205.9pt;"> <p style="margin-left:0cm;"><code><span style="color:#333333;">Object.prototype.hasOwnProperty()</span></code></p> </td> 
   <td style="background-color:#f8f8f8;width:109.1pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">返回一个布尔值</span> <span style="color:#333333;">，表示某个对象是否含有指定的属性，而且此属性非原型链继承的。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:205.9pt;"> <p style="margin-left:0cm;"><code><span style="color:#333333;">Object.prototype.isPrototypeOf()</span></code></p> </td> 
   <td style="background-color:#ffffff;width:109.1pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">返回一个布尔值，表示指定的对象是否在本对象的原型链中。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:205.9pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
   <td style="background-color:#f8f8f8;width:109.1pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:205.9pt;"> <p style="margin-left:0cm;"><code><span style="color:#333333;">Object.prototype.toString()</span></code></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:109.1pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">返回对象的字符串表示。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:205.9pt;"> <p style="margin-left:0cm;"><code><span style="color:#333333;">Object.prototype.valueOf()</span></code></p> </td> 
   <td style="background-color:#f8f8f8;width:109.1pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">返回指定对象的原始值。</span></p> </td> 
  </tr> 
 </tbody> 
</table>

## **函数的构造函数Function** ##

在 js 中 使用`Function`可以实例化函数对象。也就是说在 js 中函数与普通对象一样, 也是一个对象类型. 函数是 js 中的一等公民.

1.  函数是对象, 就可以使用对象的动态特性
2.  函数是对象, 就有构造函数创建函数
3.  函数是函数, 可以创建其他对象
4.  函数是唯一可以限定变量作用域的结构

要解决的问题

1.  Function 如何使用
2.  Function 与函数的关系
3.  函数的原型链结构

## **Function 的使用** ##

### **语法:** ###

//Function函数所有的参数全都是字符串

//Function函数的作用就是将所有的参数组合起来，变成一个函数

//1、如果只传一个参数，那么这个函数必然是函数体

//2、如果传多个参数，那么最后一个参数表示函数体，前面的参数代表将要创建的函数的参数

//3、如果不传参数，表示创建一个空函数

new Function(arg1, arg2, arg3, ..., argN, body);

### **创建一个打印一句话的函数** ###

//传统的方式

function foo(){

console.log("你好");

}

//使用Function

var func = new Function("console.log('你好');");

这里两种方式创建出来的函数功能是一样的。

### **创建一个空函数** ###

//传统的方式

function foo(){}

//Function

var func = new Function();

### **创建一个有参数的函数** ###

//传统的方式

function foo(num){

console.log(num);

}

//Function

var func = new Function(){
        "num", "console.log(num);"};

## **解决代码太长的问题** ##

利用`+`连接字符串

var func = new Function( 'a', 'b', 'c',

'var res = a > b ? a : b;' +

'res = res > c ? res : c;' +

'return res;' );

利用字符串特性

function foo ( a, b, c ) {

var res = a > b ? a : b;

res = res > c ? res : c;

return res;

}

var func = new Function( 'a', 'b', 'c', 'return foo( a, b, c );');

1.  ES6 语法（很少有浏览器实现） 使用键盘左上角的`` ` ``表示可换行字符串的界定符，之前我们用的是单引号或者双引号来表示一个字符串字面量，在ES6中可以用反引号来表示该字符串可换行。
2.  (最终)利用 DOM 的特性完成该方法

var res = a > b ? a : b;

res = res > c ? res : c;

return res;

</div>

var txt = document.getElementbyId("code).innerHtml + ' ';

var func = new Function('a', 'b', 'c', txt);

</script>

## **静态成员与实例成员的概念** ##

静态成员和实例成员这两个概念其实也是从面相对象的编程语言中引入的，对应到JavaScript中的理解为：

### **静态成员** ###

静态成员是指***静态属性***和***静态方法***，所谓静态，就是由构造函数提供的。

### **实例成员** ###

实例成员是值***实例属性***和***实例方法***，所谓实例，就是由构造函数创建出来的对象。

### **举例说明：** ###

function Person(){

this.name = "zs",

this.sayHello = function(){

console.log("Hello World");

}

//下面这个sayHi方法就是构造函数自己的方法，也就是静态方法

Person.sayHi = function(){

console.log("I'm a Person");

}

//原型属性属于构造函数，所以原型属性是静态属性

Person.prototype = {};

var p = new Person();

//这里的name是构造函数创建出来的实例对象的属性，所以是实例属性

p.name = "李四";

//这里的sayHello也是构造函数创建出来的实例对象的方法，所以是实例方法

p.sayHello();

### **提示：** ###

一般工具型方法都有静态成员提供, 一般与实例对象有关的方法由实例成员表示.

工具方法：比如`jQuery.Ajax()`、`jQuery.trim()`、`jQuery.Each()`

## **arguments对象** ##

在每一个函数调用的过程中, 函数代码体内有一个默认的对象`arguments`, 它存储着实际传入的所有参数。

`arguments`是一个伪数组对象. 它表示在函数调用的过程中传入的所有参数的集合。在函数调用过程中不规定参数的个数与类型, 可以使得函数调用变得非常灵活性。

JavaScript中的函数并没有规定必须如何传参：

1.  定义函数的时候不写参数, 一样可以调用时传递参数
2.  定义的时候写了参数, 调用的时候可以不传参
3.  定义的时候写了一个参数, 调用的时候可以随意的传递多个而参数

在代码设计中, 如果需要函数带有任意个参数的时候, 一般就不带任何参数, 所有的参数利用`arguments`对象来获取.

## **作用域** ##

**域**，表示的是一个范围，**作用域**，就是作用范围。

作用域说明的是一个变量可以在什么地方被使用，什么地方不能被使用。

### **块级作用域** ###

JavaScript中没有块级作用域

{

var num = 123;

{

console.log( num );

}

console.log( num );

上面这段代码在JavaScript中是不会报错的，但是在其他的编程语言中（C\#、C、JAVA）会报错。

这是因为，在JavaScript中没有块级作用域，使用`{}`标记出来的代码块中声明的变量`num`，是可以被`{}`外面访问到的。

但是在其他的编程语言中，有块级作用域，那么`{}`中声明的变量`num`，是不能在代码块外部访问的，所以报错。

### **词法作用域** ###

**什么是词法作用域？**

词法( 代码 )作用域, 就是代码在编写过程中体现出来的作用范围. 代码一旦写好, 不用执行, 作用范围就已经确定好了. 这个就是所谓词法作用域.

**在** **js** **中词法作用域规则****:**

*  函数允许访问函数外的数据.
 *  整个代码结构中只有函数可以限定作用域.
 *  作用域规则首先使用提升规则分析
 *  如果当前作用规则中有名字了, 就不考虑外面的名字

**练习：**

var num = 123;

function foo() {

console.log( num );

}foo();

if ( false ) {

var num = 123;

}

console.log( num ); // undefiend

var num = 123;

function foo() {

var num = 456;

function func() {

console.log( num );

}

func();

}

foo();

var num1 = 123;

function foo1() {

var num1 = 456;

function foo2() {

num1 = 789;

function foo3 () {

console.log( num1 );

}

foo3();

}

foo2();

}

foo1();

console.log( num1 );

**面试题**

var num = 123;

function func1(){

console.log(num);

}

function func2(){

var num = 456;

func1();

}

JavaScript是解释型的语言，但是他并不是真的在运行的时候逐句的往下解析执行。

我们来看下面这个例子：

func();

function func(){

alert("Funciton has been called");

}

在上面这段代码中，函数func的调用是在其声明之前，如果说JavaScript代码真的是逐句的解析执行，那么在第一句调用的时候就会出错，然而事实并非如此，上面的代码可以正常执行，并且alert出来`Function has been called`。

**所以，可以得出结论，****JavaScript****并非仅在运行时简简单单的逐句解析执行！**

## **JavaScript 预解析** ##

JavaScript引擎在对JavaScript代码进行解释执行之前，会对JavaScript代码进行预解析，在预解析阶段，会将以关键字`var`和`function`开头的语句块提前进行处理。

*关键问题是怎么处理呢？*

当变量和函数的声明处在作用域比较靠后的位置的时候，变量和函数的声明会被提升到作用域的开头。

重新来看上面的那段代码

func();

function func(){

alert("Funciton has been called");

}

由于JavaScript的预解析机制，上面的代码就等效于：

function func(){

alert("Funciton has been called");

}

func();

看完函数声明的提升，再来看一个变量声明提升的例子：

alert(a);

var a = 1;

由于JavaScript的预解析机制，上面这段代码，alert出来的值是`undefined`，如果没有预解析，代码应该会直接报错`a is not defined`，而不是输出值。

Wait a minute, 不是说要提前的吗？那不是应该alert出来1，为什么是`undefined`?

那么在这里有必要说一下`声明`、`定义`、`初始化`的区别。其实这几个概念是C系语言的人应该都比较了解的。

<table style="margin-left:9.75pt;width:0px;"> 
 <thead> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:39.5pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">行为</span></strong></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:470.8pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">说明</span></strong></p> </td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:39.5pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">声明</span></p> </td> 
   <td style="background-color:#ffffff;width:470.8pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">告诉编译器</span><span style="color:#333333;">/</span><span style="color:#333333;">解析器有这个变量存在</span><span style="color:#333333;">,</span><span style="color:#333333;">这个行为是不分配内存空间的</span><span style="color:#333333;">,</span><span style="color:#333333;">在</span><span style="color:#333333;">JavaScript</span><span style="color:#333333;">中，声明一个变量的操作为：</span><code><span style="color:#333333;">var a;</span></code></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:39.5pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">定义</span></p> </td> 
   <td style="background-color:#f8f8f8;width:470.8pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">为变量分配内存空间，在</span><span style="color:#333333;">C</span><span style="color:#333333;">语言中，一般声明就包含了定义，比如：</span><code><span style="color:#333333;">int a;</span></code><span style="color:#333333;">,</span><span style="color:#333333;">但是在</span><span style="color:#333333;">JavaScript</span><span style="color:#333333;">中，</span><code><span style="color:#333333;">var a;</span></code><span style="color:#333333;">这种形式就只是声明了。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:39.5pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">初始化</span></p> </td> 
   <td style="background-color:#ffffff;width:470.8pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">在定义变量之后，系统为变量分配的空间内存储的值是不确定的，所以需要对这个空间进行初始化，以确保程序的安全性和确定性</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:39.5pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">赋值</span></p> </td> 
   <td style="background-color:#f8f8f8;width:470.8pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">赋值就是变量在分配空间之后的某个时间里，对变量的值进行的刷新操作（修改存储空间内的数据</span><span style="color:#333333;">)</span></p> </td> 
  </tr> 
 </tbody> 
</table>

所以我们说的提升，是**声明**的提升。

那么再回过头看，上面的代码就等效于：

var a; //这里是声明

alert(a);//变量声明之后并未有初始化和赋值操作，所以这里是 undefined

a = 1;

## **复杂点的情况分析** ##

通过上一小节的内容，我们对变量、函数声明提升已经有了一个最基本的理解。那么接下来，我们就来分析一些略复杂的情况。

### **函数同名** ###

观察下面这段代码:

func1();

function func1(){

console.log('This is func1');

}

func1();

function func1(){

console.log('This is last func1');

}

输出结果为：

This is last func1

原因分析：由于预解析机制，`func1`的声明会被提升，提升之后的代码为：

function func1(){

console.log('This is func1');

}

function func1(){

console.log('This is last func1');

}

func1();

同名的函数，后面的会覆盖前面的，所以两次输出结果都是`This is last func1`。

### **变量和函数同名** ###

alert(foo);

function foo(){}

var foo = 2;

当出现变量声明和函数同名的时候，只会对函数声明进行提升，变量会被忽略。所以上面的代码的输出结果为

function foo(){}

我们还是来吧预解析之后的代码展现出来:

function foo(){};

alert(foo);

foo = 2;

再来看一种

var num = 1;

function num () {

alert( num );

}

num();

代码执行结果为：

Uncaught TypeError: num is not a function

直接上预解析后的代码：

function num(){

alert(num);

}

num = 1;

num();

## **预解析是分作用域的** ##

声明提升并不是将所有的声明都提升到window对象下面，提升原则是提升到变量运行的环境(作用域)中去。

function showMsg()

{

var msg = 'This is message';

}

alert(msg); // msg未定义

还是直接把预解析之后的代码写出来：

function showMsg()

{

var msg;

msg = 'This is message';

}

alert(msg); // msg未定义

## **预解析是分段的** ##

分段，其实就分script标签的

func(); // 输出 AA2;

function func(){

console.log('AA1');

}

function func(){

console.log('AA2');

}

</script>

function func(){

console.log('AA3');

}

</script>

第一个script标签中的两个`func`进行了提升，第二个`func`覆盖了第一个`func`，但是第二个script标签中的`func`并没有覆盖上面的第二个`func`。所以说预解析是分段的。

tip:但是要注意，分段只是单纯的针对函数，变量并不会分段预解析。\*\*\*\*\*

## **函数表达式并不会被提升** ##

func();

var func = function(){

alert("我被提升了");

};

这里会直接报错，`func is not a function`，原因就是函数表达式，并不会被提升。只是简单地当做变量声明进行了处理，如下：

var func;

func();

func = function(){

alert("我被提升了");

}

## **条件式函数声明** ##

console.log(typeof func);

if(true){

function(){

return 1;

}

console.log(typeof func);

上面这段代码，就是所谓的条件式函数声明，这段代码在Gecko引擎中打印`"undefined"`、

Gecko加入了ECMAScript以外的一个feature：条件式函数声明。

Conditionally created functions Functions can be conditionally declared, that is, a function declaration can be nested within an if statement.

Note: Although this kind of function looks like a function declaration, it is actually an expression (or statement), since it is nested within another statement. See differences between function declarations and function expressions.

Note中的文字说明，条件式函数声明的处理和函数表达式的处理方式一样，所以条件式函数声明没有声明提升的特性。

## **作用域链** ##

### **什么是作用域链** ###

只有函数可以制造作用域结构， 那么只要是代码，就至少有一个作用域, 即全局作用域。

凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。

将这样的所有的作用域列出来，可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

**例如：**

//f1--->全局

function f1(){

//f2--->f1--->全局

function f2(){

//f3---->f2--->f1--->全局

function f3(){

}

//f4--->f2--->f1---->全局

function f4(){

}

//f5--->f1---->全局

function f5(){

}

### **绘制作用域链的步骤:** ###

1.  看整个全局是一条链, 即顶级链, 记为 0 级链
2.  看全局作用域中, 有什么成员声明, 就以方格的形式绘制到 0 级练上
3.  再找函数, 只有函数可以限制作用域, 因此从函数中引入新链, 标记为 1 级链
4.  然后在每一个 1 级链中再次往复刚才的行为

### **变量的访问规则** ###

*  首先看变量在第几条链上, 在该链上看是否有变量的定义与赋值, 如果有直接使用
 *  如果没有到上一级链上找( n - 1 级链 ), 如果有直接用, 停止继续查找.
 *  如果还没有再次往上刚找... 直到全局链( 0 级 ), 还没有就是 is not defined
 *  注意,同级的链不可混合查找

### **如何分析代码** ###

1.  在分析代码的时候切记从代码的运行进度上来分析, 如果代码给变量赋值了, 一定要标记到图中
2.  如果代码比较复杂, 可以在图中描述代码的内容, 有事甚至需要将原型图与作用域图合并分析

### **补充** ###

声明变量使用\`var\`, 如果不使用\`var\`声明的变量就是全局变量( 禁用 )

因为在任何代码结构中都可以使用该语法. 那么再代码维护的时候会有问题. 所以除非特殊原因不要这么用.

下面的代码的错误

function foo () {

var i1 = 1 // 局部

i2 = 2, // 全局

i3 = 3; // 全局

}

## **闭包** ##

### **闭包的概念** ###

闭包从字面意思理解就是闭合, 包起来.

简单的来说闭包就是,***一个具有封闭的对外不公开的******,*** ***包裹结构******,*** ***或空间******.***

在JavaScript中函数可以构成闭包. 一般函数是一个代码结构的封闭结构, 即包裹的特性, 同时根据作用域规则, 只允许函数访问外部的数据, 外部无法访问函数内部的数据, 即封闭的对外不公开的特性. 因此说函数可以构成闭包.

### **闭包要解决什么问题？** ###

1.  闭包内的数据不允许外界访问
2.  要解决的问题就是间接访问该数据

**函数就可以构成闭包****,** **要解决的问题就是访问到函数内部的数据**

我们观察下面的函数`foo`，在`foo`内部有一个变量`num`，能否在函数外部访问到这个变量`num`呢？

function foo () {

var num = 123;

return num;

}

var res = foo();

console.log( res ); // => 123

分析：

在上面的代码中，确实可以访问到`num`这个函数内部的变量。但是能不能多次访问呢？

不能，因为每次访问都得重新调用一次`foo`函数，每次调用都会重新创建一个`num = 123`，然后返回。

**解决思路**

函数内的数据不能直接在函数外被访问，是因为作用域的关系，上级作用域不能直接访问下级作用域中的数据。

但是如果反过来，下级作用域可以直接访问上级作用域中的数据。那么如果在函数`foo`内定义一个函数，那么在这个内部函数中是可以直接访问`foo`中的`num`的。

function foo() {

var num = Math.random();

function func() {

return num;

}

return func;

}

var f = foo();

// f可以直接访问num，而且多次访问，访问的也是同一个，并不会返回新的num

var res1 = f();

var res2 = f();

### **如何获得超过一个数据** ###

函数的返回值只能有一个，那按照上面的方法，我们只能对函数内部的一个数据进行操作。怎么操作函数内的多个数据呢？

可以使用对象，代码如下：

function foo () {

var num1 = Math.random();

var num2 = Math.random();

//可以将多个函数包含在一个对象内进行返回，这样就能在函数外部操作当前函数内的多个变量

return {

num1: function () {

return num1;

num2: function () {

return num2;

}

### **如何完成读取一个数据和修改这个数据** ###

使用内部的函数进行操作。

function foo() {

var num = Math.random();

//分别定义get和set函数，使用对象进行返回

return {

//get_num负责获取数据

get_num: function() {

return num;

//set_num负责设置数据

set_num: function(value) {

num = value;

}

### **闭包的基本结构** ###

**一般闭包要解决的的问题就是要想办法间接的获得函数内数据的使用权****.** **那么我们的可以总结出一个基本的使用模型****.**

1.  写一个函数, 函数内定义一个新函数, 返回新函数, 用新函数获得函数内的数据
2.  写一个函数, 函数内定义一个对象, 对象中绑定多个函数, 返回对象, 利用对象的方法访问函数内的数据

## **函数模式** ##

**特征****:**就是一个简单的函数调用，函数名前面没有任何的引导内容

function foo(){}

var func = function(){}

foo();

func();

(function(){})();

`this`在函数模式中的含义： `this`***在函数中表示全局对象，在浏览器中是******window******对象***

## **方法模式** ##

**特征****:** 方法一定是依附于一个对象, 将函数赋值给对象的一个属性, 那么就成为了方法.

function f() {

this.method = function () {};

}

var o = {

method: function () {}

}

`this`在方法模式调用中的含义:***表示函数所依附的这个对象***

## **构造器调用模式** ##

由于构造函数只是给 this 添加成员. 没有做其他事情. 而方法也可以完成这个操作, 就 this 而言, 构造函数与方法没有本质区别.

**特征****:**使用 new 关键字, 来引导构造函数.

function Person(){

this.name = "zhangsan";

this.age = 19;

this.sayHello = function(){

};

}

var p = new Person();

构造函数中`this`与方法中一样, 表示对象, 但是构造函数中的对象是刚刚创建出来的对象

### **关于构造函数中`return`关键字的补充说明** ###

*  构造函数中不需要`return`, 就会默认的`return this`
 *  如果手动的添加`return`, 就相当于 return this
 *  如果手动的添加`return` 基本类型; 无效, 还是保留原来 返回`this`
 *  如果手动添加`return null`; 或`return undefiend`, 无效
 *  如果手动添加`return``对象类型`; 那么原来创建的`this`就会被丢掉, 返回的是 `return`后面的对象

### **创建对象的模式** ###

**工厂方法**

// 工厂就是用来生产的, 因此如果函数创建对象并返回, 就称该函数为工厂函数

function createPerson( name, age, gender ) {

var o = {};

o.name = name;

o.age = age;

o.gender = gender;

return o;

}

// document.createElement()

**构造方法**

function Person(name, age, gender){

this.name = name;

this.age = age;

this.gender = gender;

}

var p = new Person("zhangsan", 19, "男");

**寄生式创建对象**

function Person(name, age, gender){

var o = {};

o.name = name;

o.age = age;

o.gender = gender;

return o;

}

var p = new Person("Jack", 18, "male");

**混合式创建**

混合式继承就是将所有的属性放在构造方法里面，然后将所有的方法放在原型里面，使用构造方法和原型配合起来创建对象。(模仿着前面的,自己试一试)

## **上下文调用模式** ##

上下文(Context)，就是函数调用所处的环境。

上下文调用，也就是自定义设置`this`的含义。

在其他三种调用模式中，函数在调用的时候，this的值都是指定好了的，我们没办法自己进行设置，如果尝试去给`this`赋值，会报错。

### **上下文调用的语法** ###

//第一种， apply

函数名.apply(对象, [参数]);

//第二种， call

函数名.call(对象, 参数);

//上面两种方式的功能一模一样，只是在传递参数的时候有差异。

***功能描述：***

1.  语法中的函数名表示的就是函数本身，使用函数调用模式的时候，`this`默认是全局对象
2.  语法中的函数名也可以是方法(如:`obj.method`)，在使用方法模式调用的时候，`this`默认是指当前对象
3.  在使用`apply`和`call`的时候，默认的`this`都会失效，`this`的值由`apply`和`call`的第一个参数决定

***补充说明***

1.  如果函数或方法中没有`this`的操作, 那么无论什么调用其实都一样.
2.  如果是函数调用`foo()`, 那么有点像`foo.apply( window )`.
3.  如果是方法调用`o.method()`, 那么有点像`o.method.apply( o )`.

### **参数问题** ###

`call`和`apply`在没有后面的参数的情况下(函数无参数, 方法无参数) 是完全一样的.

如下：

function foo() {

console.log( this );

}

foo.apply( obj );

foo.call( obj );

***第一个参数的使用规则******:***

1.  如果传入的是一个对象, 那么就相当于设置该函数中的 this 为参数
2.  如果不传入参数, 或传入 null. undefiend 等, 那么相当于 this 默认为 window

foo();

foo.apply();

foo.apply( null );

foo.call( undefined );

1.  如果传入的是基本类型, 那么 this 就是基本类型对应的包装类型的引用
    
     *  number -> Number
     *  boolean -> Boolean
     *  string -> String

***第二个参数的使用规则***

在使用上下文调用的时候, 原函数可能会带有参数, 那么这个参数在上下文调用中使用第二个( 第 n 个 )参数来表示

function foo( num ) {

console.log( num );

}

foo.apply( null, [ 123 ] );

// 等价于

foo( 123 );

### **上下文调用模式的应用** ###

上下文调用只是能修改`this`, 但是使用的最多的地方是函数借用.

**1. 将伪数组转换为数组**

传统的做法：

var a = {};

a[ 0 ] = 'a';

a[ 1 ] = 'b';

a.length = 2;

// 使用数组自带的方法 concat

// 如果参数中有数组会把参数数组展开

// 语法: arr.concat( 1, 2, 3, [ 4, [ 5 ] ] );

// 特点：不修改原数组

var arr = [];

var newArr = arr.concat( a );

由于`a`是伪数组, 只是长得像数组. 所以上面的代码不能成功，不能使用concat方法。

但是`apply`方法有一个特性, 可以将数组或伪数组作为参数。（IE8不支持伪数组操作）

foo.apply( obj, 伪数组 ); // IE8 不支持

利用`apply`方法，可以写出以下

//将伪数组 a 作为 apply 的第二个参数

var newArr = Array.prototype.concat.apply( [], a )

处理数组转换, 实际上就是将元素一个一个的取出来构成一个新数组, 凡是涉及到该操作的方法理论上都可以。

**push方法**

//用法:

arr.push( 1 ); //将这个元素加到数组中, 并返回所加元素的个数

arr.push( 1, 2, 3 ); //将这三个元素依次加到数组中, 返回所加个数

var a = { length: 0 }; // 伪数组

a[ a.length++ ] = 'abc'; // a[ 0 ] = 'abc'; a.length++;

a[ a.length++ ] = 'def';

// 使用一个空数组, 将元素一个个放到数组中即可

var arr = [];

arr.push( a ); // 此时不会将元素展开, 而是将这个伪数组作为一个元素加到数组中

// 再次利用 apply 可以展开伪数组的特征

arr.push.apply( arr, a );

// 利用 apply 可以展开伪数组的特性, 这里就相当于 arr.push( a[0], a[1] )

**2. 求数组中的最大值**

传统的做法

var max = arr[ 0 ];

for ( var i = 1; i < arr.length; i++ ) {

if ( arr[ i ] > max ) {

...

}

在 js 中的`Math`对象中提供了很多数学函数`Math.max( 1,2,3 )`

还是利用 apply 可以展开数组的特性

var arr = [ 123456,12345,1234,345345,234,5 ];

Math.max.apply( null, arr );

**3.借用构造函数继承**

function Person ( name, age, gender ) {

this.name = name;

this.age = age;

this.gender = gender;

}

// 需要提供一个 Student 的构造函数创建学生对象

// 学生也应该有 name, age, gender, 同时还需要有 course 课程

function Student ( name, age, gender, course ) {

Person.call( this, name, age, gender );

this.course = course;

}

## **资料** ##

## **资料一：** ##

1、解释型语言与编译型语言的区别翻译时间的不同。。  
  
编译型语言在程序执行之前，有一个单独的编译过程，将程序翻译成机器语言，以后执行这个程序的时候，就不用再进行翻译了。  
  
解释型语言，是在运行的时候将程序翻译成机器语言，所以运行速度相对于编译型语言要慢。  
  
C/C++ 等都是编译型语言，而Java，C\#等都是解释型语言。  
  
虽然Java程序在运行之前也有一个编译过程，但是并不是将程序编译成机器语言，而是将它编译成字JAVASCRIPT节码（可以理解为一个中间语言）。  
在运行的时候，由JVM将字节码再翻译成机器语言。  
注：脚本语言一般都有相应的脚本引擎来解释执行。 他们一般需要解释器才能运行。,ASP,PHP,PERL,Nuva都是脚本语言。C/C++编译、链接后，可形成独立执行的exe文件。  
  
2.脚本语言是一种解释性的语言,例如vbscript,javascript,installshield script,ActionScript等等,它不象c\\c++等可以编译成二进制代码,以可执行文件的形式存在.  
  
脚本语言不需要编译，可以直接用，由解释器来负责解释。  
  
3.脚本语言一般都是以文本形式存在,类似于一种命令.

## **资料二：** ##

（1）什么是脚本语言？  
（2）为什么叫做脚本语言，而不叫做其它的名字？请您介绍一下“脚本语言”这个名字的来历？具有什么特征的语言被称为脚本语言？  
  
在网上查了查，没查着。脚本语言英文应该是script language吧。script在金山词霸中的解释有：A copy of a text used by a director or performer.也就是按照script进行导演或演出。用在计算机上可能就变成了：**可以执行的文本**。因为我知道的所有脚本文件都是文本文件格式的，而且可以执行，从这个意义上与script的含义很接近。更关键的是脚本语言是从英文翻译过来的，因为外国人这么叫，所以我们也这么翻译的吧。历史我不知道。  
我个人认为：源程序是文本格式，可以被解释执行的语言可以算作脚本语言。如：python,perl,php,shell,awk等等，许多。不过，有一些脚本语言已经发生了变化，如python,perl已经可以编译成中间代码然后执行，这样的脚本语言已经可以被称为编译型脚本语言。  
  
BTW：脚本语言与解释语言我认为还是有区别的。**解释语言是说解释执行的语言，但执行的代码并不一定是文本格式的。脚本语言的程序是文本文件，并且是解释执行的。**但这两种区别也有些模糊。反正有点区别，不过你认为差不多也行，好象现在并不太细分脚本语言与解释语言。

## **资料三：** ##

脚本与解释有时是很模糊，其实没有必要搞得这么清楚了，当然如果你有兴趣去搞。在这里我们可以干脆将脚本与解释混为一谈。解释是第一位的，至于是不是文本格式，是否会编译成字节码倒是次要的。不这，我所接触的脚本语言（我认为是）只需要有文本格式就可以运行。象Python有中间代码，不过这一过程完全是自动的，你不用去管它。因此从最基本的运行条件来说，我认为脚本语言似乎文件格式要求是文本的。象java，其实是有一个虚拟机在运行，它也是解释执行的，那它算不算脚本语言呢，我想应该不算吧。因为，它的运行是先编译成字节码，再去运行。如果编译过程全自动了，算吗？这许就可以算了吧。  
  
不过，我们完全可以不去关心这些个案，只考虑通常的情况就行了。因此，我个人认为：脚本语言：一、解释执行　二、执行文件为文本即可

## **资料四：** ##

抽象的级别：这是最重要也是最明显示的不同。脚本语言对程序员提供了更高级的抽象。这一点明显表现在：在这种语言自身中，存在有高级的数据结构，如列表和字典结构，和对这种结构简单方便的嵌套和操作。这样可以创建非常成功的程序。  
  
　　类型定义：系统语言通常是强类型和静态类型定义。这就意味着所有变量的类型要在程序中指定，在编译时检查。相反地，脚本语言是最松散的类型定义，完全没有类型声明，并且在运行时进行动态类型检查。  
  
　　执行：系统语言的特点是编译的。程序被编译成可执行的二进制。另一方面，脚本语言的特点是解释，也就是，指令被立即执行，不存在一个编译的中间状态。这就意味着脚本语言是交互式的(你可以在提示符下敲入命令，并且看到结果)，这是另一个巨大的胜利。这样完全将编译过程从编辑\-编译\-运行循环中去掉了。  
  
　　速度：以上三点是脚本语言一方面在速度与效率， 一方面在易用性与表示式的强大性之间进行折衷的典型例子。这就使得脚本语言的执行速度比系统语言慢一个数量级。这就是对脚本语言诽谤最多的方面。性能的降低不是真正的问题，因为思想是用脚本语言来组合组件，这些组件是用象C 这样的快速系统语言来编写的。所以所有需要运行快速的东西将因为是用快速的语言实现的而运行得快速。脚本语言只用于将东西绑在一起，并且这些通常不是性能的瓶颈( 或如果是，你需要重新检查你的设计)。

## **网格** ##

1.  **function** drawGrid(stepX, stepY, lineWidth, color)\{ 
2.   context.save(); 
3.   context.lineWidth = lineWidth; 
4.   context.strokeStyle = color; 
5.  **for**(**var** i = stepY; i < context.canvas.height; i += stepY)\{ 
6.   context.beginPath(); 
7.   context.moveTo(0, i); 
8.   context.lineTo(context.canvas.width, i); 
9.   context.stroke(); 
10.  \} 
11. 
12. 
13. **for**(**var** i = stepX; i < context.canvas.width; i += stepX)\{ 
14.  context.beginPath(); 
15.  context.moveTo(i, 0); 
16.  context.lineTo(i, context.canvas.height); 
17.  context.stroke(); 
18.  \} 
19. 
20. 
21.  context.restore(); 
22.  \}

1.  **function** drawGrid(stepX, stepY, lineWidth, color)\{ 
2.   context.save(); 
3.   context.lineWidth = lineWidth; 
4.   context.strokeStyle = color; 
5.  **for**(**var** i = stepY + 0.5; i < context.canvas.height; i += stepY)\{ 
6.   context.beginPath(); 
7.   context.moveTo(0, i); 
8.   context.lineTo(context.canvas.width, i); 
9.   context.stroke(); 
10.  \} 
11. 
12. 
13. **for**(**var** i = stepX + 0.5; i < context.canvas.width; i += stepX)\{ 
14.  context.beginPath(); 
15.  context.moveTo(i, 0); 
16.  context.lineTo(i, context.canvas.height); 
17.  context.stroke(); 
18.  \} 
19. 
20. 
21.  context.restore(); 
22.  \}

# **Canvas** #

## **1. 基本篇** ##

### **1.1. 什么是 Canvas** ###

canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.

canvas 英 ['kænvəs]  美 ['kænvəs]   帆布 画布

**1.1.1. canvas 的基本用法**

**基本语法**

1.  使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸.
2.  默认 canvas 的宽高为 300 和 150.
3.  不要使用 CSS 的方式设置宽高, 应该使用 HTML 属性.
4.  如果浏览器不支持 canvas 标签, 那么就会将其解释为 div 标签. 因此常常在 canvas 中嵌入文本, 以提示用户浏览器的能力.
5.  canvas 的兼容性非常强, 只要支持该标签的, 基本功能都一样, 因此不用考虑兼容性问题.
6.  canvas 本身不能绘图. 是使用 JavaScript 来完成绘图. canvas 对象提供了各种绘图用的 api.

**canvas** **的使用领域**

canvas 的使用领域很多:

1.  游戏
2.  可视化数据(重点)
3.  banner 广告
4.  多媒体
5.  未来
    
     *  模拟仿真
     *  远程操作
     *  图形编辑

**1.1.2. 我们的课程目标**

1.  不是为了做游戏
2.  学会使用基本的 canvas api, 使用 canvas 可以完成简单的绘图
3.  实现数据的可视化

## **1.2. 基本绘图** ##

### **1.2.1. 基本绘图方法** ###

**绘图步骤**

1.  获得 `canvas` 对象.
2.  调用 `getContext` 方法, 提供字符串参数 `'2d'`.
3.  该方法返回 `CanvasRenderingContext2D` 类型的对象. 该对象提供基本的绘图命令.
4.  使用 `CanvasRenderingContext2D` 对象提供的方法进行绘图.
5.  基本绘图命令
    
     *  设置开始绘图的位置: `context.moveTo( x, y )`.
     *  设置直线到的位置: `context.lineTo( x, y )`.
     *  描边绘制: `context.stroke()`.
     *  填充绘制: `context.fill()`.
     *  闭合路径: `context.closePath()`.

**01-****绘制基本线**

var canvas = document.createElement( 'canvas' );

canvas.width = 500;

canvas.height = 400;

canvas.style.border = '1px dashed red';

document.body.appendChild( canvas );

// 获得 CanvasRenderingContext2D 对象

var context = canvas.getContext( '2d' );

// 设置 起点

context.moveTo( 0, 0 );

// 绘制直线

context.lineTo( 500, 400 );

// 设置 起点

context.moveTo( 0, 400 );

// 绘制直线

context.lineTo( 500, 0 );

// 描边显示效果

context.stroke();

演示运行结果

**1.2.1.1. 计算机直角坐标系**

**1.2.1.2. 代码分析**

1.  需要绘图就需要有 `canvas` 标签, 该标签用于展示图像.
2.  `canvas` 的宽高不要使用 CSS 来设置, 会有拉伸的问题. 应该直接使用属性设置.
3.  但是 `canvas` 只是展示图像的标签, 它没有绘图的能力. 需要使用 `canvas` 的上下文工具来实现绘图.
4.  使用 `canvas.getContext( '2d' )` 可以获得绘图工具, 该工具是 `CanvasRenderingContext2D` 类型的对象.
5.  需要绘图, 首选设置绘图的起点.
    
     *  使用 `canvas` 绘图, 需要主要的是他主张先描点, 再连线绘制效果.
     *  因此需要首先设置起点, 然后在起点的基础上描述其他需要的点.
     *  使用 `CanvasRenderingContext2D.moveTo( x, y )` 方法设置起点.
        
         *  其中 x, y 表示的是在坐标系中的位置.
6.  使用 `CanvasRenderingContext2D.lineTo( x, y )` 来描述绘制直线的下一个点. 依次类推可以描述多个点.
7.  描点结束后, 需要使用 `CanvasRenderingContext2D.stroke()` 方法来连线. 开可以显示出效果.

**1.2.1.3. getContext 方法**

语法: `Canvas.getContext( typeStr )`

描述:

1.  该方法用于绘制上下文工具.
2.  如果是绘制平面图形使用 `'2d'` 作为参数, 如果绘制立体图形使用 `'webgl'`.
3.  使用 `'2d'` 返回 `CanvasRenderingContext2D` 类型的对象.
4.  使用 `'webgl'` 返回 `WebGLRenderingContext` 类型的对象.

**1.2.1.4. moveTo 方法**

语法: `CanvasRenderingContext2D.moveTo( x, y )`

描述:

1.  该方法用于设置绘制起点.
2.  其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.

**1.2.1.5. lineTo 方法**

语法: `CanvasRenderingContext2D.lineTo( x, y )`

描述:

1.  该方法用于设置需要绘制直线的另一个点. 最终描边后会连线当前点和方法参数描述的点.
2.  其中参数 x, y 表示在坐标系中的位置, 分别是 x 坐标与 y 坐标.

**1.2.1.6. stroke 方法**

语法: `CanvasRenderingContext2D.stroke()`

描述: 该方法用于连线, 将描述的所有点按照指定顺序连接起来.

**1.2.1.7. 结论**

1.  绘图先要获得上下文, 即绘图工具
2.  绘图需要设置开始的坐标
3.  绘图是先描点, 然后一个一个依次连线
4.  依次绘图只能绘制单一样式( 色彩等 )

### **1.2.2. 直线图形** ###

分别绘制下面的案例:

1.  绘制直线计算坐标.
2.  描边调用 `CanvasRenderingContext2D.stroke()` 方法.
3.  填充使用 `CanvasRenderingContext2D.fill()` 方法.

**1.2.2.1. fill 方法**

语法: `CanvasRenderingContext2D.fill()`

描述: 该方法会按照描绘的点的路径来填充图形. 默认是黑色.

### **1.2.3. 非零环绕原则** ###

绘制下面的图

填充满足非零环绕数原则

说明:

1.  在 `canvas` 中使用各种方法描点实际上描述的是一个称为路径( path )的东西.
2.  在 `canvas` 绘图中, 所有描述的东西都是路径, 只有最后填充或描边的时候才会显示出效果.
3.  每一个路径都是一个状态.

练习: 绘制下面图形

### **1.2.4. 闭合路径** ###

**1.2.4.1. closePath 方法**

语法: `CanvasRenderingContext2D.closePath()`

描述: 使用该方法可以将最后一个描点与最开始的描点自动连接起来.

**案例**

...

ctx.moveTo( 100, 100 );

ctx.lineTo( 300, 100 );

ctx.lineTo( 300, 200 );

ctx.closePath();

ctx.stroke();

练习: 使用 `closePath` 改写非零环绕的案例.

### **1.2.5. 路径的概念** ###

1.  路径就是一次绘图
    
     *  类比使用油漆刷墙面
     *  首先打底色, 绝对不会一次性使用多个色彩
     *  一定是先画完某一个色彩再考虑另一个色彩
     *  除非需要自己创作才会考虑墙面绘画
2.  路径就好比一桶油漆和一把刷子, 一次性描点绘制. 如果重新更换油漆, 那么是绘制另一个区域.
3.  如果需要开启新的绘制, 那么使用 `CanvasRenderingContext2D.beginPath()` 方法.

**示例**

在一个区域内绘制描边的图形和填充的图形

### **1.2.6. 线型相关属性** ###

设置描边与填充不一定只能使用黑色的细线. 可以利用一些属性设置其效果

1.  `CanvasRenderingContext2D.lineWidth` 设置线宽.
2.  `CanvasRenderingContext2D.lineCap` 设置线末端类型.
3.  `CanvasRenderingContext2D.lineJoin` 设置相交线的拐点.
4.  `CanvasRenderingContext2D.getLineDash()` 获得线段样式数组.
5.  `CanvasRenderingContext2D.setLineDash()` 设置线段样式.
6.  `CanvasRenderingContext2D.lineDashOffset` 绘制线段偏移量.

**1.2.6.1. 设置线宽**

语法: `CanvasRenderingContext2D.lineWidth = number`

描述: 设置线宽.

**案例**

...

ctx.moveTo( 100, 100 );

ctx.lineTo( 300, 100 );

ctx.stroke();

ctx.beginPath();

ctx.lineWidth = 10;

ctx.moveTo( 100, 250 );

ctx.lineTo( 300, 250 );

ctx.stroke();

**展示效果**

**1.2.6.2. 设置线末端类型**

语法: `CanvasRenderingContext2D.lineCap = value`

描述:

1.  设置线型末端的样式, 可取值为: 'butt'( 默认 ), 'round', 'square'.
2.  'butt' 表示两端使用方形结束.
3.  'round' 表示两端使用圆角结束.
4.  'square' 表示突出的平角结束.
5.  最后两个是在原长度的基础上添加半个圆或半个正方形

**案例**

...

ctx.lineWidth = 10;

ctx.moveTo( 100, 100 );

ctx.lineTo( 300, 100 );

ctx.stroke();

ctx.beginPath();

ctx.lineCap =  'round';

ctx.moveTo( 100, 130 );

ctx.lineTo( 300, 130 );

ctx.stroke();

ctx.beginPath();

ctx.lineCap =  'square';

ctx.moveTo( 100, 160 );

ctx.lineTo( 300, 160 );

ctx.stroke();

**展示效果**

**1.2.6.3. 设置相交线的拐点**

语法: `CanvasRenderingContext2D.lineJoin = value`

描述:

1.  设置两条直线的拐点描述方式. 可以取值 'round', 'bevel', 'miter'(默认)
2.  'round' 使用圆角连接.
3.  'bevel' 使用平切连接.
4.  'miter' 使用直角转.

**案例**

...

ctx.lineWidth = 10;

ctx.lineJoin = 'round';

ctx.moveTo( 100, 100 );

ctx.lineTo( 200, 200 );

ctx.lineTo( 300, 100 );

ctx.stroke();

ctx.beginPath();

ctx.lineJoin = 'bevel';

ctx.moveTo( 100, 150 );

ctx.lineTo( 200, 250 );

ctx.lineTo( 300, 150 );

ctx.stroke();

ctx.beginPath();

ctx.lineJoin = 'miter';

ctx.moveTo( 100, 200 );

ctx.lineTo( 200, 300 );

ctx.lineTo( 300, 200 );

ctx.stroke();

**展示效果**

**1.2.6.4. 虚线**

语法:

1.  `CanvasRenderingContext2D.lineDashOffset = number`
2.  `CanvasRenderingContext2D.getLineDash()`
3.  `CanvasRenderingContext2D.setLineDash()`

描述:

1.  `lineDashOffset` 用于设置开始绘制虚线的偏移量. 数字的正负表示左右偏移.
2.  getLineDash() 与 setLineDash() 方法使用数组描述实线与虚线的长度.

**演示**

...

ctx.moveTo( 100, 90 );

ctx.lineTo( 100, 110 );

ctx.moveTo( 300, 90 );

ctx.lineTo( 300, 110 );

ctx.moveTo( 100, 140 );

ctx.lineTo( 100, 160 );

ctx.moveTo( 300, 140 );

ctx.lineTo( 300, 160 );

ctx.moveTo( 100, 190 );

ctx.lineTo( 100, 210 );

ctx.moveTo( 300, 190 );

ctx.lineTo( 300, 210 );

ctx.stroke();

ctx.beginPath();

ctx.moveTo( 100, 100 );

ctx.lineTo( 300, 100 );

ctx.stroke();

ctx.beginPath();

ctx.setLineDash( [ 5, 5 ] );//可以写多个值

ctx.moveTo( 100, 150 );

ctx.lineTo( 300, 150 );

ctx.stroke();

ctx.beginPath();

ctx.lineDashOffset = -2;//偏移量，正数往左偏，负数往右偏

ctx.moveTo( 100, 200 );

ctx.lineTo( 300, 200 );

ctx.stroke();

**展示效果**

**1.2.6.5. 填充与描边样式**

语法:

1.  `CanvasRenderingContext2D.strokeStyle = value`
2.  `CanvasRenderingContext2D.fillStyle = value`

描述:

1.  strokeStyle 可以设置描边颜色, 与 CSS 的语法一样
2.  fillStyle 设置填充颜色, 与 CSS 语法一样
3.  这两个属性还可以设置渐变对象.

**案例**

for (var i=0;i<6;i++){

for (var j=0;j<6;j++){

ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +

Math.floor(255-42.5*j) + ')';

ctx.beginPath();

ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);

ctx.stroke();

}

**展示效果**

## **1.3. 实例练习** ##

### **1.3.1. 绘制坐标网格** ###

绘制下面的效果

### **1.3.2. 绘制坐标系** ###

绘制下面的效果

### **1.3.3. 绘制坐标点** ###

绘制下面的效果

### **1.3.4. 绘制折线图** ###

<!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>Title</title>
    
        <style>
    
            canvas{
    
                border: 1px solid red;
    
            }
    
        </style>
    
    </head>
    
    <body>
    
    <canvas width="500" height="400">该浏览器版本较低</canvas>
    
    <script>
    
        var oCan = document.getElementsByTagName("canvas")[0];
    
        var otx = oCan.getContext("2d");
    
        //画坐标轴
    
        //坐标轴距边界的位置
    
        var padding = {
    
            left:20+0.5,
    
            right:20+0.5,
    
            top:20+0.5,
    
            bottom:20+0.5
    
        };
    
        //箭头大小
    
        var arrow = {
    
            h:20,
    
            w:16
    
        };
    
        //x轴顶点坐标
    
        var xVertex = {
    
            x:oCan.width-padding.right,
    
            y:oCan.height-padding.bottom
    
        };
    
        //y轴顶点坐标
    
        var yVertex = {
    
            x:padding.left,
    
            y:padding.top
    
        };
    
        //原点坐标
    
        var origin = {
    
            x:padding.left,
    
            y:oCan.height - padding.bottom
    
        };
    
        //画两个轴
    
        otx.beginPath();
    
        otx.moveTo(xVertex.x,xVertex.y);
    
        otx.lineTo(origin.x,origin.y);
    
        otx.lineTo(yVertex.x,yVertex.y);
    
        otx.stroke();
    
        //画x轴箭头
    
        otx.beginPath();
    
        otx.moveTo(xVertex.x,xVertex.y);
    
        otx.lineTo(xVertex.x-arrow.h,xVertex.y - arrow.w/2);
    
        otx.moveTo(xVertex.x,xVertex.y);
    
        otx.lineTo(xVertex.x - arrow.h,xVertex.y + arrow.w/2);
    
        otx.stroke();
    
        //画y轴箭头
    
        otx.beginPath();
    
        otx.moveTo(yVertex.x,yVertex.y);
    
        otx.lineTo(yVertex.x-arrow.w/2,yVertex.y + arrow.h);
    
        otx.moveTo(yVertex.x,yVertex.y);
    
        otx.lineTo(yVertex.x + arrow.w/2,yVertex.y + arrow.h);
    
        otx.stroke();
    
        //画矩形点
    
        otx.beginPath();
    
        otx.fillRect(origin.x + 100,origin.y - 100, 3 , 3);
    
        /*  //第二种美观的箭头x轴
    
         otx.beginPath();
    
         otx.moveTo(xVertex.x,xVertex.y);
    
         otx.lineTo(xVertex.x-arrow.h,xVertex.y - arrow.w/2);
    
         otx.lineTo(xVertex.x-arrow.h/2,xVertex.y);
    
         otx.lineTo(xVertex.x - arrow.h,xVertex.y + arrow.w/2);
    
         otx.closePath();
    
         otx.fill();
    
         //第二种美观的箭头y轴
    
         otx.beginPath();
    
         otx.moveTo(yVertex.x,yVertex.y);
    
         otx.lineTo(yVertex.x-arrow.w/2,yVertex.y + arrow.h);
    
         otx.lineTo(yVertex.x,yVertex.y + arrow.h/2);
    
         otx.lineTo(yVertex.x + arrow.w/2,yVertex.y + arrow.h);
    
         otx.closePath();
    
         otx.fill();*/
    
    
    
        //画矩形点
    
        //一堆点
    
        points = [[20,20] ,[50,60],[100,150],[200,260],[300,60],[350,20],[380,160]];
    
        otx.beginPath();
    
        points.forEach(function (val, i) {
    
            otx.fillRect(origin.x + val[0]-2, origin.y - val[1]-2,4,4);
    
        });
    
        //连线
    
        otx.moveTo(origin.x,origin.y);
    
        points.forEach(function (val,i) {
    
            otx.lineTo(origin.x+val[0],origin.y - val[1]);
    
        })
    
        otx.stroke();
    
    </script>
    
    </body>
    
    </html>

## **2. 中级篇** ##

## **2.1. 绘制形状** ##

绘制图形不仅仅是利用线条来实现绘图, 还可以有快捷的绘制图形的办法

1.  绘制矩形
2.  绘制圆弧

### **2.1.1. 绘制矩形** ###

绘制矩形的方法

1.  `CanvasRenderingContext2D.strokeRect`
2.  `CanvasRenderingContext2D.fillRect`
3.  `CanvasRenderingContext2D.rect`

注意: `rect` 方法就是矩形路径, 还需要使用 `fill` 或 `stroke` 才可以看到效果. 因此一般使用 `strokeRect` 或 `fillRect` 直接可以看到结果.

清除矩形区域

1.  `CanvasRenderingContext2D.clearRect`

**2.1.1.1. 绘制矩形框**

语法: `CanvasRenderingContext2D.strokeRect( x, y, width. height )`

描述:

1.  用来绘制一个矩形. 比起直接使用 `moveTo` 和 `lineTo` 方法要简单许多.
2.  该方法的前两个参数表示绘制矩形的左上角的坐标. 后两个参数表示这个矩形的宽高.
3.  使用该方法不需要使用 `moveTo` 方法设置起始点, 也不需要调用 `stroke` 等绘画方法.
4.  绘制的矩形支持 `strokeStyle` 设置颜色样式.

**案例**

...

ctx.strokeStyle = 'red';

ctx.strokeRect( 100, 100, 200, 100 );

**展示效果**

**2.1.1.2. 绘制填充矩形**

语法: `CanvasRenderingContext2D.fillRect( x, y, width. height )`

描述:

1.  用来绘制一个矩形. 比起直接使用 `moveTo` 和 `lineTo` 方法要简单许多.
2.  该方法的前两个参数表示绘制矩形的左上角的坐标. 后两个参数表示这个矩形的宽高.
3.  使用该方法不需要使用 `moveTo` 方法设置起始点, 也不需要调用 `stroke` 等绘画方法.
4.  绘制的矩形支持 `fillStyle` 设置颜色样式.

**案例**

...

ctx.fillStyle = 'green';

ctx.fillRect( 100, 100, 200, 100 );

**展示效果**

**2.1.1.3. 清除矩形区域**

语法: `CanvasRenderingContext2D.clearRect( x, y, width, height )`

描述:

1.  用于清除画布中的矩形区域的内容.
2.  参数 x, y 表示矩形区域左上角的坐标, width 与 height 表示矩形区域的宽高.

**案例**

...

ctx.fillRect( 100, 100, 200, 100 );

ctx.clearRect( 110, 110, 50, 50 );

**展示效果**

**2.1.1.4. 案例**

利用绘制图形与清除矩形区域, 可以实现简单的动画. 例如代码:

...

var x = 10, y = 10, oldx = 10, oldy = 10;

var width = 100, height = 50;

var intervalId = setInterval(function () {

ctx.clearRect( oldx - 1, oldy - 1, width + 2, height + 2 );

ctx.strokeRect( x, y, width, height );

oldx = x;

oldy = y;

x += 4;

y += 2;

if ( oldy >= 200 ) {

// clearInterval( intervalId );

x = 10, y = 10;

}

}, 20);

**简单效果**

有时为了简单常常将整个画布都清除, 这样就不用每次计算清除的问题.

ctx.clearRect( 0, 0, cas.width, cas.height );

// 也可以设置画布宽度, 这样就会自动清除

cas.width = cas.width;

### **2.1.2. 绘制圆弧** ###

绘制圆弧的方法有

1.  `CanvasRenderingContext2D.arc()`
2.  `CanvasRenderingContext2D.arcTo()`

**2.1.2.1. 绘制圆弧**

语法: `CanvasRenderingContext2D.arc( x, y, radius. startAngle. endAngle, anticlockwise )`

描述:

1.  该方法用于绘制一段弧, 配合开始点的位置 与 `stroke` 方法或 `fill` 方法可以绘制扇形.
2.  方法中的前两个参数 x, y 表示绘制圆弧的圆心坐标.
3.  参数 radius 表示圆弧半径, 单位为弧度.
4.  参数 startAngle 与 endAngle 表示开始到结束的角度. 角度以水平向右为 0 弧度, 顺时针为正方向.
5.  参数 anticlockwise 表示是否采用默认的正向角度, 如果传入 true 表示逆指针为正. 该参数可选.
6.  `startAngle. endAngle``相同时，会画成一条线`

otx.beginPath();
    
    otx.moveTo(200,200);
    
    otx.arc(200,200,50,4, 4);
    
    otx.stroke();

**案例**

// 在 200, 200 的地方绘制一段半径为 100 的圆弧, 圆心角为 - PI / 2 到 PI / 4

...

ctx.arc( 200, 200, 100, -Math.PI/2, Math.PI/4 );

ctx.stroke();

// 为了方便看清楚结构, 绘制坐标轴

ctx.beginPath();

ctx.strokeStyle = 'red';

ctx.moveTo( 50, 200 );

ctx.lineTo( 350, 200 );

ctx.moveTo( 200, 50 );

ctx.lineTo( 200, 350 );

ctx.moveTo( 200, 200 );

ctx.lineTo( 300, 300 );

ctx.stroke();

**展示效果**

**2.1.2.1.1. 注意事项**

1.  使用 arc 绘图的时候, 如果没有设置 `moveTo` 那么会从开始的绘弧的地方作为起始点. 如果设置了 `moveTo`, 那么会连线该点与圆弧的起点.
2.  如果使用 `stroke` 方法, 那么会从开始连线到圆弧的起始位置. 如果是 `fill` 方法, 会自动闭合路径填充.

**2.1.2.2. 绘制扇形**

绘制扇形的重点是需要设置起始位置为圆心点, 然后闭合路径即可

...

ctx.strokeStyle = 'red';

ctx.fillStyle = 'pink';

ctx.moveTo( 100, 200 );

ctx.arc( 100, 200, 100, -Math.PI/3, Math.PI/3 );

ctx.closePath();

ctx.stroke();

ctx.beginPath();

ctx.moveTo( 300, 200 );

ctx.arc( 300, 200, 100, -Math.PI/3, Math.PI/3 );

ctx.closePath();

ctx.fill();

**展示效果**

**2.1.2.3. 绘制扇形动画**

绘制扇形动画, 就是每隔几毫秒( 20 毫秒)擦除以前绘制的内容, 然后在以前绘制的基础上比以前多绘制一点东西. 这里多绘制的内容就是由角度决定. 比如一开始角度从 `-Math.PI / 2` 开始绘制. 那么每次角度都 `+0.1`, 直到 绘制到 `Math.PI * 3 / 2` 为止.

...

ctx.fillStyle = 'green';

var startAngle = -Math.PI / 2,

angle = startAngle,

x = 200, y = 200,

r = 100;

var intervalId = setInterval(function () {

// 清除之前绘制的内容

ctx.clearRect( 0, 0, cas.width, cas.height );

// 角度增量

angle += 0.1;

// 判断是否停止计时器

if ( angle >= Math.PI * 3 / 2 ) {

clearInterval( intervalId);

angle = Math.PI * 3 / 2;

console.log( '绘制完成' );

}

// 绘制

ctx.moveTo( x, y );

ctx.arc( x, y, r, startAngle, angle );

ctx.fill();

}, 20);

**展示效果**

**2.1.2.4. 绘制饼形图**

绘制饼形图最大的特点是角度是叠加的. 开始从 `-Math.PI/2` 开始绘制, 达到执行角 `x` 后, 下一个区域从 `x` 开始绘制, 然后有到一个角 `y` 停下来. 如此反复到 `Math.PI * 3 / 2` 结束.

本节看两个案例, 一个固定等分, 一个由数据源来定义角度.

**2.1.2.4.1. 三等分饼形图**

绘制一个三等分的饼形图, 颜色使用 红, 绿, 蓝.

var x = 200, y = 200,

r = 100,

step = Math.PI * 2 / 3,     // 120 度一个区域

start = -Math.PI / 2,       // 起始角度

colors = [ 'red', 'green', 'blue' ];

for ( var i = 0; i < 3; i++ ) {

ctx.beginPath();

ctx.moveTo( x, y );

ctx.fillStyle = colors[ i ];

ctx.arc( x, y, r, start, start+=step );

ctx.fill();

}

**展示效果**

**2.1.2.4.2. 根据数据定义角度**

根据数据源定义角度, 就是将所有的数据求和, 按照总和为 `2 * Math.PI` 的结论计算出每一个数据部分的弧度值. 同时颜色可以提前定义好.

从 Konva 库中分离出来的颜色

var colors =

( "aliceblue,antiquewhite,aqua,aquamarine,azure,beige,bisque,black,blanchedalmond,blue," +

"blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk," +

"crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta," +

"darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray," +

"darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick," +

"floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey," +

"honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon," +

"lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink," +

"lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyellow," +

"lime,limegreen,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple," +

"mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue," +

"mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid," +

"palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue," +

"purple,rebeccapurple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna," +

"silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,transparent," +

"tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen" ).split( ',' );

如果得到数据

var data = [ 123, 156, 47, 100, 80 ];

那么计算各个部分的比例时, 可以构造一个存储分量值与弧度的对象数组.

var sum = 0;

for ( var i = 0; i < data.length; i++ ) {

sum += data[ i ];

}

// 得到总数后, 分量比就有了

var odata = data.map(function ( v, i ) {

return { value: v, radius: v * 2 * Math.PI / sum };

});

最后根据数据开始绘图

// 开始绘图

var start = -Math.PI / 2,

x = 200, y = 200,

r = 100;

for ( var i = 0; i < odata.length; i++ ) {

ctx.beginPath();

ctx.fillStyle = colors[ i + 10 ];

ctx.moveTo( x, y );

ctx.arc( x, y, r, start, start+=odata[ i ][ 'radius' ] );

ctx.fill();

}

**展示效果**

**2.1.2.5. 绘制相切弧**

语法: `CanvasRenderingContext2D.arcTo( x1, y1, x2, y2, radius )`

描述:

1.  该方法用于绘制圆弧
2.  绘制的规则是当前位置与第一个参考点连线, 绘制的弧与该直线相切.
3.  同时连接两个参考点, 圆弧根据半径与该连线相切

例如有一个起始点 `( 100, 100 )`, 那么绘制其点. 颜色设置为红色.

ctx.fillStyle = 'red';

ctx.fillRect( 100 - 4, 100 - 4, 8, 8 );

然后两个参考点分别为 `( 100, 300 )` 和 `( 300, 300 )`, 绘制出该点

ctx.fillRect( 100 - 4, 300 - 4, 8, 8 );

ctx.fillRect( 300 - 4, 300 - 4, 8, 8 );

连接两个参考点

ctx.beginPath();

ctx.strokeStyle = 'red';

ctx.moveTo( 100, 300 );

ctx.lineTo( 300, 300 );

ctx.stroke();

调用 `arcTo` 方法绘制圆弧. 记得将起始点设置为 `( 100, 100 )`

ctx.beginPath();

ctx.strokeStyle = 'blue';

ctx.moveTo( 100, 100 );

ctx.arcTo( 100, 300, 300, 300, 100 );

ctx.stroke();

注意: 使用该方法可以使用圆弧连接两条直线, 而不用计算复杂的起始角度与结束角度. 因此用于绘制圆角矩形等案例较多.

**2.1.2.6. 绘制圆角矩形**

封装一个函数, 用于绘制圆角矩形.

1.  参考 `rect` 方法, 需要坐标参数 x, y.
2.  由于设置圆角, 因此需要设置圆角半径 cornerRadius.
3.  还需要提供宽高.

首先绘制一个矩形边框. 但是需要考虑圆角, 虽然从 x, y 开始绘制, 但是中间要空出 半径的距离.

var x = 100, y = 100, width = 300, height = 100,

cornerRadius = 10;

ctx.strokeStyle = 'red';

ctx.moveTo( x + cornerRadius, y );

ctx.lineTo( x + width - cornerRadius, y );

ctx.moveTo( x + width, y + cornerRadius );

ctx.lineTo( x + width, y + height - cornerRadius );

ctx.moveTo( x + width - cornerRadius, y + height );

ctx.lineTo( x + cornerRadius, y + height );

ctx.moveTo( x, y + height - cornerRadius );

ctx.lineTo( x, y + cornerRadius );

ctx.stroke();

然后再分别绘制四个角, 设置当前位置与参考点的位置. 设置当前位置为一个线端点, 然后参考点依次就是 矩形顶点 和 另一个线段的端点.

ctx.moveTo( x + cornerRadius, y );

ctx.arcTo( x, y, x, y + cornerRadius, cornerRadius );

同理绘制另外三个圆角

ctx.moveTo( x + width - cornerRadius, y );

ctx.arcTo( x + width, y, x + width, y + cornerRadius, cornerRadius );

ctx.moveTo( x + width, y + height - cornerRadius );

ctx.arcTo( x + width, y + height, x + width - cornerRadius, y + height, cornerRadius );

ctx.moveTo( x + cornerRadius, y + height );

ctx.arcTo( x, y + height, x, y + height - cornerRadius, cornerRadius );

封装成方法就可以绘制更多圆角矩形了. 封装中注意 `beginPath()` 和 `save()` 和 `restore()`

function cRect ( x, y, width, height, cornerRadius, color ) {

ctx.save();

ctx.beginPath();

ctx.strokeStyle = color || 'red';

ctx.moveTo( x + cornerRadius, y );

ctx.lineTo( x + width - cornerRadius, y );

ctx.moveTo( x + width, y + cornerRadius );

ctx.lineTo( x + width, y + height - cornerRadius );

ctx.moveTo( x + width - cornerRadius, y + height );

ctx.lineTo( x + cornerRadius, y + height );

ctx.moveTo( x, y + height - cornerRadius );

ctx.lineTo( x, y + cornerRadius );

// 开始绘制四个圆角

ctx.moveTo( x + cornerRadius, y );

ctx.arcTo( x, y, x, y + cornerRadius, cornerRadius );

ctx.moveTo( x + width - cornerRadius, y );

ctx.arcTo( x + width, y, x + width, y + cornerRadius, cornerRadius );

ctx.moveTo( x + width, y + height - cornerRadius );

ctx.arcTo( x + width, y + height, x + width - cornerRadius, y + height, cornerRadius );

ctx.moveTo( x + cornerRadius, y + height );

ctx.arcTo( x, y + height, x, y + height - cornerRadius, cornerRadius );

ctx.stroke();

ctx.restore();

}

调用代码

cRect( 50, 50, 100, 50, 5 );

cRect( 100, 120, 100, 80, 8, 'blue' );

cRect( 300, 100, 200, 100, 10, 'green' );

## **2.2. 绘制文本** ##

绘制文本的方法

1.  `CanvasRenderingContext2D.fillText()`
2.  `CanvasRenderingContext2D.strokeText()`
3.  `CanvasRenderingContext2D.measureText()`

文本样式

1.  `CanvasRenderingContext2D.font`
2.  `CanvasRenderingContext2D.textAlign`
3.  `CanvasRenderingContext2D.textBaseline`

### **2.2.1. 绘制文字** ###

语法:

1.  `CanvasRenderingContext2D.strokeText( text, x, y[, maxWidth] )`
2.  `CanvasRenderingContext2D.fillText( text, x, y[, maxWidth] )`

描述:

1.  这两个方法的功能都是在给定的 x, y 坐标下绘制文本内容.
2.  stroke 绘制描边文字, 文字内空心. fill 绘制填充文字, 即实心文字.
3.  最后一个参数可选, 用于限制文字的总宽. 特殊条件下, 系统会自动调整文字宽度与大小以适应该参数限制.

**案例**

ctx.strokeRect( 100, 100, 200, 50 );

ctx.strokeText( 'Hello JK', 100, 100 );

ctx.strokeRect( 100, 200, 200, 50 );

ctx.fillText( 'Hello JK', 100, 200 );

注意: 第一个文字由于中间空心, 所以文字相当于双线显示. 就显得较粗.

根据绘制的矩形块可以发现文字几乎使用该点作为文字基线参考.

### **2.2.2. 计算文本尺寸** ###

语法: `CanvasRenderingContext2D.measureText()`

描述:

1.  该方法返回一个文本尺寸对象, TextMetrics 对象.
2.  TextMetrics 对象属性很多, 常用的 width 属性可以获取文字的宽度.

### **2.2.3. 设置文字属性** ###

**2.2.3.1. 设置文字字体**

语法: `CanvasRenderingContext2D.font = value`

描述:

1.  该属性用于设置绘制字体的各种信息, 与 CSS 语法一致, 设置字体形状, 样式, 字号粗细等.
2.  其顺序可以是: style | variant | weight | size/line-height | family.
3.  默认值为 10px sans-serif

修改字号后查看 strokeText 与 fillText 的区别

...

ctx.font = '50px 黑体';

ctx.strokeRect( 100, 100, 200, 50 );

ctx.strokeText( 'Hello JK', 100, 100 );

ctx.strokeRect( 100, 200, 200, 50 );

ctx.fillText( 'Hello JK', 100, 200 );

**2.2.3.2. 设置字体水平对齐方式**

语法: `CanvasRenderingContext2D.textAlign = value`

描述:

1.  该属性用于设置文字的水平对齐方式. 设置文字居中, 靠左右对齐等.
2.  该属性可以设置的值有: start( 默认 ), end, left, right, center.

start 表示根据参考基准点的垂直直线左靠对齐

...

ctx.moveTo( 150, 100 );

ctx.lineTo( 150, 200 );

ctx.moveTo( 100, 150 );

ctx.lineTo( 200, 150 );

ctx.strokeStyle = 'red';

ctx.stroke();

ctx.font = '30px 黑体';

ctx.textAlign = 'start'; // 默认

ctx.fillText( '测试文字', 150, 150 );

end 表示根据参考基准点的垂直直线右靠对齐

...

ctx.font = '30px 黑体';

ctx.textAlign = 'end';

ctx.fillText( '测试文字', 150, 150 );

left 与 right 就是左对齐与右对齐的意思

...

ctx.font = '30px 黑体';

ctx.textAlign = 'left';

ctx.fillText( 'left', 150, 150 );

ctx.textAlign = 'right'

ctx.fillText( 'right', 150, 150 );

最后 center 就是居中的含义.

ctx.font = '50px 黑体'

ctx.textAlign = 'center';

ctx.fillText( '00000', 150, 150 );

**2.2.3.3. 设置字体垂直对齐方式**

语法: `CanvasRenderingContext2D.textBaseline = value`

描述:

1.  该方法设置文字在垂直方向上的对齐方式.
2.  该属性可以取值: top, middle, bottom, hanging, alphabetic, ideographic
3.  基于参考点的直线, 其中 top, middle, buttom 分别表示靠上, 居中, 靠下对齐.
4.  alphabetic 表示字母基线, 类似于英文字母的对齐方式. 例如 a, g, f 等字母.
5.  ideographic 表意对齐. 使用字母对齐中超出的字母为参考. 即比字母基线略靠下.
6.  所有的对齐方式是根据文字特点相关的. 对于中文主要使用的还是 top, bottom 和 middle.

top, middle, bottom 使用的较多

...

// ------------------

ctx.moveTo( 100, 80 );

ctx.lineTo( 500, 80 );

ctx.strokeStyle = 'red';

ctx.stroke();

ctx.font = '30px 黑体';

ctx.textBaseline = 'top';

ctx.fillText( 'abfghijklpqrty', 150, 80 );

// ------------------

ctx.translate( 0, 100 );

ctx.moveTo( 100, 80 );

ctx.lineTo( 500, 80 );

ctx.strokeStyle = 'red';

ctx.stroke();

ctx.font = '30px 黑体';

ctx.textBaseline = 'bottom';

ctx.fillText( 'abfghijklpqrty', 150, 80 );

// ------------------

ctx.translate( 0, 100 );

ctx.moveTo( 100, 80 );

ctx.lineTo( 500, 80 );

ctx.strokeStyle = 'red';

ctx.stroke();

ctx.font = '30px 黑体';

ctx.textBaseline = 'middle';

ctx.fillText( 'abfghijklpqrty', 150, 80 );

alphabetic 表示字母参考线, ideographic 会比它低一点, hanging 表示悬挂.

ctx.moveTo( 100, 80 );

ctx.lineTo( 500, 80 );

ctx.strokeStyle = 'red';

ctx.stroke();

ctx.font = '30px 黑体';

ctx.textBaseline = 'alphabetic';

ctx.fillText( 'abfghijklpqrty', 150, 80 );

// -------------------------------------------------

ctx.translate( 0, 100 );

ctx.moveTo( 100, 80 );

ctx.lineTo( 500, 80 );

ctx.strokeStyle = 'red';

ctx.stroke();

ctx.font = '30px 黑体';

ctx.textBaseline = 'ideographic';

ctx.fillText( 'abfghijklpqrty', 150, 80 );

// -------------------------------------------------

ctx.translate( 0, 100 );

ctx.moveTo( 100, 80 );

ctx.lineTo( 500, 80 );

ctx.strokeStyle = 'red';

ctx.stroke();

ctx.font = '30px 黑体';

ctx.textBaseline = 'hanging';

ctx.fillText( 'abfghijklpqrty', 150, 80 );

实际上大多数参考方式只有在特定语言中有作用, 而且与字体也有相对复杂的关系.

## **2.3. 绘制图片** ##

绘制图像虽然只有一个 `drawImage` 函数, 但是该函数有多重参数形式.

1.  `CanvasRenderingContext2D.drawImage( img, dx, dy )`.
2.  `CanvasRenderingContext2D.drawImage( img, dx, dy, dWidth, dHeight )`.
3.  `CanvasRenderingContext2D.drawImage( img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )`.

### **2.3.1. 绘制简单图像** ###

语法: `CanvasRenderingContext2D.drawImage( img, dx, dy )`

描述:

1.  使用三个参数, 允许在画布上的 任意位置 绘制图片.
2.  参数 img 是指图片对象. 可以是 img 标签, 或者是 video 标签, 已经另一个 canvas 等.
3.  需要注意的是如果直接添加 img 对象是不可以的, 需要等待其加载.

准备一张网络图片, 绘制, 便于查看其加载过程.

// 随便从百度中搜索 '美女头像', 记录一个链接地址

var url = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3289155966,3850025949&fm=116&gp=0.jpg';

// 创建 img 对象

var img = new Image(); // 就是 img 标签

// 设置 src 属性为 图片

img.src = url;

// 绘图

ctx.drawImage( img, 100, 100 );

此时没有任何结果, 打开调试工具查看 Net Work

因为加载图片需要时间, 因此将绘制的方法放在 onload 事件中.

// 随便从百度中搜索 '美女头像', 记录一个链接地址

var url = 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3289155966,3850025949&fm=116&gp=0.jpg';

// 创建 img 对象

var img = new Image(); // 就是 img 标签

// 设置 src 属性为 图片

img.src = url;

// 绘图

img.onload = function () {

ctx.drawImage( img, 100, 100 );

};

注意: 这里使用 `new Image()` 与 `document.createElement( 'img' )` 是一样的.

### **2.3.2. 在指定区域内绘制图像** ###

当图片比较大的时候, 如果使用这样的方式绘图, 那么图片可能会完全覆盖画布.

因此, 需要将其控制在一个矩形区域内绘制.

语法: `CanvasRenderingContext2D.drawImage( img, dx, dy, dWidth, dHeight )`

描述:

1.  参数 dWidth, dHeight 表示绘制的矩形区域. 绘制的 dx, dy 坐标决定了开始.
2.  该方法绘制的图像会在指定范围内被压缩显示.

将上面的图绘制在 `100 * 100` 的范围内.

...

ctx.drawImage( img, 100, 100, 100, 100 );

如果希望正常显示, 需要固定一个宽度或者高度, 然后根据比例计算出另一个值. 这里假定高度是 100. 计算宽度后绘图.

...

var heigth = 100, width;

img.onload = function () {

width = img.width * height / img.height;

ctx.drawImage( img, 100, 100, width, height );

};

### **2.3.3. 绘制任意图像** ###

类似于 CSS 中处理按钮等小图标的技巧, 将很多的效果图集中在一张 png 格式的背景透明的图片中, 这样可以提高效率也便于维护. 那么 drawImage 同样支持该方式绘图. 在画布中的指定位子与指定区域内, 绘制图片中的某个矩形区.

语法: `CanvasRenderingContext2D.drawImage( img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight )`

描述: 这里的带有 s 前缀的参数就是指图源的矩形区域.

例如将图片的 `( 100, 100, 300, 200 )` 处的内容绘制到页面的 `( 100, 100, 300, 200 )` 的位置.

'''

ctx.drawImage( img, 100, 100, 300, 200,  100, 100, 300, 200 );

## **2.4. 绘制动画** ##

有了图片部分绘制的功能, 我们就可以尝试绘制动画了.

开始的时候绘制第一行的第一张图. 计算它的坐标与宽高

var img = new Image();

img.src = './imgs士兵(1).png'

img.onload = function () {

var width = img.width / 4;

var height = img.heigth / 4;

// 第一张图的顶点是 0, 0, 宽高是 width, height

};

那么第一行的第二张图就是 `( 0, width, width, height )`, 第三张就是 `( 0, width * 2, width, height )`. 因此第一行的第 `i` 张图就是

var x = 0;

var y = width * ( i - 1 );

同理得到, 第 `j` 列的 `x` 坐标是 `height * ( j - 1 )`

绘制第一张图

...

var img = new Image();

img.src = './imgs/士兵(1).png'

img.onload = function () {

var width = img.width / 4;

var height = img.height / 4;

ctx.drawImage( img, 0, 0, width, height, 100, 100, width, height );

};

现在要求, 每隔 200 毫秒就切换一张图片, 现在只考虑第一行的图片.

...

var img = new Image();

img.src = './imgs/士兵(1).png'

img.onload = function () {

var width = img.width / 4;

var height = img.height / 4;

var i = 0;

setInterval(function () {

ctx.clearRect( 0, 0, cas.width, cas.height );

ctx.drawImage( img, width * (i++ % 4), 0, width, height, 100, 100, width, height );

}, 200 );

};

扩展一下, 把四行都画出来

## **3. 高级篇** ##

## **3.1. 变换** ##

Canvas 绘图中支持矩阵变换功能. 其中涉及的常用方法有

1.  `CanvasRenderingContext2D.transform()`
2.  `CanvasRenderingContext2D.scale()`
3.  `CanvasRenderingContext2D.translate()`
4.  `CanvasRenderingContext2D.rotate()`
5.  `CanvasRenderingContext2D.setTransForm()`

还有一些方法, 暂时没有普及与确定. 因此这里的几个方法才是最常用的方法.

### **3.1.1. 什么是变换** ###

计算机图形学是建立在解析几何基础之上的. 也就是说所有绘制的图形都是基于坐标进行计算得到的. 那么利用坐标系位置的调整, 同样的坐标可以得到不同的效果. 例如有一个点 A ( 10, 10 ). 可以在坐标系中绘制出该点.

如果调整坐标系. 比如将坐标系向右移动 10 个单位,

此时同样是 A 点, 坐标就变成了 ( 0, 10 ). 然后再把坐标系向上移动 10 个单位,

那么针对新坐标系, 这个点的坐标就是 ( 0, 0 ). 这个就是坐标变换. 通过移动坐标的位置, 对坐标进行旋转, 以及对坐标轴数据的缩放, 从而使得原有点的坐标发生变化, 或利用原有的坐标点绘制新的效果.

坐标变换有一套完整的数学公式. 利用矩阵可以很容易的表示坐标的所有变换.

这里的 a, b, c, d, e, f 就刚好是 `transform` 函数的 参数.

1.  其中 a 有时又标记为 m11. 它表示水平缩放.
2.  其中 b 有时又标记为 m12. 它表示水平倾斜.
3.  其中 c 有时又标记为 m21. 它表示垂直倾斜.
4.  其中 d 有时又标记为 m22. 它表示垂直缩放.
5.  其中 e 有时又标记为 dx. 它表示水平移动.
6.  其中 f 有时又标记为 dy. 它表示垂直移动.

**演示**

...

ctx.transform( 1, 0, 0, 1, 0, 0 );

ctx.fillRect( 0, 0, 100, 100 );

这里矩阵变换会比较复杂, 因此在使用中一般使用简单的, 平移, 旋转 和 缩放 的简单 api.

### **3.1.2. 平移变换** ###

平移变换就是将原有坐标轴进行平行移动, 那么坐标轴移动后就可以使用新坐标来绘制图形了.

语法: `CanvasRenderingContext2D.translate( x, y )`

描述:

1.  该方法将坐标进行平移.
2.  x 表示水平移动, 正数向右, 负数向左.
3.  y 表示垂直移动, 正数向下, 负数向上.
4.  变换可以重复调用, 变换是可以累加的.

使用该变换, 常常用于绘制不同位置, 但是形状重复的图形.

注意: 变换也会被 "继承", 开启新路径后依旧保留原先变换.

### **3.1.3. 旋转变换** ###

语法: `CanvasRenderingContext2D.rotate( radian )`

描述:

1.  该方法将坐标轴进行旋转变换.
2.  参数是弧度, 表示旋转的方式. 正数表示顺时针旋转, 负数表示逆时针旋转.

该变换常常用于实现旋转动画等.

### **3.1.4. 缩放变换** ###

语法: `CanvasRenderingContext2D.scale( x, y )`

描述:

1.  该方法实现水平与垂直的缩放.
2.  参数 x 控制水平缩放倍率. 传参 1 表示不作缩放, 传入大于 1 的数字表示扩大.
3.  参数 y 控制垂直缩放倍率. 传参 1 表示不作缩放, 传入大于 1 的数字表示扩大.

该变换常常用于放大与缩小, 以及反转的效果.

## **3.2. 环境** ##

前面提到 Canvas 是含有状态的, 也就是说需要修改颜色, 直线样式, 绘图方式等效果时需要开启一个新的状态. 但是有时在绘制过程中需要修改状态, 同时绘制完当前状态后又需要回到之前的状态中继续绘制另外的形状. 那么只有再将修改过的样式载更改回来. 如果在该状态中修改的属性较多, 那么每次在回到之前状态时就有很多的代码.

Canvas 中引入了状态的保持机制. 使用 `CanvasRenderingContext2D.save()` 方法可以保存当前状态. 如果需要恢复到已经保存的状态, 只需要调用 `CanvasRenderingContext2D.restore()` 方法即可.

状态保持的机制是基于状态栈实现的. 也就是说 save 一次就存储一个状态. restore 一次就将刚刚存入的恢复. 如果 save 两次, 就需要 restore 两次, 才可以恢复到最先的状态.

一般在封装绘图的时候都会采用开始绘制之前, save 一次, 然后 开启一个新路径, 然后绘制结束后 restore, 然后再开启一个新路径. 这样保持当前状态不会对其他绘图代码构成影响.

## **3.3. 优化** ##

canvas 在绘制图片的时候, drawImage 方法还支持将一个 canvas 绘制到另一个 canvas 中. 因此使用该功能, 可以在内存中完成复杂的绘图, 将绘制好的半成品再绘制到 canvas 中合成需要的效果.

## **3.4. 画布保存** ##

画布在绘制后实际上就是一张图片, 可以直接右键另存为. 同时也支持使用 js 代码将其保存为 base64 编码的字符串.

语法: `Canvas.ToDataURL( type, encoderOptions )`

描述:

1.  该方法可以将画布转换成 base64 格式的数据
2.  type 表示输出类型. 例如: image/png 或 image/jpeg 等
3.  encoderOptions 表示图片输出质量, 其取值在 0 到 1 之间. 如果是 1, 表示无损压缩, 必须使用 image/jpeg 或 image/webp 才起作用

...

...

var img = document.getElementById( 'img' );

var cas = document.createElement( 'canvas' );

cas.width = 100, cas.height = 100;

var ctx = cas.getContext( '2d' );

ctx.fillStyle = 'pink';

ctx.fillRect( 0, 0, 100, 100 );

var data = cas.toDataURL( 'image/png', 1 );

img.src = data;

## **3.5. 渐变和图案** ##

绘制图像有两个主要方法, 一个是描边, 一个是填充. 前面介绍过要设置其样式, 可以使用 `strokeStyle` 和 `fillStyle` 属性, 只需要给它们提供颜色就可以了. 但是不仅仅是颜色, 它还支持渐变和重复.

相关属性:

1.  `CanvasRenderingContext2D.shadowBlur` 属性表示模糊程度.
2.  `CanvasRenderingContext2D.shadowColor` 属性表示模糊颜色.
3.  `CanvasRenderingContext2D.shadowOffsetX` 属性表示模糊位置 x 坐标偏移.
4.  `CanvasRenderingContext2D.shadowOffsetY` 属性表示模糊位置 y 坐标偏移.

# **javascript** #

## **JS概述** ##

### **JS作用** ###

1.  验证表单（以前的网速慢）
2.  页面特效（PC端的网页效果）
3.  移动端（移动web和app）
4.  异步和服务器交互（AJAX）
5.  服务端开发（nodejs）

### **浏览器工作原理(了解)** ###

## **弱类型脚本语言（解释型语言，解析执行与编译执行）** ##

### **解析执行与编译执行** ###

编译执行：把代码编译成CPU认识的语言(文件)，然后整体的执行。

解析执行：一行一行解析，解析一行执行一行。

### **弱类型脚本语言** ###

脚本语言是：弥补编译语言的不足而存在的，作为补充语言，不用编译。

弱类型语言：简单理解定义一个变量，可以有多种数据类型。（var temp）

## **组成（前端标准和JS组成）** ##

### **前端标准（HTML/CSS/JS）** ###

JavaScript、HTML、CSS各自的作用

HTML 提供网页上显示的内容（结构）

CSS 美化网页（表现）

JavaScript（JS） 控制网页行为（行为）

设计原则：

结构、样式、行为 --- 分离！

### **JS组成** ###

JS = ECMAScript + DOM + BOM + 高级

ECMAScript（前身为欧洲计算机制造商协会）

JavaScript的语法规范

DOM（Document Object Model 的简称）

JavaScript操作网页上元素的API

BOM（Browser Object Model 的简称）

JavaScript操作浏览器部分功能的API

## **输出语句** ##

*  console.log(“内容”)在控制台打印输出内容
 *  alert(“内容”)弹窗显示内容
 *  document.write(“内容”)在页面书写内容

## **引入方式** ##

### **内嵌式（学习期间用）** ###

### **外链式（实际开发）** ###

注释问题：单行，多行，方法注释等..... 快捷键：ctrl+/ 和ctrl+shift+/

## **变量** ##

### **命名规则** ###

驼峰命名规则：getElementById/matherAndFather/aaaOrBbbAndCcc

遵从规则：

1.变量命名必须以字母或是下标符号”\_”或者”$”为开头。

2.变量名长度不能超过255个字符。

3.变量名中不允许使用空格，首个字不能为数字。

4.不用使用脚本语言中保留的关键字及保留符号作为变量名。

5.变量名区分大小写。(javascript是区分大小写的语言)

6.汉语可以作为变量名。但是不建议使用！！！（low）

### **变量使用** ###

**定义赋值和定义后在赋值**

var age = 19;

var age ; age = 19

不建议使用：var age = “张三”; age = 19; 跨类型。

**案例：交换变量**

非数值型和数值型。

需求：定义一个中间值，交换两个变量

需求：交换两个变量（数值型）而且不能用中间值。(求和)

## **数据类型** ##

### **数据类型划分** ###

使用关键字typeof：查看方法： typeof name 或者 typeof(name)

**简单数据类型（值类型）**

四种： 字符串 数字 布尔 未定义 空

String Number Boolean undefined  null

**复杂数据类型（引用类型）**

Object、function、Array、Date、RegExp、Error.......

### **字面量** ###

固定的值，让你从“字面上”理解其含义。

数值字面量

var age = 18; // 数值字面量，18为字面值

### **简单数据类型介绍** ###

**Number**

1.  进制

进制包括2进制、8进制（011）、10进制、16进制（0xA）等....

1.  浮点数

因为精度丢失问题，所以不判断计算后的两个浮点数是否相等。

1.  数值范围

由于内存的限制，ECMAScript 并不能保存世界上所有的数值

最小值：Number.MIN\_VALUE，这个值为： 5e-324

最大值：Number.MAX\_VALUE，这个值为： 1.7976931348623157e+308

无穷大：Infinity

无穷小：-Infinity

1.  NaN

a) NaN 非数值（Not a Number的简写）

console.log(“abc”/18); //结果是NaN

Undefined和任何数值计算为NaN;

NaN 与任何值都不相等，包括 NaN 本身

b) isNaN() :任何不能被转换为数值的值都会导致这个函数返回 true

（isNaN译为是否符合一个标准，什么标准呢？不是一个数字的标 准，如果符合了那么就不是一个数字，不符合就是一个数字）

isNaN(NaN);// true

isNaN(“blue”); // true

isNaN(123); // false

**String**

1.  字面量定义方式

用引号时，可单可双，唯独不可一单一双。可用.length看有几个字符。

var name = "zhangsan";

var name = 'zhangsan';

var name = 'zhangsan"; //错误，单引号和双引号要成对出现

1.  转译

总结：无法输出的字符，先输出\\，在输出字符。

1.  字符串不可变

在内存中不会立刻消失，只能二次赋值，原有的字符在一定时间 内被 垃圾回收器回收。

1.  字符串拼接

如果两个变量都是字符串，无论是否包含数字，只要是拼接，那么在前一个后面添加后一个字符串。（+与-情况不同，详情参考数据转换）

**Booblean**

1.  Boolean类型有两个字面量：true和false，区分大小写。（大写不对）

虽然Boolean 类型的字面值只有两个，但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值

1.  true

true、除0数字、“something”、Object(任何对象)为true

1.  false

false、0 、“”、undefined 、null为false

4.if判断时会把（）内的值强行转换成boolean类型进行判断。

**undefined和null**

null和undefined有最大的相似性。看看null == undefined的结果(true)也就更加能说明这点。但是null ===undefined的结果(false)。不过相似归相似，还是有区别的，就是和数字运算时，10 + null结果为：10；10 + undefined结果为：NaN。

任何数据类型和undefined运算都是NaN;

任何值和null运算，null可看做0运算。

## **数据类型转换** ##

*  转换成字符串类型
 *  转换成数值类型
 *  转换成布尔类型

### **任何简单类型转换成String（三种方法）** ###

**变量+“” 或者 变量+“abc”**

**String(变量)**

**变量.toSting() 注意：undefined和null不可以**

null和undefined无toString方法。

### **任何简单类型转换成Number** ###

此转换容易产生NaN，一旦被转换的变量中含有非数字字符，都容易出现NaN

**变量 -\*/ 一个数字（有非数字字符会出现NaN）**

例：var num1 = “11”- 0; var num2 =“11”\* 1;var num =“11”/1;

JS底层做了一个强制类型转换，把字符串转换成了Number进行运算。

**Number(变量)（有非数字字符会出现NaN）**

var num1 = Number(“18”); 把字符变成了数字。

var num2 = Number(“18.99”); 结果为18.99数字型。（有小数也转换）

**parseInt()和parseFloat()（译为取整和取浮点数）**

空字符串parseInt()和parseFloat()返回NaN，Number("")返回0

parseInt(变量)：如果变量中收割字符为字母则结果为NaN。

否则取出现首个非数字前的整数。

123 = parseInt(“123.123aaaa”);

parseFloat(变量)：如果变量中收割字符为字母则结果为NaN。

否则取出现首个非数字前的浮点数。（没有小数取整）

123.123 = parseFloat(“123.123aaaa”);

**提别提示**

Boolean类型中：true数值为1；false为0；

null的数值类型为0；

undefined无数值类型或者为NaN;

### **任何简单类型转换成Boolean** ###

任何数据类型都可以转换成boolean类型，所以和以往两个转换不同；

**Boolean(变量)**

var bool = Boolean(“1111”); bool为true；

**！！变量**

第一个逻辑非操作会基于无论什么操作数返回一个与之相反的布尔值

第二个逻辑非操作则对该布尔值求反

于是就得到了这个值真正对应的布尔值

## **操作符** ##

主要研究操作符的种类以及优先级。

案例学习。

### **操作符种类** ###

*  算数运算符（\+—\*/...）
    
    1.  一元运算符：正号、负号、++、--、平方等一个变量就能运算
    2.  二元运算符：+-\*/%等两个变量才能运算
    3.  三元运算符： 值1？值2：值3；
 *  逻辑运算符（&& || ! ）（与或非）
 *  比较运算符（<、>、==、>=...）
 *  赋值运算符（=、\+=、\-=、\*=、/=、%=）

### **优先级** ###

1 ()

2 !、-（负数）、++、-- （正数省略+）（一元运算）

3 \*、/、%

4 +、- （加，减）（二元运算）

5 <、<=、<、>= （一级逻辑运算）

6 ==、!=、===、!==、 （二级逻辑运算）

7 && （三级逻辑运算）

8 ||

9 ? : （三元运算）

10 =、+=、-=、\*=、/=、%= （赋值运算）

案例：

1.(false || true) && !(false && true);

2.var bool = ((4 >= 6) || ("人" != "阿凡达")) && !(((12 \* 2) == 144) && true);

3. var a = 1;

var b = 2;

a++;

var num = ++a + (a++) + a + (++b) + b++;

console.log(num);

4. var a = 1+1&&3;

var b = 0 && 1+1;

var c = 1 || 2 && 3-1;

### **&&和||运算** ###

**&&链接两个boolean类型，有一个是false结果就是false。**

链接值不是布尔类型时，按照成布尔类型计算，结果本身不变。（非布尔）

例子： 1 = 2&&1； 0 = 0 && 1； 都是true取后面，都是false取前面。

**||链接两个boolean类型，有一个是true结果就是true。**

链接值不是布尔类型时，按照成布尔类型计算，结果本身不变。（非布尔）

例子： 2= 2||1； 1 = 0 || 1； 都是tru e取前面，都是false取后面。

## **流程控制** ##

*  顺序结构（程序正常执行流程从上往下，从左往右）（不用研究）

赋值运算时为从右往左执行，且左侧为属性或变量，不取值！！！

*  选择结构
    
    1.  If语句
    2.  Switch语句
 *  循环结构
    
    1.  for循环
    2.  while循环
    3.  do...while循环

### **循序结构** ###

程序正常执行顺序不必过多研究，特殊需求，后续特殊讲解。

### **选择结构** ###

共有两种，if语句和switch语句。If常用，switch为特殊情况使用，判断条件出现的情况特别多的时候用switch，其他时候if语句比较方便。

**If语句**

*  If语句用法有三种

1.  if(条件1)\{程序1\}
2.  if(条件1)\{程序1\}else\{程序2\}
3.  if(条件1)\{程序1\}else if(条件2)\{程序2\}...else\{程序n\}

案例：

输入名人，弹出他所参演的电视剧！如果没有这个人，那么弹框警示！

*  三目运算（也叫三元运算）（目或者元代表几个表达式）

三目运算可以替代部分if...else...功能，运算简单，使用方便，代码清晰。

表达式1？值1：值2

**Switch语句**

switch (值1) \{

case value1:

程序1；

break; // break 关键字会导致代码执行流跳出 switch 语句

case value2:

程序2；

break;

default:

程序3；

注意：

break可以省略，如果省略，代码会继续执行下一个case

switch 语句在比较值时使用的是全等操作符，因此不会发生类型转换

（例如，字符串 "10" 不等于数值 10）。

**switch案例：**

1.判断当天是星期几

2.把百分制转换成优良中可差

### **循环结构 (js中没有块级作用域,只有在function中有)** ###

共3种，for/while/do...while；可根据需求选择使用；

1.  遍历数组首选for循环，简单循环使用for。
2.  而while循环强调，不记循环次数（不知道循环多少次），首选while。
3.  最后do...while循环强调，无论怎样，至少执行一次是，使用do...while。

**for循环**

1.  执行流程

for (变量;条件1;条件2)\{ 执行程序 \}

执行过程：变量->条件1->执行程序->条件2->条件1->执行程序.....

直到条件1不成立，跳出循环。

1.  三个表达式均为可选，但是必须写分号！！！

for(;;)\{程序\} 死循环;

1.  案例1

6个简单案例，用来体验for循环如何使用。（利息和数列提升思维）

1 打印1到100

2 打印1到100的和

3 求1-100之间所有数的和、平均值

4 求1-100之间所有偶数的和、所有奇数的和

5 本金10000元存入银行，年利率是千分之三，每过1年，将本金和利息相加作为新的本金。计算5年后，获得的本金是多少？

6 有个人想知道，一年之内一对兔子能繁殖多少对？于是就筑了一道围墙把一对兔子关在里面。已知一对兔子每个月可以生一对小兔子，而一对兔子从出生后第3个月起每月生一对小兔子。假如一年内没有发生死亡现象，那么，一对兔子一年内（12个月）能繁殖成多少对？

1.  案例2

九九乘法表

打印宽9，长9的正方形。

打印直角/等边三角形(外循环控制行，内循环控制列,试着以上几种的打印倒三角)

1.  break和continue

break : 立刻跳出循环，不在执行该循环中的任何程序；

continue : 跳出本次循环，进入下一次循环中继续执行程序；

案例:

1.计算出1到100之间所有不能被7整除的整数之和（用continue）

2.求1到100之间所有不能被3整除的整数的第一个大于2000的和

3.求200-300之间所有的奇数的和,定义i=1开始

4.求200-300之间第一个能被7整数的数

**while循环**

语法规则：

var i = 0;

while(i<10)\{

程序1；i++

\};

可以使用死循环和break连用。

While(true)(程序1; if(条件1)\{break;\})

**do...while循环（一定会执行一次do中的程序）**

var i = 0；

do\{

程序1；

i++;

\}while(1<10);

## **案例：** ##

*  三种循环求和（1-100）;
 *  弹窗提示你爱我吗？选否就一直问。

## **数组** ##

### **数组的概述** ###

**为什么学习数组**

之前学习的数据类型，只能存储一个值。（字符串为一个值）

我们想存储多个值的时候可以使用数组。（字符串不方便）

比如：存储班级中所有学生的姓名。（\[“张三”,“李四”,“王五”\]）

**数组是什么**

数组是一种数据类型。（把很多数据装入一个盒子中，用的时候在取出来）

字面量为\[1,2,3\]。可以理解为：西瓜皮\[\]，西瓜肉123，西瓜子(，)

### **数组的定义** ###

**字面量定义**

var arr = \[1,2,3\];

**对象定义（数组的构造函数）**

var arr = new Array(参数);

参数位置一个数值时为数组长度，多个数值时为数组中的元素。

### **数组的操作** ###

**求数组的长度**

数组的长度 = 数组名.length；

可以通过修改数组的长度来改变数组中元素的个数，如果改小了，数组从后面删除元素。（伪数组的长度可以修改，但是不能修改里面的元素）

**获取数组中的元素**

数组中的指定元素 = 数组名\[索引值\];

数组的索引代表的是数组中的元素在数组中的位置，从0开始。

如果获取数组中元素是，数组名\[索引值\]，数组中没有这个索引（元素没那么多），系统不报错，而是给定值为undefined；

### **遍历数组（获取并操作数组中的每一个元素）（！！！重点！！！）** ###

var arr = [1,2,3];
    
    for(var i = 0;i<arr.length;i++){
    
        arr[i]  //如此操作数组中的每一个元素
    
    }

### **案例：** ###

*  把1-10之间所有的奇数，放到数组中
 *  1-10之间能被3整数的数字，存到数组中
 *  求一组数中的所有数的和和平均值
 *  求一组数中的最大值和最小值，以及所在位置
 *  将字符串数组用|或其他符号分割
 *  将数组中值为0的去掉，不为0的存入一个新数组
 *  翻转数组
 *  冒泡排序，从小到大(也可以倒序)

提示:

1.双重for循环。

2.指定轮数和次数

3.判断是否符合标准。如果符合标准交换位置。从小到大排列顺序，如果前面的比后面的大，那么交换位置。

### **调试（打断点）** ###

*  过去的调试（锻炼逻辑能力）

alert(变量); console.log(变量);

*  设置断点（项目太大，使用断点方便，清晰）

## **函数基础**  ##

### **函数概述** ###

**什么是函数**

函数就是可以重复执行的代码块。

**为什么要用函数**

因为一部分代码使用次数可能会很多，所以封装起来，需要的时候调用就可以了。

案例：求和；（总是求和）

### **函数的定义** ###

关键字function。

function 函数名 (参数) \{

程序

### **参数** ###

参与运算的变量。

为什么要设置参数？为了增强函数的功能性，和程序员的交互性，和函数的可拓展性。所以我们增加了参数这个概念。

**形参**

形式上参与运算的变量，无实际值，为实参占位置，就像一个躯壳一样。（可以理解为函数的内部变量外部无法访问）

**实参**

实际参与运算的变量的值。形参为他占位置，真实参与运算的变量的值。

注意js中没有方法重载的用法，有一个方法名对应一个方法体，就近原则

### **返回值** ###

有return函数就有值；没有return函数就没值；

函数程序运行后的结果外部需要使用的时候，我们不能直接给与，需要通过return返回。

总结：函数内部，return后面的值就是返回值；

作用：函数执行后剩下结果就是返回值。

函数执行完毕，会不会留下点儿什么，取决于有没有返回值

var temp = 函数名() = （功能）\+ 该函数的返回值;

**注意**

1. 如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined

2. 如果函数使用 return语句，那么在return后面的值，就成了函数的返回值

3. 如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值 也是：undefined

4. 函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退 出，也就是说return后面的所有其他代码都不会再执行。

### **案例** ###

1、求圆的周长和面积

2、求2个数中的最大值，求3个数中的最大值

3、求一组数中的最大值和最小值

4、翻转数组，返回一个新数组

5、对数组排序，从小到大

6、求阶乘

7、求1!+2!+3!+....+n! (求阶乘的和 )

8、判断一个数是否是素数

### **函数名、函数体和函数加载问题（重点记忆）** ###

1、函数名是什么

函数名 == 整个函数。

function fn()\{alert(1)\};

console.log(fn) == console.log(function fn()\{alert(1)\});

2、函数加载问题

JS加载的时候，只加载函数名，不加载函数体。所以如果想使用内部的成员变量，需要调用函数。

### **作业：** ###

1、求斐波那契数列Fibonacci中的第n个数是多少？

1 1 2 3 5 8 13 21...

1.  输入某年某月某日，判断这一天是这一年的第几天？（闰年）

（四年一闰，百年不闰，四百年在闰）

### **函数定义** ###

**函数声明（自定义声明）**

function f(a,b) \{

return a + b; \}

console.log(f(5,6));

**函数表达式**

var myFun = function (a,b)\{

return a + b;

console.log(myFun(6,7));

1.8.3 通过创建对象声明函数

var f = new Function("console.log(789)");

f();

### **变量和作用域（隐式全局变量和变量声明提升）** ###

**变量和作用域（函数中的变量需要函数执行后才能使用）**

*  全局变量（成员变量）

哪里都可以访问到的变量。

（进入script立即定义的变量和没有var的变量）

*  局部变量

函数内部的变量，只有函数内部可以访问到。

（函数内部用var定义的变量和形参）

**隐式全局变量**

隐式全局变量就是隐藏的全局变量不好被发现。

function fn（）\{

var a = b = c = 1; // b和c就是隐式全局变量

注意:

function fn（）\{

var a = b = c = 1; // b和c就是隐式全局变量（等号）

var a = 1; b = 2; c = 3; // b和c就是隐式全局变量（分号）

var a = 1 , b = 2 , c = 3; // b和c就不是隐式全局变量（逗号）

**变量声明提升（出现原因：预解析）**

函数中，定义变量在使用变量之后。

只提升变量名，不提升变量值，容易出现undefined。计算后形成NaN。

function fn()\{

// var aaa;

console.log(aaa);

var aaa = 1;

//提前看一眼  这个习惯叫什么呢？  预解析！
    
    //变量声明提升：在预解析的时候，成员变量和函数，被提升到最高位置，方便其他程序访问。
    
    //变量声明提升特点：成员变量只提升变量名，不提升变量值。但是，函数是所有内容全部提升。（function直接定义的）
    
    //函数范围内照样会出现变量声明提升
    
    //什么情况容易出现变量声明提升：使用变量在定义变量之前。

面试题:

1、-----------------------------------

var num = 10;

fun();

function fun()\{

console.log(num);

var num = 20;

2、-----------------------------------

var a = 18;

f1();

function f1()\{

var b=9;

console.log(a);

console.log(b);

var a = '123';

3、-----------------------------------

f2();

console.log(cc);

console.log(bb);

console.log(aa);

function f2()\{

var aa = bb = cc = 9;

console.log(aa);

console.log(bb);

console.log(cc);

### **小知识** ###

**函数不调用不执行**

**函数名就等于（整个函数）**

**加载函数的时候，只加载函数名，不加载函数体**

**参数相当于局部变量**

**就近原则使用变量**

**两个平级的函数中的变量不会相互影响（可以使用同样的形参名）**

## **函数高级** ##

### **匿名函数（了解）** ###

定义：匿名函数就是没有名字的函数。

作用：

1.  不需要定义函数名的时候。
2.  书写起来更简便。

匿名函数的调用有三种方法：

*  直接调用或自调用。(function()\{alert(1)\})()
 *  事件绑定。
 *  定时器。

### **函数是一种类型（了解）** ###

### **函数作为参数（了解）** ###

执行函数就等于：函数名+(); 整个函数+();

### **递归（理解）** ###

递归：就是函数自己调用自己。（懂得）

必须有跳出条件。

练习:

用递归求1+100和。

## **对象和面向对象** ##

### **JS中的对象（Object）基于面向对象** ###

什么是对象

**创建空白对象**

var obj = new Object();

自定义属性

Obj.属性名= 值;

自定义方法(行为)

Obj.方法名 = function ()\{

方法体;

**构造函数（就是为了创建对象实例）**

*  可以创建对象实例的函数。
 *  区别与普通函数，首字母大写。

function Student(name)\{ //创建一个构造函数

this.name = name; //构造函数中的对象指的是this。

this.sayHi = function () \{

console.log(this.name+"说：大家好！");

### **创建自定义对象** ###

**This**

*  this只出现在函数中。
 *  谁调用函数，this就指的是谁。
 *  new People(); People中的this代指被创建的对象实例。

**new**

1.开辟内存空间，存储新创建的对象（ new Object() ）

2.把this设置为当前对象

3.执行内部代码，设置对象属性和方法

4.返回新创建的对象

十进制的值 = 位值\*进制（位数-1） +位值\*进制（位数-1） +位值\*进制（位数-1）............

### **对象字面量和JSON** ###

对象的字面量就是一个\{\};而里面的属性和方法是以：键值对形式对应表现的。

（键值对）

//数组: var arr = \[\];

var obj = \{aaa: 111\}; var json = \{“aaa”:111\};

var obj = \{ sayHi: function () \{

console.log(1);

\} 也是可以调用的

对象和数组也可以作为其他对象的属性(不深究)

对象字面量定义方法和json很像，只有一点不同，json的key要求必须加“”;

### **Json组成** ###

JSON : JS中一种对象的表现形式

var json = \{“aaa”: 1,“bbb”: 2,“ccc”: 3,“ddd”: 4\}

Json由\{\}和key:value以及逗号组成，三部分。（只有一个键值对key:value时,可以没有逗号）

对象本身没有length,所以不能用for循环遍历

### **for...in...遍历JSON** ###

Var json = \{“aaa”: 1,“bbb”: 2,“ccc”: 3,“ddd”: 4\}

for(var key in json)\{

//key代表aaa,bbb.....等

//json\[key\]代表1,2,3....等

// json. key代表json这个对象的key属性的值，并不是key对应的变量值的属性。

console.log(json. key);

// json \[key\],代表的是json这个对象中key这个变量值对应的属性值。// console.log(json \[key\]);

练习: 制作一个json,然后遍历

### **参数和传值问题** ###

*  简单类型数据做参数，函数内部对参数的修改不应影响外部变量

简单类型传数值。

*  复杂类型数据做参数，函数内部对参数的修改会应影响外部变量

复杂类型传地址。

JS中是没有类这个概念的,在新标准中,出现了类的概念,JS中是不能用函数创建对象的,强类型语言中需要用类.

内置对象：js本身已经帮我们写好的对象。我们创建出来以后直接是使用就可以。不需要定义了

内置对象例如：Date，Array , Math , RegExp , Error , String...

学习内置对象，主要学习API，H5的方法，后期学到H5在说。

## **数组高级API** ##

### **学习API的方法** ###

**侧重点（四点）**

调用者：谁调用的。 参数：有无，几个。

返回值：有无，什么类型。 功能：干什么用的。

**自学方法**

*  离线
    
    1.  离线文档
 *  在线
    
    1.  W3C （前端标准W3CSchool）
    2.  MDN （开发者网站）https://developer.mozilla.org/zh-CN/
    3.  百度/谷歌/搜狗。。。

### **Array的内置方法** ###

数组 ,JS中的一个内置对象

**判断数组和转换数组。**

Instanceof: 是一个关键字。 判断A是否是B类型。

布尔类型值 = A Instanceof B ;

Array.isArray() //HTML5中新增 判断是不是数组

布尔类型值 = Array.isArray(变量) ;

调用者：Array 参数：变量(被检测值) 返回值：布尔类型

toString() //把数组转换成字符串，每一项用,分割

字符串 = 数组.toString();

valueOf() //返回数组对象本身

数组本身 = 数组.valueOf();

Join //根据每个字符把数组元素连起来变成字符串

字符串 = 数组.join(变量);

变量可以有可以没有。不写默认用逗号分隔，无缝连接用空字符串。

**数组增删和换位置（原数组讲被修改）**

push() //在数组最后面插入项，返回数组的长度

数组1改后的长度 = 数组1.push(元素1);

pop() //取出数组中的最后一项，返回最后一项

被删除的元素 = 数组1.pop();

unshift() //在数组最前面插入项，返回数组的长度

数组1改后的长度 = 数组1.unshift(元素1);

shift() //取出数组中的第一个元素，返回最后一项

被删除的元素 = 数组1.shift();

reverse() //翻转数组（原数组讲呗反转，返回值也是被反转后的数组）

反转后的数组 = 数组1.reverse();

sort(); //给数组排序，返回排序后的数组。如何排序看参数。

从小到大排序后的数组 = 数组1.sort(function(a,b)\{

return a-b;

\});

无参：按照数组元素的首字符对应的Unicode编码值从小到大排列数组元素。

带参：必须为函数（回调函数--callback）。函数中带有两个参数，代表数组中的 前后元素。如果计算后（a-b），返回值为负数，a排b前面。等于0不动。 返回值为正数，a排b后面。

**了解方法**

concat() //把参数拼接到当前数组

新数组 = 数组1.concat(数组2);

slice() //从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始

新数组 = 数组1.slice(索引1，索引2);

splice()//删除或替换当前数组的某些项目，参数start,deleteCount,options(要替换的项目)

新数组 = 数组1.splice(起始索引，结束索引，替换内容);

indexOf()、lastIndexOf() //如果没找到返回-1

索引值 = 数组.indexOf/lastIndexOf(数组中的元素);

迭代方法 不会修改原数组

every()、filter()、forEach()、map()、some()

数组/boolean/无 = 数组.every/filter/forEach/map/some(

function(element,index,arr)\{

程序和返回值；

);

//对数组中每一项运行以下函数，如果都返回true，every返回true，如果有一项返回false，则停止遍历 every返回false；不写默认返回false

array.every(function(item,index,arr) \{

\})

//对数组中每一项运行以下函数，该函数返回结果是true的项组成的新数组  
var arr = array.filter(function(item,index,arr) \{  
\});  
console.log(arr);

//遍历数组  
array.forEach(function(item,index,arr)\{  
\});

//对数组中每一项运行以下函数，返回该函数的结果组成的新数组  
var arr = array.map(function(item,index,arr) \{  
return "\\"" + item + "\\"";  
\})

//对数组中每一项运行以下函数，如果该函数对某一项返回true，则some返回true  
var b = array.some(function(item,index,arr) \{  
if (item == "ww") \{  
return true;  
\}  
return false;  
\});

**清空数组**

var array = \[1,2,3,4,5,6\];

array.splice(0,array.length); //删除数组中所有项目

array.length = 0; //length属性可以赋值，其它语言中length是只读

array = \[\]; //推荐

**练习**

1.将一个字符串数组输出为|分割的形式，比如“刘备|张飞|关羽”。使用两种方式实现

2.将一个字符串数组的元素的顺序进行反转。\["a","b","c","d"\] \["d","c","b","a"\]。使用两种种方式实现。提示：第i个和第length-i-1个进行交换

3.找到数组中每个字母出现的次数\["c","a","z","a","a"\]

4.工资的数组\[1500,1200,2000,2100,1800\],把工资超过2000的删除

## **事件** ##

### **概述** ###

JS是以事件驱动为核心的一门语言。

### **事件三要素** ###

事件源、事件、事件驱动程序。

三句话：获取事件源、绑定事件、书写事件驱动程序。

获取事件源：document.getElementById(“box”);

绑定事件： box.onclick = function()\{ 程序 \};

书写事件驱动程序：以后要学习的关于DOM的操作。

体验事件: 点击盒子，弹出对话框alert(1)。

1.事件源（引发后续事件的标签）

2.事件（js已经定义好，直接使用）

3.事件驱动程序（对样式和html的操作）（DOM操作）

cursor：pointer设定鼠标的形状为一只伸出食指的手，这也是绝大多数浏览器里面鼠标停留在网页链接上方时候的样式 , 另外可以选择其他鼠标指针样式，常用的有default 箭头，crosshair 十字，progress 箭头和沙漏等等.

需要掌握的 获取事件源的三种方式:

var div = document.getElementById("box");

var arr1 = document.getElementsByTagName("div");

var arr2 = document.getElementsByClassName("leiming");

绑定事件的方法:

1.匿名绑定

2.用函数名绑定

3.行内绑定

可以操作标签的属性和样式:

div.className = "aaa";

div.style.width = "200px";

div.style.height = "200px";

div.style.backgroundColor = "red";

需求：点击盒子,改变盒子的宽高颜色等样式，并弹出对话框alert(1)

**事件有哪些**

### **案例** ###

1.  京东广告栏（类）
2.  京东狗（src）（this）
3.  手机京东（前两个结合）

## **DOM概述** ##

### **解析过程** ###

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的 是该元素的属性。

### **DOM (文档对象模型)** ###

document是文档对象模型的一部分。

DOM是一个复合的数据类型。

### **DOM的数据结构（树状）** ###

### **HTML的组成部分为节点（ Node ）** ###

在HTML当中一切都是节点……

由结构图中我们可以看到，整个文档就是一个文档节点。

每一个HMTL标签都是一个元素节点（标签）。

标签中的文字则是文字节点。（文本）

标签的属性是属性节点。（属性）

### **DOM节点的获得** ###

操作节点，必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素

document.getElementById("demo");

通过标签名找到 HTML 元素

document.getElementsByTagName("div");

通过类名找到 HTML 元素

document.getElementsByClassName("a");

通过类名查找 HTML 元素在 IE 5,6,7,8 中无效

标签=document.getElementById("demo"); 通过ID获得标签

他的返回值是一个标签，可以直接使用。获得属性值，设置属性。

标签数组= document.getElementsByTagName("div"); 通过标签名获得标签数组

标签数组= document.getElementsByClassName("a");通过类名获得标签数组

他们两个的返回值是标签数组，习惯性是遍历之后再使用。

特殊情况：数组中的值只有1个。

document.getElementsByTagName("div")\[0\];取数组中第一个元素

document.getElementsByClassName("a")\[0\];取数组中第一个元素

### **DOM 访问关系（节点的获得）** ###

节点的访问关系，是以属性的方式存在的。

DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

**父节点 （ parentNode ）**

调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.

案例：

1.  通过子盒子设置父盒子的背景色。
2.  关闭二维码

**兄弟节点**

Sibling就是兄弟的意思。

Next：下一个的意思。

Previous:前一个的意思。

nextSibling：调用者是节点。IE678中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）。

nextElementSibling：在火狐谷歌IE9都指的是下一个元素节点。

总结：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling

下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling

previousSibling：调用者是节点。IE678中指前一个元素节点（标签）。在火狐谷歌IE9+以后都指的是前一个节点（包括空文档和换行节点）。

previousElementSibling：在火狐谷歌IE9都指的是前一个元素节点。

总结：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling。

上一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling

**单个子节点**

firstChild：调用者是父节点。IE678中指第一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点）。

firstElementChild:在火狐谷歌IE9都指的第一个元素节点。

第一个子节点=父节点.firstElementChild || 父节点.firstChild

lastChild:调用者是父节点。IE678中指最后一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）。

lastElementChild：在火狐谷歌IE9都指的最后一个元素节点。

第一个子节点=父节点.lastElementChild|| 父节点.lastChild

**所有子节点**

childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点 （他还是W3C的亲儿子 ）

火狐 谷歌等高本版会把换行也看做是子节点

nodeType==1时才是元素节点(标签)

nodeType == 1 表示的是元素节点 记住 元素就是标签

nodeType == 2 表示是属性节点 了解

nodeType == 3 是文本节点 了解

子节点数组 = 父节点.childNodes; 获取所有节点。

children：非标准属性，它返回指定元素的子元素集合。

但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。

children在IE6/7/8中包含注释节点

在IE678中，注释节点不要写在里面。

子节点数组 = 父节点.children; 用的最多。

**知识补充**

节点自己.parentNode.children\[index\];随意得到兄弟节点。

作为了解内容：

function siblings(elm) \{

var a = \[\];

var p = elm.parentNode.children;

for(var i =0,pl= p.length;i<pl;i++) \{

if(p\[i\] !== elm)

a.push(p\[i\]);

return a;

定义一个函数。必须传递自己。定义一个数组，获得自己的父亲，在获得自己父亲的所有儿子（包括自己）。遍历所有的儿子，只要不是自己就放进数组中。

**要明白两个属性（！！！重点！！！）**

parentNode 和 children 这两个属性。

### **DOM节点操作 （！！！！！重点！！！！！）** ###

节点的访问关系都是属性。节点的操作都是函数或者方法。

**创建节点**

使用方法是这样的document.createElement();

新的标签（节点） = document.createElement(“标签名”);

**插入节点（使用节点）**

使用方法： 父节点.appendChild();

父节点.appendChild(新节点); 父节点的最后插入一个新节点

使用方法：父节点.insertBefore(要插入的节点，参考节点)；

父节点.insertBefore(新节点,参考节点)在参考节点前插入;

如果参考节点为null，那么他将在节点最后插入一个节点。

**删除节点**

用法：用父节点删除子节点。

父节点.removeChild（子节点）；必须指定要删除的子节点

节点自己删除自己：

不知道父级的情况下，可以这么写：node.parentNode.removeChild(node)

**复制节点 （ oldNode.cloneNode（true） ）**

想要复制的节点调用这个函数cloneNode()，得到一个新节点。 方法内部可以传参，如果是true，深层复制，如果是false，只复制节点本身。

新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点

用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）

**节点属性（节点.属性）**

两种方法:

属性节点获取 节点.属性 = 值;

获取：getAttribute(名称)

设置：setAttribute(名称, 值)

删除：removeAttribute(名称)

注意：IE6、7不支持。

调用者：节点。 有参数。 没有返回值。

每一个方法意义不同。

## **DOM详解（属性操作）** ##

### **DOM元素** ###

DOM就是html文档的模型抽象。数据以树的形式在内存中排列。

节点就是DOM的组成。是一个对象，有属性和方法。获取方式有很多种。

节点分为元素节点（标签），文本节点，属性节点。

区分方法：nodeType: 1是标签,2是属性,3是文本

### **案例** ###

href=”\#” è href=”javascript:;”

1.切换图片（a连接+图片）

2.显示和隐藏盒子

3.美女相册（placehold.it网站,获取 xxx \* xxx 大小的图片）

### **value和innerHTML和innerText和textContent** ###

1.老版本的火狐不支持innerText，支持textContent

2.p不能嵌套p。h1不能嵌套h1。a连接内部不能嵌套a连接

## **DOM详解** ##

### **DOM案例** ###

表单元素的常用属性:type,value.checked,selected,disabled

1.  显示二维码(复习)

需求：鼠标放到a链接上，显示二维码 , 鼠标移开a链接，隐藏二维码

1.  禁用文本框
2.  获取/失去焦点输入事件。
3.  用户注册高亮显示
4.  select选鲤鱼。
5.  为文本框赋值/取值并打印
6.  全选反选

**菜单练习,属性获取修改和删除（属性绑定）**

属性绑定的两种方式不能交换使用，赋值和获取值必须使用用一种方法。

元素节点.属性（元素节点\[属性\]）:绑定的属性值不会出现在标签上。

get/set/removeAttribut: 绑定的属性值会出现在标签上。

1.teb栏。（排他思想）（简单写法和兼容写法）

1.点亮盒子。

（第三种体验双重for循环，第一种打印三角形，第二种冒泡排序）

2.弹出索引值。

3.属性绑定。

4.两个for循环变一个

2.自定义属性（兼容写法）

1.直接绑定属性：不会再标签中显示（没有的属性）；

2.标签中的自定义属性，不能box.aaa获取

（火狐谷歌IE9+）(IE678可以获取)

3.get/setAttribute（）；可以

**之前之后的所有兄弟节点（封装，菜单案例）**

**节点关系。（父节点、兄弟节点、子节点、所有子节点）**

1.子节点。（京东头）

2.nodeType/nodeName/nodeValue:

元素/属性/文本 (123) / 标签:属性名:\#text / null:属性值:内容

document.getElementById("box");//元素节点

ele.getAttributeNode("id");//属性节点

ele.firstChild;//文本节点

3.childNodes实现隔行变色,使用childNodes

4.父节点/所有子节点/兄弟节点

### **总结** ###

//父节点

div.parentNode;

//访问兄弟节点

div.previousSibling;

div.previousElementSibling;

div.nextSibling;

div.nextElementSibling;

//访问单个子节点

div.firstChild;

div.firstElementChild;

div.lastChild;

div.lastElementChild;

//获取所有子节点

div.childNodes;

div.children;

//获取指定的兄弟节点

div.parentNode.children\[index\];

//获取所有的兄弟节点（返回值是一个数组）

function fn(ele)\{

//定义一个新数组，装所有的兄弟元素，将来返回

var newArr = \[\];

var arr = ele.parentNode.children;

for(var i=0;i<arr.length;i++)\{

//判断，如果不是传递过来的元素本身，那么添加到新数组中。

if(arr\[i\]!==ele)\{

newArr.push(arr\[i\]);

// newArr\[newArr.length\] = arr\[i\];

return newArr;

### **工具类的封装tools.js(了解,尝试)** ###

案例: 菜单练习(利用封装方法)

高级隔行变色

百度换肤

### **DOM创建元素** ###

第一种创建方式：document.write();

第二种：直接利用元素的innerHTML方法。（innerText方法不识别标签）

第三种：利用dom的api创建元素

document.createElement(“节点”);创建元素

append Child(新节点);插入子元素

insertBefore(新节点，参照节点);在指定元素前插入

removeChild();删除子元素

replaceChild(新节点，旧节点);替换子元素

cloneNode(true)克隆元素,深层复制

创建，添加，删除，替换

案例: 半透明的遮蔽层

## **内置对象BOM** ##

Window对象 Browser(浏览器)OM

window是bom的顶级对象。通常情况下，可以省略

alert(2); prompt();confirm();

成员变量也是window的一个属性而已

alert(window.aaa);

alert(aaa === window.aaa);

自定义函数也是window的一个方法

console.log(window.fn);

新窗口 = window.open(地址,target属性或窗口名称,新窗口的参数,属性名:属性值,…..);

window.open("http://www.baidu.com","\_blank");

location.href = "http://www.baidu.com";打开新窗口(页签)

window.close();关闭本页面

新窗口.moveTo(500,500);

新窗口的参数:

featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。

fullscreen= \{ yes/no/1/0 \} 是否全屏，默认no

channelmode= \{ yes/no/1/0 \} 是否显示频道栏，默认no

toolbar= \{ yes/no/1/0 \} 是否显示工具条，默认no

location= \{ yes/no/1/0 \} 是否显示地址栏，默认no

directories = \{ yes/no/1/0 \} 是否显示转向按钮，默认no

status= \{ yes/no/1/0 \} 是否显示窗口状态条，默认no

menubar= \{ yes/no/1/0 \} 是否显示菜单，默认no

scrollbars= \{ yes/no/1/0 \} 是否显示滚动条，默认yes

resizable= \{ yes/no/1/0 \} 是否窗口可调整大小，默认no

width=number 窗口宽度（像素单位）最小100px

height=number 窗口高度（像素单位）

top=number 窗口离屏幕顶部距离（像素单位）仅IE

left=number 窗口离屏幕左边距离（像素单位）

回退

history.go(-1); history.back();

setInterval(执行谁,多长时间执行一次)

循环定时器；周而复始的执行（循环执行）

setTimeout(执行谁,多长时间执行一次)

炸弹定时器；用完以后立刻报废（只执行一次）

clearInterval(timer); 停止定时器

练习:

5秒关闭广告

关闭广告栏(逐渐消失)

### **Date** ###

创建时间对象

new Date();

new Date("2016/09/06 00:00:00");

new Date(2016, 1, 27);

new Date('Wed Jan 27 2016 12:00:00 GMT+0800 (中国标准时间)');

后两种兼容性不好，不推荐使用

date.getDate() 获取日 1-31

date.getDay () 获取星期 0-6（0代表周日）

date.getMonth () 获取月 0-11（1月从0开始）

date.getFullYear () 获取完整年份（浏览器都支持）

date.getHours () 获取小时 0-23

date.getMinutes () 获取分钟 0-59

date.getSeconds () 获取秒 0-59

date.getMilliseconds () 获取毫秒 （1s = 1000ms）

date.getTime () 返回累计毫秒数(从1970/1/1午夜)

获取当前时间距离1970/01/01的毫秒值的方式

Date.now();

\+new Date();

new Date().getTime();

new Date().valueOf();

案例：模拟日历、倒计时

### **String** ###

**给索引查字符(charAt/charCodeAt)**

1 charAt，获取相应位置字符（参数： 字符位置）

注释：字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。

2 charCodeAt获取相应位置字符编码（参数： 字符位置）

charAt()方法和charCodeAt()方法用于选取字符串中某一位置上的单个字符

区别：charCodeAt()方法，它并不返回指定位置上的字符本身，而是返回该字符在Unicode字符集中的编码值。如果该位置没有字符，返回值为NaN.

字符/字符编码 = Str.charAt/charCodeAt(索引值);

需求：求一个字符串占有几个字符位。(I love my country!我你爱中国！)

**给字符查索引（indexOf/lastIndexOf）**

1 indexOf，从前向后索引字符串位置（参数： 索引字符串）

从前面寻找第一个符合元素的位置

2 lastIndexOf，从后向前索引字符串位置（参数：索引字符串）

从后面寻找第一个符合元素的位置

找不到则返回 \-1

索引值 = str.indexOf/lastIndexOf(想要查询的字符);

**url 编码和解码（了解）**

URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码，以便发送给浏览器。有效的URI中不能包含某些字符，例如空格。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解。

encodeURIComponent(url) 函数可把字符串作为 URI 组件进行编码

decodeURIComponent(encode) 函数可把字符串作为 URI 组件进行解码

**字符串的链接**

新字符串 = str1.concat(str2)； 链接两个字符串

**字符串的截取**

1. slice，截取字符串（参数：1，截取位置【必须】，2终结点）

字符串 = str.slice（索引1，索引2); 两个参数都是索引值。

(1).（2,5） 正常包左不包右。

(2). ( 2 ) 从指定的索引位置剪到最后。

(3).（-3） 从倒数第几个剪到最后.

(4).（5,2） 前面的大，后面的小，空。

2. substr，截取字符串（参数：1，截取位置【必须】，2截取长度）

字符串 = str.substr（参数1，参数2); 1索引值,2长度。

第一个参数为从索引位置取值，第二个参数返回字符长度。

(1).（2,4） 从索引值为2的字符开始，截取4个字符。

(2).（1） 一个值，从指定位置到最后。

(3).（-3） 从倒数第几个剪到最后.

(4). 不包括前大后小的情况。

3. substring 同slice

字符串 = str.substring（参数1，参数2); 两个参数都是索引值。

不同1：参数智能调转位置。

不同2：参数负值，将全部获取字符串。

（1）.（2,5） 正常包左不包右。

(2). ( 2 ) 从指定的索引位置剪到最后。

(3). （-3） 获取全部字符串.

(4). （5,2） 前面的大，后面的小，不是空。（倒着找）

**特殊方法简介**

trim() //只能去除字符串前后的空白

replace() //替换 str.replace(/aaa/gi,“bbb”);

g 全局替换 i保证大小写一致,一起被识别替换

split(“ | ”) //字符串变数组

toLowerCase(); toUpperCase(); // 转换大小写

案例 :

截取字符串"我爱你中国，我亲爱的中国的母亲"，中的"中国，我亲爱的"；

"abcoefoxyozzopp"查找字符串中所有o出现的位置

### **Math** ###

Math.abs(); 取绝对值

Math.floor(); 向下取整

Math.ceil(); 向上取整

Math.round(); 四舍五入取整

Math.random(); 随机数0-1

## **offset家族** ##

### **三大家族和一个事件对象** ###

三大家族（offset/scroll/client）,其实就是DOM的一些属性

事件对象/event （事件被触动时，鼠标和键盘的状态）（通过属性控制）

### **Offset家族简介** ###

offset这个单词本身是 -- 偏移，补偿，位移的意思。

js中有一套方便的获取元素尺寸的办法就是offset家族；

offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent

共同组成了offset家族。

**offsetWidth和offsetHight （检测盒子自身宽高+padding+border）**

这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。

offset宽/高 = 盒子自身的宽/高 + padding +border；

offsetWidth = width+padding+border；

offsetHeight = Height+padding+border；

**offsetLeft和offsetTop （检测距离父盒子有定位的左/上面的距离）**

返回距离上级盒子（带有定位）左边的位置

如果父级都没有定位则以body为准

offsetLeft 从父亲的padding 开始算,父亲的border 不算。

在父盒子有定位的情况下，offsetLeft == style.left(去掉px并在行内赋值)

**offsetParent （检测父系盒子中带有定位的父盒子节点）**

1、返回该对象的父级 （带有定位）

如果当前元素的父级元素没有进行CSS定位 （position为absolute或 relative，fixed）， offsetParent为body。

2、如果当前元素的父级元素中有CSS定位 （position为absolute或 relative，fixed）， offsetParent取最近的那个父级元素。

### **offsetLeft和style.left区别** ###

*  最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。 如果父系盒子中都没有定位，以body为准。
 *  offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
 *  offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
 *  如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。style.left只能获取行内式，如果没有返回“”

style.left在=的左边和右边还不一样。（左边的时候是属性，右边的时候是值）

## **动画和封装** ##

### **动画定义** ###

运动的图片。（让图片或者图画动起来）

### **动画的种类** ###

**闪现（基本不用）**

**匀速（今天重点）**

动画原理： 盒子未来的位置 = 盒子现在的位置 + 步长；

**缓动（以后重点）**

### **动画原理** ###

盒子的位置 = 盒子本身所在的位置+步长。

### **体验匀速动画** ###

style.left赋值，用offsetLeft获取值。

style.left获取值不方便，获取行内式，如果没有事“”；容易出现NaN；

offsetLeft获取值特别方便，而且是现成number方便计算。因为他是只读的不能赋值。

练习:动画封装

BUG1：点击多次以后，越来越快。(定时器重复创建导致的)

BUG2:无法返回。 原因就是步长不能为恒定值。(原因就是不长不能为恒定值，返回要为负数)

BUG3:二次点击不停止问题。(当满足 === 条件时再次点击，就再也不会满足了，最后一步直接赋值到目标位置（闪现）)

## **案例** ##

### **焦点图** ###

难点1：先点亮盒子，然后移动图片。

2：移动图片的目标位置都是负值。

（负的图片的个数乘以图片的宽，到0之间）（负数）

3：获取盒子的索引值，我们才能知道，ul向右移动几张图片。

### **切换图** ###

难点：1.为什么移动的图片是负值。（参看上面的案例难点2）

1.  为什么要计数器。

（我们需要一个值， 记录当前图片，方便后续操作）

1.  为什么方法1里的num--；方法2里面的num++。

我们要看之前的图片，就要num--，要看后面的图片就要num++；

图片想左走显示后面的，图片向右走显示前面的。

### **无缝滚动** ###

## **缓动动画** ##

### **三个函数** ###

都是在数轴上向上或者向下取整。

Math.ceil() 向上取整

Math.floor() 向下取整

Math.round(); 四舍五入

### **缓动动画原理** ###

leader=leader+(target-leader)/10;
    
        盒子位置 = 盒子本身位置+（目标位置-盒子本身位置）/ 10；

动画原理 = 盒子位置 \+ 步长（步长越来越小）。

### **体验缓动动画** ###

### **分析为什么没有到达指定位置** ###

盒子本身位置 目标位置 步长 已经到达了的位置

0 400 0 0

0 400 40 40

40 400 36 76

76 400 32.4 108.4

.........

JS实际运算时会四舍五入取整，然后计算。

396(四舍五入获取) 400 0.4 396.4

....

### **offsetLeft和style.left的值的获取问题** ###

获取盒子距离左侧具有定位的父盒子的距离（没有的body），四舍五入取整。

Style.left获取的是具体值。 （赋值的时候也是直接赋值）

### **按例：筋斗云** ###

鼠标悬停和鼠标移开不会影响初始化值，只有点击影响。而移开的情况下，span移动到计数器的位置。

## **第二家族scroll** ##

### **Scroll家族组成** ###

**ScrollWidth和scrollHeight（不包括border）**

检测盒子的宽高。（调用者：节点元素。）

盒子内容的宽高。（如果有内容超出了，显示内容的高度）

scrollWidth和scrollHeight不包括border和margin

scrollWidth = width + padding;

IE8以下，不包括IE8，为盒子本身内容的多少。

**scrollTop和scrollLeft**

网页，被浏览器遮挡的头部和左边部分。

兼容有问题(火狐和谷歌就不一样)

window.onscroll只能使用一次，多了一最后一次为准

**它有兼容性问题(火狐演示)**

DTD:兼容老版本浏览器,使老版本浏览器可以遵循一些新的标准

*  未声明 DTD（谷歌只认识body, ie9+以上认识它）

没有dtd约束的 : document.title = document.body.scrollTop;

*  已经声明DTD（IE678只认识documentElement, ie9+以上任何时候）

有dtd约束的 : document.title = document.documentElement.scrollTop;

*  火狐/谷歌/ie9+以上支持的(不管有没有DTD)

window.pageXOffset window.pageYOffset

ie9+以上:

IE9+推翻了之前的设计理念,创造斯巴达 edge

是否声明DTD: document.compatMode “BackCompat”未声明”CSSCompat”已声明

**兼容写法**

var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

### **获取title、body、head、html标签** ###

document.title --- 文档标题；

document.head --- 文档的头标签

document.body --- 文档的body标签；

document.documentElement --- 这个很重要

它表示文档的html标签， 也就是说，基本结构当中的html标签并不是通过document.html 去访问的，而是document.documentElement。

### **Json回顾** ###

Json是一种和数组类似的数据类型。

不同的是：数组中的元素是单一的。

而json中的元素，是以键值对的形式出现的。（key: value）

**定义方法**

var json = \{ key1：value1,key2：value2,key3：value3... \};

数组是通过索引值获取数组中的元素的，而json是通过key获取元素的。

**获取内容**

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。使用JSON进行数据传输的优势之一。表示方法为键值对，key：value。

var myjson=\{k1:v1,k2:v2,k3:v3...\}

获取方式：v1 == myjson.k1 v2 == myjson.k2

Json一般就是被当做一个配置单用；

**Json的遍历（了解）**

用的是新的语法方法：for ... in ....

### **Scroll()的封装** ###

**判断页面有没有DTD**

document.compatMode === "BackCompat" 注意大小写

BackCompat 未声明

CSS1Compat 已经声明

**只要判断不是undefined****就可以调用pageYOffset**

**只要判断是CSS1Compat****就可以调用documentElement**

**只要判断是**BackCompat**就可以调用** **body**

**return** \{  
"top": window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop,  
"left": window.pageYOffset || document.documentElement.scrollLeft || document.body.scrollLeft  
\}

### **案例** ###

**固定导航栏**

**广告跟随**

**返回头部小火箭 （原理类似：缓动框架。只不过是多一个页面滚动）**

## **小知识** ##

### **onscroll事件** ###

只要页面滚动无论向左向右，向上向下，哪怕只有1px，都会触动这个事件

### **屏幕跳转** ###

window.scrollTo

方法可把内容滚动到指定的坐标。

格式：

scrollTo(xpos,ypos)

xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。

ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标

## **前端基本功—javascript 第八天** ##

## **今日内容：** ##

1.  **案例：楼层跳跃**
2.   **事件对象（event）**
3.   **案例**
4.   **鼠标跟随、显示鼠标坐标、放大镜、拖拽、模拟滚动条**

## **scroll家族** ##

### **案例** ###

**楼层跳跃**

100%子盒子会继承父盒子的宽高。父盒子继承body宽高。body继承html的宽高。

盒子属性：auto:适应盒子自身的宽度或者高度。（对自己负责）

盒子属性：100%:适应盒子父盒子的宽度或者高度。（对爸爸负责）

## **事件对象（event）** ##

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。

比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。（类似Date）

普通浏览器支持 event（带参，任意参数）

ie 678 支持 window.event（无参，内置）

总结：他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。

### **事件对象的获取（event的获取）** ###

IE678中，window.event

在火狐谷歌中，event或者，在事件绑定的函数中，加参，这个参数就是event.

box.onclick = function (aaa)\{ aaa就是event \}

### **兼容获取方式有两种：** ###

不写参数直接使用event;

写参数，但是为event....

var event = event || window.event;(主要用这种)

### **event内容重要内容** ###

### **screenX、pageX和clientX的区别** ###

pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）

screenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）

clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）

### **pageY和pageX的兼容写法（低版本不支持,很重要）** ###

在页面位置就等于 = 看得见的+看不见的

pageY/pageX=event.clientY/clientX+scroll().top/scroll().left

### **新事件（onmousemove）** ###

只要鼠标在绑定该事件的事件源上移动，哪怕1像素，也会触动这个事件。

（这个事件可以直接或者间接的替代定时器）

点击鼠标跟随

鼠标在盒子中的位置

### **案例** ###

**放大镜**

注意1：CSS部分要注意：大图片/大盒子 = 小图片/显示部分

注意2：(大图片/大盒子 = 小图片/黄盒子)

大盒子滑动的距离/小盒子滑动的距离 = 大盒子滑倒头/小盒子滑倒头

大盒子滑倒头/小盒子滑倒头（他们的距离如何获取呢？）

（大图片-大盒子）（两边各有一伴儿大盒子的距离是没有走的）
    
    （小盒子-小图片）（两边各有一伴儿小盒子的距离是没有走的）

注意3：

onmouseover、onmouseout事件给定一个盒子，子元素也会获取这个事件。

替代方法：onmosueenter和onmouseleave.

**拖拽案例**

//禁止文本选中（选中后取消）

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

**模拟滚动条**

## **第三大家族client** ##

### **主要成员** ###

1、clientWidth 获取网页可视区域宽度（两种用法）

clientHeight 获取网页可视区域高度（两种用法）

调用者不同，意义不同：

盒子调用： 指盒子本身。

body/html调用： 可视区域大小。

2、clientX 鼠标距离可视区域左侧距离（event调用）

clientY 鼠标距离可视区域上侧距离（event调用）

3、clientTop/clientLeft 盒子的border宽高

### **三大家族区别（三大家族总结）** ###

**Width和height**

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

scrollWidth = 内容宽度（不包含border）

scrollHeight = 内容高度（不包含border）

**top和left**

offsetTop/offsetLeft ：

调用者：任意元素。(盒子为主)

作用：距离父系盒子中带有定位的距离。

scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)

调用者：document.body.scrollTop/.....(window)

作用：浏览器无法显示的部分（被卷去的部分）。

clientY/clientX:（clientTop/clientLeft 值的是border）

调用者：event.clientX(event)

作用：鼠标距离浏览器可视区域的距离（左、上）。

### **client家族特殊用法之:检浏览器宽/高度(可视区域)** ###

### **Onresize事件** ###

只要浏览器的大小改变，哪怕1像素，都会触动这个事件。

### **案例：根据浏览器可视区域大小，给定背景色** ###

### **事件总结** ###

区分：

1.window.onscroll 屏幕滑动

2.window.onresize 浏览器大小变化

3.window.onload 页面加载完毕

4.div.onmousemove 鼠标在盒子上移动（注意：不是盒子移动！！！）

5.onmouseup/onmousedown == onclick

### **获得屏幕宽高** ###

window.screen.width

分辨率是屏幕图像的精密度，指显示器所能显示的像素有多少。

我们的电脑一般：

横向1280个像素点，

纵向960个像素点。

我们看电影的时候是满屏和半屏的，就是这。

## **冒泡** ##

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。(BUG)

（本来应该一人做事一人当，结果，我做错了事情，你去告诉我妈）

什么是冒泡：子元素事件被触动，父盒子的同样的事件也会被触动。

取消冒泡就是取消这种机制。

### **阻止冒泡** ###

w3c的方法是：（火狐、谷歌、IE11）

event.stopPropagation()

IE10以下则是使用：event.cancelBubble = true

兼容代码如下：

var event = event || window.event;

if(event && event.stopPropagation)\{

event.stopPropagation();

\}else\{

event.cancelBubble = true;

### **addEventListener(参数1，参数2，参数3)** ###

调用者是：事件源。 参数1：事件去掉on 参数2 ：调用的函数

参数3：可有可无。没有默认false.false情况下，支持冒泡。true支持捕获。

//兼容获取事件触动时，被传递过来的对象

// var aaa = event.target || event.srcElement;

var aaa = event.target?event.target:event.srcElement;

### **案例** ###

**点击空白隐藏模态框**

Document事件的绑定，无论绑定什么事件，只要事件被出发，传递过来的应该是指定的元素本身，而不是document。

**事件委托**

## **缓动框架** ##

### **封装框架遇到的两个问题** ###

原有的方法：div.style.width :这个方法比较固定，不能用变量或者字符串的形式更换属性，不方便我传值获取属性，和给属性赋值。

属性值的获取和属性的赋值

div.style["width"] = "5000px";

可以通过传字符串或者变量的方式获取和赋值属性。

缺点：他的操作完全是对行内式CSS来操作的。赋值的时候毫无问题。但是，获取值的时候有问题了。

### **获取任意类型的CSS样式的属性值** ###

Div.style.width

div.currentStyle.width

Window.getComputedStyle(div,null).width;

他们的公共使用变量或者字符串获取属性值的方法都是：去掉属性和点，然后加上中括号和属性的字符串形式。

div.style\[“width”\];

div.currentStyle\[“width”\];

Window.getComputedStyle(div,null)\[“width”\];

### **开闭原则** ###

定义一个变量。数据可以修改。但是，只能修改成为两个值。

### **回调函数** ###

程序执行完毕，在次执行的函数。

在函数中给指定的函数定义一个形参，然后程序执行到最后，调用这个形参后面加一个括号。

### **案例（缓动框架的应用）** ###

**手风琴案例**

鼠标放上去的时候，该li变大的速度太快，而其他的li变小的速度没有跟上。导致盒子右侧出现了空白。

**360关闭广告**

### **缓动框架存在的问题** ###

很多属性我们的框架无法获取值和赋值。

border-radius: 1px 21px 41px 1px ;

opacity: 0.5;

background: rgba(0,0,0,.4);

z-index: 1;

**主要处理两个**

**第一个是透明度（旋转木马）**

1.  值为小数，获取的时候要特殊处理。
2.  兼容问题。IE678不识别opacity;

**第二个是层级（旋转木马）（由需求决定的）**

层级的提高是一次性直接提到最高，不需要一点一点儿的缓动。

### **缓动框架案例** ###

**旋转木马**

原理：我们先定义一个数组，数组中的元素是json；json中的元素是属性。

点击一个按钮，按顺序更换数组中元素的位置。

（如果我们想完成旋转木马，只需要更换数组中元素的位置）

步骤：

1.  我们必须让页面加载的时候把所有的属性加载出来，让我看看。（核心）
2.  鼠标放到大盒子上显示对应的左右切换按钮，移开隐藏
3.  获取两个按钮。对他们进行事件绑定。对他们进行判断。
4.  如果是左侧的按钮执行一套程序，如果是右侧的按钮执行另一套程序。
5.  绑定按钮的函数，一个是正转，一个是反转。（传参确定）
6.  调换相应的数组对应的元素。（先删除谁，在怎么添加）

**正转反转的问题**

最开始是：12345；我想让他变成：23451

把1删除，在最后添加1；

在数组json中，删除第一个元素，添加到最末尾。（正转）

在数组json中，删除最后一个元素，添加到第一位。（反转）

**函数节流**

定义一个变量，只有函数执行完毕在去执行下一个。

## **正则表达式（RegExp）** ##

### **概述** ###

正则表达式（英语：Regular Expression）

本质：用来记录文本规则的代码

（为字符串定义规则，为输入内容定义规则！）

应用非常广泛，如：表单验证、高级搜索、生化科学

（有一定难度，不要求非常熟练，但至少会表单验证）

1.  表单验证

1.  隐藏手机号码： 150\*\*\*\*7654
2.  可以通过正则表达式，从字符串中获取我们想要的特定部分

### **正则表达式的特点是：** ###

1. 灵活性、逻辑性和功能性非常的强；

2. 可以迅速地用极简单的方式达到字符串的复杂控制。

3. 对于刚接触的人来说，比较晦涩难懂。

比如：

匹配国内电话号码：\\d\{3\}-\\d\{8\}|\\d\{4\}-\\d\{7\}

验证手机号：

/^((13\[0-9\])|(15\[^4,\\D\])|(18\[0,5-9\]))\\d\{8\}$/

很难记住。

### **正则表达式声明** ###

**1.通过构造函数定义**

var 变量名= new RegExp(/表达式/);

**2.通过直接量定义 （较为常用）**

var 变量名= /表达式/;

console.log(regexp1.test(345));

console.log(/\\d/.test(567));（直接使用）

**正则表达式的组成是：(总结)**

有一些普通字符和元字符组成，普通字符就是字母和数字，元字符具有特殊意义的字符

匹配腾讯QQ号：\[1-9\]\[0-9\]\{4,\}

评注：腾讯QQ号从10000开始

比如 \\d

预定义类: 表示数字 \[0-9\]

### **test() 方法**  ###

正则对象方法，检测测试字符串是否符合该规则，返回true和false，参数（测试字符串）

使用语法：

Boolean = 表达式.test("要验证的内容");

console.log(/\d/.test(567));

验证 567 符不符合 \\d 的规范

### **正则内部类（帮我们写好的工具直接使用）** ###

**预定义类**

. \[^\\n\\r\] 除了换行和回车之外的任意字符（“”不行）

\\d \[0-9\] 数字字符

\\D \[^0-9\] 非数字字符

\\s \[ \\t\\n\\x0B\\f\\r\] 空白字符

\\S \[^ \\t\\n\\x0B\\f\\r\] 非空白字符

\\w \[a-zA-Z\_0-9\] 单词字符

\\W \[^a-zA-Z\_0-9\] 非单词字符

**简单类（正则：//中什么特殊符号都不写，和\[\]的加入）**

1、/string/.test(“string”); 必须是完整的，只多不能少

/andy/.test(“andy”) // true

/andy/.test(“andylv”) // true

/andy/.test(“an”) // false

一句话，只要完整包含了andy 就可以了（有他就行）

2、/\[string\]/.test(“string”); 只要包含里面的任何一个就可以

/\[andy\]/.test("andy"); // true

/\[andy\]/.test("an"); // true

/\[andy\]/.test("ady"); // true

/\[andy\]/.test("anll"); // true

/\[andy\]/.test("assd"); // true

/\[andy\]/.test("ss"); // false

/\[3aH8\]/.test("ss"); // false

**负向类（不能是其中的整体或者一部分）**

中括号内，前面加个元字符^进行取反，不是括号里面的字符（一部分也不行）。

(可以不够，但是不能多)（不够和正好，返回false；多了或者没有返回true）

console.log(/\[^abc\]/.test('a'));

console.log(/\[^abc\]/.test('gg'));

注意: 这个符号 ^ 一定是写到方括号里面

**范围类**

有时匹配的东西过多，而且类型又相同，全部输入太麻烦，我们可以在中间加了个横线

console.log(/\[a-z\]/.test('1111'));

console.log(/\[A-Z\]/.test('aa'));

**组合类**

用中括号匹配不同类型的单个字符。

console.log(/\[a-m1-5\]/.test("b"))//true

### **正则边界（重点）** ###

^ 会匹配行或者字符串的起始位置

注：^在\[\]中才表示非！这里表示开始

$ 会匹配行或字符串的结尾位置

^$在一起 表示必须是这个（精确匹配）

// 边界可以精确说明要什么
    
    console.log(/lily/.test("lilyname")); // true
    
    console.log(/^lily$/.test("lily"));  // true
    
    console.log(/^lily$/.test("ly"));   // false

console.log(/^andy$/.test("andy")); // true

这个的最终意思就是 说， 必须是 andy 这四个字母

### **量词（重点）** ###

（多个字母，重复最后一个）

\* (贪婪) 重复零次或更多 (>=0)

\+ (懒惰) 重复一次或更多次 (>=1)

? (占有) 重复零次或一次 （0||1） 要么有 要么没有

\{\} 重复多少次的意思 可以有多少个

您的银行卡密码只能是 6位 \{6\}

\{n\} n次 （x=n）

\{n,\} 重复n次或更多 (x>=n)

\{n,m\} 重复出现的次数比n多但比m少 (n<=x<=m)

\* \{0,\}

\+ \{1,\}

? \{0,1\}

x|y 一个 | x 或者 y（没有&，用的是，代替的）

（）提高权限，有限计算

### **案例：** ###

1.  匹配座机号

var regexp  = /^(0\d{2}-\d{8})|(0\d{3}-\d{7})$/;
    
    var demo    = /^0\d{2}-\d{8}$|^0\d{3}-\d{7}$/;

1.  匹配中文

（  /^\[\\u4e00-\\u9fa5\]\{2,4\}$/  ）

3.匹配验证表单（注册QQ）

### **replace 函数** ###

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

语法格式：(返回值是新字符串)

需要匹配的对象.replace(正则式/字符串，替换的目标字符)

正则表达式的匹配模式支持的2个标志

g：表示全局模式（global），即模式将被应用于所有字符串而非发现一个而停止

i：表示不区分大小写（ease-insensitive）模式，在确定匹配想时忽略模式与字符串的大小写

**封装自己的trim 函数**

function trim(str) \{

return str.replace(/（^\\s+）|（\\s+$）/g,""); // 去掉前面和后面的空格

# **jQuery** #

## **jQuery 基础课程—jQuery选择器** ##

### **为什么要学jQuery？** ###

**学习JS的遇到的痛点**

痛点的总结：

### **jQuery是什么？** ###

**jQuery描述（理解）**

jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。

Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。

animate.js(JQurey.js)是我们自己封装的库，而jQuery是别人帮我们封装好的库。

**学习jQuery，主要是学什么呢？**

目前这个阶段，主要学习如何来使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能方法，这些方法叫做API（Application Programming Interface应用程序编程接口）。

这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。

**体验JQuery**

JS实现显示盒子，设置文字。

JQ实现显示盒子，设置文字。

### **如何使用jQuery？（重点）** ###

使用步骤：

1．引包

2．入口函数

3．功能实现代码（事件处理）

jQuery隐式迭代简单介绍：（了解）

隐式 对应的是 显示，隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

### **jQuery详细解释** ###

**版本介绍（了解）**

两个版本的区别：2.x版本，不再支持IE6、7、8

两个版本对浏览器的支持情况：

这几天主要学习1.x版本，1.x版本说明：

同版本两个文件的区别：

min：压缩版，压缩过后，体积会更小

压缩指的是：把注释、空格、换行全部去掉，把变量名称尽可能的换成更加简短的字符。

压缩的主要目的：就是让文件变的更小。

平时开发过程中，这两个文件使用哪个都可以；但是，项目上线的时候，推荐使用压缩版。

**引包注意点（理解）**

第一点：在使用jQuery之前，先把jQuery文件引到页面中来

如果在使用jQuery之前，没有引用jQuery文件，会报错：

第二点：src路径一定要写正确

如果src路径写错，也会报错：

**jQuery的入口函数（重点）**

**jQuery入口函数与js入口函数的区别（理解）**

js入口函数指的是：window.onload = function() \{\};

区别一：书写个数不同

Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。

jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。

区别二：执行时机不同

Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

**jQuery的$符号（重点）**

js命名规范允许出现的字符有：数字、字母、下划线、$。

js命名规范允许作为变量命名开头的字符有：字母、下划线、$；但是，不允许以数字作为变量命名的开头。

var $ = “我是字符串”;

var $ = 123;

function $()\{

alert(“我是函数$”);

jQuery使用$符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

怎么理解jQuery里面的$符号：

$实际上表示的是一个函数。

$(); // 调用上面我们自定义的函数$

$(document）.ready(function()\{\}); // 调用入口函数

$(function()\{\}); // 调用入口函数

$(“\#btnShow”) // 获取id属性为btnShow的元素

$(“div”) // 获取所有的div元素

jQuery里面的$函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象

jQuery这个js库，除了$之外，还提供了另外一个函数：jQuery

jQuery函数跟$函数的关系：jQuery ===$;

**jQuery对象和DOM对象的相互转换（难点）**

DOM对象此处指的是：使用js操作DOM返回的结果。

var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象

jQuery对象此处指的是：使用jQuery提供的操作DOM的方法返回的结果。

jQuery拿到DOM对象后又对其做了封装，让其具有了jQuery方法的jQuery对象，说白了，就是把DOM对象重新包装了一下。

（联想：手机和有手机壳的手机，手机就好比是DOM对象，有手机壳的手机就好比是jQuery对象）

var $btn = $(“\#btnShow”); // $btn就是一个jQuery对象

DOM对象转换成jQuery对象：

var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1

// $(document）.ready(function()\{\}); // 调用入口函数

// 此处是将document这个js的DOM对象，转换成了jQuery对象，然后才能调用jQuery提供的方法：ready

jQuery对象转换成DOM对象：

// 第一种方式

var btn1 = $btn\[0\]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 （推荐使用此方式）

// 第二种方式

var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

这两种方式都要记住，使用哪一种都可以。

案例：隔行变色

案例：开关灯

图解：

所有这些，都体现了jQuery对js的封装！

### **JS跟jQuery的区别是什么？（理解）** ###

### **为什么要学jQuery选择器？** ###

**JS提供的选择DOM元素的方法有几个？**

考虑兼容性的话，js里面提供的选择DOM的方法只有两个：

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td colspan="2" style="background-color:#4f81bd;border-color:#4f81bd;width:492.65pt;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">JavaScript</span></strong><strong><span style="color:#ffffff;">选择元素的方法：</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;"><strong>document.getElementById();</strong></p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">通过id属性获取指定元素</p> <p style="margin-left:0cm;">返回唯一的<span style="color:#ff0000;">DOM</span><span style="color:#ff0000;">对象</span></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:246.3pt;"> <p style="margin-left:0cm;"><strong>document.getElementsByTagName();</strong></p> </td> 
   <td style="vertical-align:top;width:246.35pt;"> <p style="margin-left:0cm;">通过标签名获取指定元素</p> <p style="margin-left:0cm;">返回<span style="color:#ff0000;">DOM</span><span style="color:#ff0000;">对象数组</span>（即使只有一个元素）</p> </td> 
  </tr> 
 </tbody> 
</table>

正是因为js提供的选择DOM的方法太少了，满足不了我们平时开发的需要，所以，我们可以使用jQuery选择器来弥补这方面的不足。

**什么是jQuery选择器**

jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。（联想：CSS选择符）

### **强大的jQuery选择器（重点）** ###

强大的原因：jQuery实现了从CSS1到CSS3所有的选择器以及其他常用的选择器。

各种选择器之间可以相互代替，所以，平时真正用到的只是最常用的选择器。

**基本选择器（重点）**

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#c0504d;width:163.3pt;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">符号</span><span style="color:#ffffff;">(</span></strong><strong><span style="color:#ffffff;">名称</span><span style="color:#ffffff;">)</span></strong></p> </td> 
   <td style="background-color:#c0504d;width:163pt;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">说明</span></strong></p> </td> 
   <td style="background-color:#c0504d;width:166.35pt;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">用法</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:163.3pt;"> <p style="margin-left:0cm;"><strong>#</strong></p> </td> 
   <td style="vertical-align:top;width:163pt;"> <p style="margin-left:0cm;">Id选择器</p> </td> 
   <td style="vertical-align:top;width:166.35pt;"> <p style="margin-left:0cm;">$(“#btnShow”).css(“color”, “red”);</p> <p style="margin-left:0cm;">选择id为btnShow的一个元素（<span style="color:#ff0000;">返回值为</span><span style="color:#ff0000;">jQuery</span><span style="color:#ff0000;">对象，下同</span>）</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:163.3pt;"> <p style="margin-left:0cm;"><strong>.</strong></p> </td> 
   <td style="vertical-align:top;width:163pt;"> <p style="margin-left:0cm;">类选择器</p> </td> 
   <td style="vertical-align:top;width:166.35pt;"> <p style="margin-left:0cm;">$(“.liItem”).css(“color”, “red”);</p> <p style="margin-left:0cm;">选择含有类liItem的所有元素</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:163.3pt;"> <p style="margin-left:0cm;"><strong>element</strong></p> </td> 
   <td style="vertical-align:top;width:163pt;"> <p style="margin-left:0cm;">标签选择器</p> </td> 
   <td style="vertical-align:top;width:166.35pt;"> <p style="margin-left:0cm;">$(“li”).css(“color”, “red”);</p> <p style="margin-left:0cm;">选择标签名为li的所有元素</p> </td> 
  </tr> 
 </tbody> 
</table>

**层级选择器（重点）、基本过滤选择器**

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#4f81bd;width:151.5pt;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">符号</span><span style="color:#ffffff;">(</span></strong><strong><span style="color:#ffffff;">名称</span><span style="color:#ffffff;">)</span></strong></p> </td> 
   <td style="background-color:#4f81bd;width:100.6pt;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">说明</span></strong></p> </td> 
   <td colspan="2" style="background-color:#4f81bd;width:240.55pt;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">用法</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td colspan="4" style="vertical-align:top;width:492.65pt;"> <p style="margin-left:0cm;"><strong>层级选择器</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:151.5pt;"> <p style="margin-left:0cm;"><strong>空格</strong></p> </td> 
   <td style="vertical-align:top;width:100.6pt;"> <p style="margin-left:0cm;">后代选择器</p> </td> 
   <td colspan="2" style="vertical-align:top;width:240.55pt;"> <p style="margin-left:0cm;">$(“#j_wrap <span style="color:#00b050;">li</span>”).css(“color”, “red”);</p> <p style="margin-left:0cm;">选择id为j_wrap的元素的<span style="color:#ff0000;">所有后代元素</span>li</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:151.5pt;"> <p style="margin-left:0cm;"><strong>&gt;</strong></p> </td> 
   <td style="vertical-align:top;width:100.6pt;"> <p style="margin-left:0cm;">子代选择器</p> </td> 
   <td colspan="2" style="vertical-align:top;width:240.55pt;"> <p style="margin-left:0cm;">$(“#j_wrap &gt; ul &gt; <span style="color:#00b050;">li</span>”).css(“color”, “red”);</p> <p style="margin-left:0cm;">选择id为j_wrap的元素的<span style="color:#ff0000;">所有子元素</span>ul的所有子元素li</p> </td> 
  </tr> 
  <tr> 
   <td colspan="4" style="vertical-align:top;width:492.65pt;"> <p style="margin-left:0cm;"><strong>基本过滤选择器</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:151.5pt;"> <p style="margin-left:0cm;"><strong>:eq(index)</strong></p> </td> 
   <td colspan="2" style="vertical-align:top;width:148.05pt;"> <p style="margin-left:0cm;">选择匹配到的元素中索引号为index的一个元素，<span style="color:#ff0000;">index</span><span style="color:#ff0000;">从</span><span style="color:#ff0000;">0</span><span style="color:#ff0000;">开始</span></p> </td> 
   <td style="vertical-align:top;width:193.1pt;"> <p style="margin-left:0cm;">$(“<span style="color:#00b050;">li</span>:eq(2)”).css(“color”, ”red”);</p> <p style="margin-left:0cm;">选择li元素中索引号为2的一个元素</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:151.5pt;"> <p style="margin-left:0cm;"><strong>:odd</strong></p> </td> 
   <td colspan="2" style="vertical-align:top;width:148.05pt;"> <p style="margin-left:0cm;">选择匹配到的元素中索引号为奇数的所有元素，<span style="color:#ff0000;">index</span><span style="color:#ff0000;">从</span><span style="color:#ff0000;">0</span><span style="color:#ff0000;">开始</span></p> </td> 
   <td style="vertical-align:top;width:193.1pt;"> <p style="margin-left:0cm;">$(“<span style="color:#00b050;">li</span>:odd”).css(“color”, “red”);</p> <p style="margin-left:0cm;">选择li元素中索引号为奇数的所有元素</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:151.5pt;"> <p style="margin-left:0cm;"><strong>:even</strong></p> </td> 
   <td colspan="2" style="vertical-align:top;width:148.05pt;"> <p style="margin-left:0cm;">选择匹配到的元素中索引号为偶数的所有元素，<span style="color:#ff0000;">index</span><span style="color:#ff0000;">从</span><span style="color:#ff0000;">0</span><span style="color:#ff0000;">开始</span></p> </td> 
   <td style="vertical-align:top;width:193.1pt;"> <p style="margin-left:0cm;">$(“<span style="color:#00b050;">li</span>:odd”).css(“color”, “red”);</p> <p style="margin-left:0cm;">选择li元素中索引号为偶数的所有元素</p> </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**筛选选择器（方法）（重点）**

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#9bbb59;width:132.35pt;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">符号</span><span style="color:#ffffff;">(</span></strong><strong><span style="color:#ffffff;">名称</span><span style="color:#ffffff;">)</span></strong></p> </td> 
   <td style="background-color:#9bbb59;width:122.85pt;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">说明</span></strong></p> </td> 
   <td style="background-color:#9bbb59;width:237.45pt;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">用法</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:132.35pt;"> <p style="margin-left:0cm;"><strong>find(selector)</strong></p> </td> 
   <td style="vertical-align:top;width:122.85pt;"> <p style="margin-left:0cm;">查找指定元素的所有后代元素（子子孙孙）</p> </td> 
   <td style="vertical-align:top;width:237.45pt;"> <p style="margin-left:0cm;">$(“#j_wrap”).find(“<span style="color:#00b050;">li</span>”).css(“color”, “red”);</p> <p style="margin-left:0cm;">选择id为j_wrap的所有后代元素li</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:132.35pt;"> <p style="margin-left:0cm;"><strong>children()</strong></p> </td> 
   <td style="vertical-align:top;width:122.85pt;"> <p style="margin-left:0cm;">查找指定元素的直接子元素（亲儿子元素）</p> </td> 
   <td style="vertical-align:top;width:237.45pt;"> <p style="margin-left:0cm;">$(“#j_wrap”).children(“<span style="color:#00b050;">ul</span>”).css(“color”, “red”);</p> <p style="margin-left:0cm;">选择id为j_wrap的所有子代元素ul</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:132.35pt;"> <p style="margin-left:0cm;"><strong>siblings()</strong></p> </td> 
   <td style="vertical-align:top;width:122.85pt;"> <p style="margin-left:0cm;">查找所有兄弟元素（不包括自己）</p> </td> 
   <td style="vertical-align:top;width:237.45pt;"> <p style="margin-left:0cm;">$(“#j_liItem”).siblings().css(“color”, “red”);</p> <p style="margin-left:0cm;">选择id为j_liItem的所有兄弟元素</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:132.35pt;"> <p style="margin-left:0cm;"><strong>parent()</strong></p> </td> 
   <td style="vertical-align:top;width:122.85pt;"> <p style="margin-left:0cm;">查找父元素（亲的）</p> </td> 
   <td style="vertical-align:top;width:237.45pt;"> <p style="margin-left:0cm;">$(“#j_liItem”).parent(“<span style="color:#00b050;">ul</span>”).css(“color”, “red”);</p> <p style="margin-left:0cm;">选择id为j_liItem的父元素</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:132.35pt;"> <p style="margin-left:0cm;"><strong>eq(index)</strong></p> </td> 
   <td style="vertical-align:top;width:122.85pt;"> <p style="margin-left:0cm;">查找指定元素的第index个元素，index是索引号，从0开始</p> </td> 
   <td style="vertical-align:top;width:237.45pt;"> <p style="margin-left:0cm;">$(“<span style="color:#00b050;">li</span>”).eq(2).css(“color”, “red”);</p> <p style="margin-left:0cm;">选择所有li元素中的第二个</p> </td> 
  </tr> 
 </tbody> 
</table>

案例：隔行变色。

下拉菜单（this）

鼠标进入高亮（隔行变色）

突出展示案例

手风琴

淘宝精品服饰

css();hide();show()

index();过去当前元素在父元素中的索引值（解放自定义属性）

## **jQuery 基础课程—jQuery-DOM操作** ##

### **使用jQuery操作DOM** ###

### **为什么要使用jQuery操作DOM** ###

对比JS操作DOM和jQuery操作DOM

使用jQuery的方式来操作DOM更加的简介，方便，统一的调用方式方便我们学习，降低来我们的学习成本。

### **重点内容** ###

*  样式和类操作
 *  jQuery动画
 *  节点操作

### **样式操作** ###

**样式属性操作 .css()**

作用：设置或获取元素的样式属性值

1 设置样式属性操作：

a设置单个样式：

// 第一个参数表示：样式属性名称

// 第二个参数表示：样式属性值

$(selector).css(“color”, “red”);

b设置多个样式：（也可以设置单个）

// 参数为 \{\}（对象）

$(selector).css(\{“color”: “red”, “font-size”: “30px”\});

2获取样式属性操作：

// 参数表示要获取的 样式属性名称

$(selector).css(“font-size”);

此时，会返回”font-size”样式属性对应的值。

**类操作**

添加类样式：

**(addClass)** 为指定元素添加类className

$(selector).addClass(“liItem”);

**注意：此处类名不带点，所有类操作的方法类名都不带点**

移除类样式：

**removeClass(className)** 为指定元素移除类 className

$(selector).removeClass(“liItem”);

$(selector).removeClass(); 不指定参数，表示移除被选中元素的所有类

判断有没有类样式：

hasClass(calssName) 判断指定元素是否包含类 className

$(selector).hasClass(“liItem”);

此时，会返回true或false

切换类样式：

toggleClass(className) 为指定元素切换类 className，该元素有类则移除，没有指定类则添加。

$(selector).toggleClass(“liItem”);

注意点：

操作类样式的时候，所有的类名，都不带点（.）

经验：

1 操作的样式非常少，那么可以通过.css()这个 方法来操作

2 操作的样式很多，那么要通过使用类的方式来操作

3 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。类比CSS书写位置（把css从html中分离出来）

前面内容特色总结：简约、“粗暴”、干净利落、直截了当

案例：图片京东Table栏

### **jQuery动画是什么？** ###

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

**隐藏显示动画**

1 show方法

作用：让匹配的元素展示出来

// 用法一：

// 参数为数值类型，表示：执行动画时长

/\* 单位为：毫秒（ms），参数2000即2秒钟显示完毕 \*/

$(selector).show(2000);

// 用法二：

// 参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast

/\* 跟用法一的对应关系为： \*/

/\* slow：600ms、normal：400ms、fast：200ms \*/

$(selector).show(“slow”);

// 用法三：

// 参数一可以是数值类型或者字符串类型

// 参数二表示：动画执行完后立即执行的回调函数

$(selector).show(2000, function() \{\});

// 用法四：

// 不带参数，作用等同于 css(“display”, ”block”)

/\* 注意：此时没有动画效果 \*/

$(selector).show();

注意：

jQuery预设的三组动画效果的语法几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画执行完成后的回调函数。

第一个参数是：可以是指定字符或者毫秒数

2 hide方法

作用：让匹配元素隐藏掉

用法参考show方法

$(selector).hide(1000); // 1000表示什么？

$(selector).hide(“slow”);

$(selector).hide(1000, function()\{\});

$(selector).hide();

**滑入滑出动画**

1滑入动画效果（联想：生活中的卷帘门）

作用：让元素以下拉动画效果展示出来

$(selector).slideDown(speed,callback);

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

$(selector).slideDown();

2 滑出动画效果

作用：让元素以上拉动画效果隐藏起来

$(selector).slideUp(speed,callback);

3滑入滑出切换动画效果

$(selector).slideToggle(speed,callback);

参数等同与1.5.1 隐藏和显示

**淡入淡出动画**

1 淡入动画效果

作用：让元素以淡淡的进入视线的方式展示出来

$(selector).fadeIn(speed, callback);

2 淡出动画效果

作用：让元素以渐渐消失的方式隐藏起来

$(selector).fadeOut(1000);

3淡入淡出切换动画效果

作用：通过改变透明度，切换匹配元素的显示或隐藏状态

$(selector).fadeToggle('fast',function()\{\});

参数等同与1.5.1 隐藏和显示

4改变透明度到某个值

与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！

作用：调节匹配元素的不透明度

// 用法有别于其他动画效果

// 第一个参数表示：时长

// 第二个参数表示：不透明度值，取值范围：0-1

$(selector).fadeTo(1000, .5); // 0全透，1全不透

// 第一个参数为0，此时作用相当于：.css(“opacity”, .5);

$(selector).fadeTo(0, .5);

jQuery提供的动画使用方法总结：

有规律的体现：

jQuery提供的这几个动画效果控制的CSS属性包括：高度、宽度、不透明度。\{height:400px; width:300px; opacity:.4;\}

这三个CSS属性的共性是：属性值只有一个，并且这个值是数值（去掉单位后）。

**自定义动画**

注意：所有能够执行动画的属性必须只有一个数字类型的值。

比如：要改变字体大小，要使用：fontSize（font-size），不要使用：font

动画支持的属性：

[http://www.w3school.com.cn/jquery/effect\_animate.asp][http_www.w3school.com.cn_jquery_effect_animate.asp]

作用：执行一组CSS属性的自定义动画

// 第一个参数表示：要执行动画的CSS属性（必选）

// 第二个参数表示：执行动画时长（可选）

// 第三个参数表示：动画执行完后立即执行的回调函数（可选）

$(selector).animate(\{params\},speed,callback);

**停止动画**

stop()

作用：停止当前正在执行的动画

为什么要停止动画？

如果一个以上的动画方法在同一个元素上调用，那么对这个元素来说，后面的动画将被放到效果队列中。这样就形成了动画队列。（联想：排队进站）

动画队列里面的动画不会执行，直到第一个动画执行完成。

// 第一个参数表示后续动画是否要执行

（true:后续动画不执行  ;false:后续动画会执行）

// 第二个参数表示当前动画是否执行完

（true:立即执行完成当前动画  ;false:立即停止当前动画）

$(selector).stop(clearQueue,jumpToEnd);

都不给，默认false；

解释：

当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。

如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。

注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。

常用方式：

$(selector).stop();

### **jQuery节点操作** ###

**动态创建元素**

// $()函数的另外一个作用：动态创建元素

var $spanNode = $(“<span>我是一个span元素</span>”);

var node = $(“\#box”).html（“<li>我是li</li>”）；

**添加元素**

在元素的最后一个子元素后面追加元素：

**append()**（**重点**）

作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）

如果是页面中存在的元素，那么调用append()后，会把这个元素放到相应的目标元素里面去；但是，原来的这个元素，就不存在了。

如果是给多个目标追加元素，那么方法的内部会复制多份这个元素，然后追加到多个目标里面去。

常用参数：htmlString 或者 jQuery对象

// 在$(selector)中追加$node

$(selector).append($node);

// 在$(selector)中追加div元素，参数为htmlString

$(selector).append('<div></div>');

不常用操作：（用法跟append()方法基本一致）

1 appendTo()

作用：同append()，区别是：把$(selector)追加到node中去

$(selector).appendTo(node);

2 prepend()

作用：在元素的第一个子元素前面追加内容或节点

$(selector).prepend(node);

3 after()

作用：在被选元素之后，作为兄弟元素插入内容或节点

$(selector).after(node);

4 before()

作用：在被选元素之前，作为兄弟元素插入内容或节点

$(selector).before(node);

**html创建元素（推荐使用，重点）**

作用：设置或返回所选元素的html内容（包括 HTML 标记）

设置内容的时候，如果是html标记，会动态创建元素，此时作用跟js里面的 innerHTML属性相同

// 动态创建元素

$(selector).html(‘<span>传智播客</span>’);

// 获取html内容

$(selector).html();

**清空元素**

// 清空指定元素的所有子元素（光杆司令）

// 没有参数

$(selector).empty();

$(selector).html(“”);

// “自杀” 把自己（包括所有内部元素）从文档中删除掉

$(selector).remove();

**复制元素**

作用：复制匹配的元素

// 复制$(selector)所匹配到的元素

// 返回值为复制的新元素

$(selector).clone();

总结：

推荐使用html(“<span></span>”)方法来创建元素或者html(“”)清空元素

案例：

1.  选择水果
2.  动态创建表格
3.  动态添加数据

### **操作form表单** ###

**属性操作**

设置属性：

// 第一个参数表示：要设置的属性名称

// 第二个参数表示：改属性名称对应的值

$(selector).attr(“title”, “传智播客”);

获取属性：

// 参数为：要获取的属性的名称，改操作会返回指定属性对应的值

$(selector).attr(“title”);

此时，返回指定属性的值

移除属性：

// 参数为：要移除的属性的名称

$(selector).removeAttr(“title”);

注意：checked、selected、disabled要使用.prop()方法。

prop方法通常用来影响DOM元素的动态状态，而不是改变的HTML属性。例如：input和button的disabled特性，以及checkbox的checked特性。

细节参考：[http://api.jquery.com/prop/][http_api.jquery.com_prop]

**值和内容**

val()方法：

作用：设置或返回表单元素的值，例如：input,select,textarea的值

// 获取匹配元素的值，只匹配第一个元素

$(selector).val();

// 设置所有匹配到的元素的值

$(selector).val(“具体值”);

text() 方法:

作用：设置或获取匹配元素的文本内容

//获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！）

$(selector).text();

//设置操作带参数，参数表示要设置的文本内容

$(selector).text(“我是内容”);

### **尺寸位置操作** ###

**高度和宽度操作**

高度操作height() ：

作用：设置或获取匹配元素的高度值

//带参数表示设置高度

$(selector).height(200);

//不带参数获取高度

$(selector).height();

宽度操作width() ：

作用：设置或获取匹配元素的宽度值

//带参数表示设置宽度

//不带参数获取宽度

$(selector).width(200);

css()获取高度和height获取高度的区别？

**坐标值操作**

offset()

作用：获取或设置元素相对于文档的位置

// 无参数表示获取，返回值为：\{left:num, top:num\}，值是相对于document的位置

$(selector).offset();

// 有参数表示设置，参数推荐使用数值类型

$(selector).offset(\{left:100, top: 150\});

注意点：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative

position()

作用：获取相对于其最近的具有定位的父元素的位置。

// 获取，返回值为对象：\{left:num, top:num\}

$(selector).position();

注意：只能获取，不能设置。

scrollTop()

作用：获取或者设置元素垂直方向滚动的位置

// 无参数表示获取偏移

// 有参数表示设置偏移，参数为数值类型

$(selector).scrollTop(100);

scrollLeft()

作用：获取或者设置元素水平方向滚动的位置

$(selector).scrollLeft(100);

对scrollTop的理解：

**垂直滚动条位置****是可滚动区域****在****可视区域上方的****被隐藏区域的高度。**

**如果滚动条在最上方没有滚动****或者****当前元素没有出现滚动条，那么这个距离为0**

**jQuery** **基础课程—jQuery其他必备知识**

## **jQuery其他必备知识** ##

### **重点内容** ###

*  val()值操作
 *  事件绑定
 *  事件解绑
 *  事件触发
 *  插件基本使用

### **操作form表单** ###

**属性操作**

设置属性：

// 第一个参数表示：要设置的属性名称

// 第二个参数表示：该属性名称对应的值

$(selector).attr(“title”, “传智播客”);

获取属性：

// 参数为：要获取的属性的名称，改操作会返回指定属性对应的值

$(selector).attr(“title”);

此时，返回指定属性的值

移除属性：

// 参数为：要移除的属性的名称

$(selector).removeAttr(“title”);

注意：checked、selected、disabled要使用.prop()方法。

prop方法通常用来影响DOM元素的动态状态，而不是改变的HTML属性。例如：input和button的disabled特性，以及checkbox的checked特性。

细节参考：[http://api.jquery.com/prop/][http_api.jquery.com_prop]

案例：表格案例全选反选；

**值和内容**

val()方法：

作用：设置或返回表单元素的值，例如：input,select,textarea的值

// 获取匹配元素的值，只匹配第一个元素

$(selector).val();

// 设置所有匹配到的元素的值

$(selector).val(“具体值”);

text() 方法:

作用：设置或获取匹配元素的文本内容

//获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！）

$(selector).text();

//设置操作带参数，参数表示要设置的文本内容

// 如果设置的内容包含html标签（<span>我要动态创建span，这时候行吗？</span>），那么text这个方法会把他们当作文本内容输出，而不会创建元素。这个text()和html()方的主要区别

$(selector).text(“我是内容”);

案例：红鲤鱼与绿鲤鱼

### **尺寸位置操作** ###

**高度和宽度操作**

高度操作height() ：

作用：设置或获取匹配元素的高度值

//带参数表示设置高度

$(selector).height(200);

//不带参数获取高度

$(selector).height();

宽度操作width() ：

作用：设置或获取匹配元素的宽度值

//带参数表示设置宽度

//不带参数获取宽度

$(selector).width(200);

css()获取高度和height获取高度的区别？

**坐标值操作**

offset()

作用：获取或设置元素相对于文档的位置

// 无参数表示获取，返回值为：\{left:num, top:num\}，值是相对于document的位置

$(selector).offset();

// 有参数表示设置，参数推荐使用数值类型

$(selector).offset(\{left:100, top: 150\});

注意点：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative

position()

作用：获取相对于其最近的具有定位的父元素的位置。

// 获取，返回值为对象：\{left:num, top:num\}

$(selector).position();

注意：只能获取，不能设置。

scrollTop()

作用：获取或者设置元素垂直方向滚动的位置

// 无参数表示获取偏移

// 有参数表示设置偏移，参数为数值类型

$(selector).scrollTop(100);

scrollLeft()

作用：获取或者设置元素水平方向滚动的位置

$(selector).scrollLeft(100);

对scrollTop的理解：

**垂直滚动条位置****是可滚动区域****在****可视区域上方的****被隐藏区域的高度。**

**如果滚动条在最上方没有滚动****或者****当前元素没有出现滚动条，那么这个距离为0**

案例：固定导航栏

### **jQuery事件机制** ###

jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。

**jQuery事件的发展历程（了解）**

简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >> on【重点】

1.  简单事件绑定：

click(handler) 单击事件

blur(handler) 失去焦点事件

mouseenter(handler) 鼠标进入事件

mouseleave(handler) 鼠标离开事件

dbclick(handler) 双击事件

change(handler) 改变事件，如：文本框值改变，下来列表值改变等

focus(handler) 获得焦点事件

keydown(handler) 键盘按下事件

其他参考：[http://www.w3school.com.cn/jquery/jquery\_ref\_events.asp][http_www.w3school.com.cn_jquery_jquery_ref_events.asp]

1.  bind方式（不推荐，1.7以后的jQuery版本被on取代）

作用：给匹配到的元素直接绑定事件

// 绑定单击事件处理程序

第一个参数：事件类型

第二个参数：事件处理程序

$("p").bind("click mouseenter", function(e)\{

//事件响应方法

\});

比简单事件绑定方式的优势：

1.  可以同时绑定多个事件，比如：bind(“mouseenter mouseleave”, function()\{\})

缺点：要绑定事件的元素必须存在文档中。

3 delegate方式（特点：性能高，支持动态创建的元素）

作用：给匹配到的元素绑定事件，对支持动态创建的元素有效

// 第一个参数：selector，要绑定事件的元素

// 第二个参数：事件类型

// 第三个参数：事件处理函数

$(".parentBox").delegate("p", "click", function()\{

//为 .parentBox下面的所有的p标签绑定事件

\});

与前两种方式最大的优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！

**on方式（最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用的方式）（重点）**

jQuery**1.7****版本后**，jQuery用on统一了所有的事件处理的方法

作用：给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点

语法：

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）

// 第二个参数：selector, 执行事件的后代元素

// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用

// 第四个参数：handler，事件处理函数

$(selector).on(events\[,selector\]\[,data\],handler);

// 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件

$(selector).on( "click",“span”, function() \{\});

// 绑定多个事件

// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件

$(selector).on(“click mouseenter”, function()\{\});

**事件解绑**

1.  unbind() 方式

作用：解绑 bind方式绑定的事件

$(selector).unbind(); //解绑所有的事件

$(selector).unbind(“click”); //解绑指定的事件

1.  undelegate() 方式

作用：解绑delegate方式绑定的事件

$( selector ).undelegate(); //解绑所有的delegate事件

$( selector).undelegate( “click” ); //解绑所有的click事件

**off****解绑on****方式绑定的事件（重点）**

// 解绑匹配元素的所有事件

$(selector).off();

// 解绑匹配元素的所有click事件

$(selector).off(“click”);

// 解绑所有代理的click事件，元素本身的事件不会被解绑

$(selector).off( “click”, “\*\*” );

**事件触发**

简单事件触发

$(selector).click(); //触发 click事件

trigger方法触发事件，**触发浏览器行为**

$(selector).trigger(“click”);

triggerHandler触发 事件响应方法，**不触发浏览器行为**

**比如:****文本框获得焦点的默认行为**

$(selector).triggerHandler(“focus”);

**jQuery事件对象介绍**

event.data 传递给事件处理程序的额外数据

event.currentTarget 等同于this，当前DOM对象

event.pageX 鼠标相对于文档左部边缘的位置

**event.target**  触发事件源，不一定===this

**event.stopPropagation()****；** 阻止事件冒泡

**event.preventDefault();** 阻止默认行为

event.type 事件类型：click，dbclick…

event.which 鼠标的按键类型：左1 中2 右3

event.keyCode 键盘按键代码

案例：按键变色

### **jQuery补充** ###

**链式编程**

链式编程原理：return this;

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。

**隐式迭代**

隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。

如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

案例【五角星评分控件】

**each方法**

有了隐式迭代，为什么还要使用each函数遍历？

大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。

如果要对每个元素做不同的处理，这时候就用到了each方法

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号

// 参数二表示当前元素（DOM对象）

$(selector).each(function(index,element)\{\});

Element是一个 js对象，需要转换成jquery对象

【案例】 什么都看不见

**多库共存**

此处多库共存指的是：jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量，那么，要保证每个库都能正常使用，这时候就有了多库共存的问题。

// 模拟另外的库使用了 $ 这个变量

// 此时，就与jQuery库产生了冲突

var $ = \{ name : “itecast” \};

解决方式：

// 作用：让jQuery释放对$的控制权，让其他库能够使用$符号，达到多库共存的目的。此后，只能使用jQuery来调用jQuery提供的方法

$.noConflict(); //true两个都交出来，返回值是新的调用方法

### **jQuery插件机制** ###

jQuery这个js库，虽然功能强大，但也不是面面俱到包含所有的功能。

jQuery是通过插件的方式，来扩展它的功能：

当你需要某个插件的时候，你可以“安装”到jQuery上面，然后，使用。

当你不再需要这个插件，那你就可以从jQuery上“卸载”它。

（联想：手机软件，安装的app就好比插件，用的时候安装上，不用的时候卸载掉）

**第三方插件**

jQuery.color.js

animate()自定义动画：不支持背景的动画效果

[animate动画支持的属性列表][http_www.w3school.com.cn_jquery_effect_animate.asp]

jQuery.lazyload.js

使用步骤：

1.  引入jQuery文件
2.  引入插件
3.  使用插件

**制作插件**

如何创建jQuery插件：

[http://learn.jquery.com/plugins/basic-plugin-creation/][http_learn.jquery.com_plugins_basic-plugin-creation]

全局jQuery函数扩展方法

$.pluginName = function() \{\};

jQuery对象扩展方法

$.fn. pluginName = function() \{\};

**jQueryUI**

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API：[http://api.jqueryui.com/category/all/][http_api.jqueryui.com_category_all]

其他教程：[jQueryUI教程][jQueryUI]

基本使用:

1.  引入jQueryUI的样式文件
2.  引入jQuery
3.  引入jQueryUI的js文件
4.  使用jQueryUI功能

**HTML5****第一天**

# **H5** #

1.  1.   **认识HTML5**

前面我们学习的html是什么？

Html4.0

网页开发： htmlà 结构 4.0

Css ->样式 2.0

Js à 行为 用户交互

HTML5 是html4.0 升级版

结构 Html5 、样式 css3 、行为: API 都有所增强

HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。

HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。

广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合

H5范称

HTML + CSS3 + JS

优点：http://www.intertid.com/school/2014/595568.shtml

1.  1.   **语法规范**

HTML5在语法规范上也做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。

见代码实例

**特点：**

1、更简洁

2、更宽松

单标签不用写关闭符号  
双标签省略结束标签

html、head、body、colgroup、tbody可以完全省略

实际开发中应规范书写，不建议太随意 ！

## **语义标签** ##

语义标签对于我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。

传统的做法我们或许通过增加类名如class="header"、class="footer"，使HTML页面具有语义性，但是不具有通用性。

HTML5则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通用性。

此章节学习目的为了解增加语义标签的目的，以及各语义标签所表达的意义，在网页布局中能够合理使用标签。

传统网页布局：

<div class="header">
    
                    <ul class="nav"></ul>
    
            </div>
    
          
    
          <div class="main">
    
             
    
          <div class="article"></div>
    
          
    
          <div class="aside"></div>
    
          </div>
    
           
    
          <div class="footer"></div>

H5 经典网页布局:

<header>
    
           <ul class="nav"></ul>
    
       </header>
    
    
    
    <div class="main">
    
       
    
       <article></article>
    
       
    
       <aside></aside>
    
    </div>
    
    
    
    <footer></footer>

### **常用新语义标签** ###

<nav> 表示导航

<header> 表示页眉

<footer> 表示页脚

<section> 表示区块

<article> 表示文章 如文章、评论、帖子、博客

<aside> 表示侧边栏 如文章的侧栏

<figure> 表示媒介内容分组 与 ul > li 做个比较

<mark> 表示标记 (文本有背景颜色,表示标记)

<progress> 表示进度

<time> 表示日期 ( 包裹时间 )

本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class="nav"> 相当于 <nav>。不要好奇，它只是一个标签！

尽量避免全局使用header、footer、aside等语义标签。

### **兼容处理** ###

(我们在测试ie 的兼容的时候，有一个叫做ietest 的软件，这个软件可以模拟ie6-ie11)

在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了，在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。

## **表单** ##

伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。

此章节学习目的，了解HTML5表单的新增的特性，以及PC和移动设备间的差异，其兼容性较差。

### **输入类型 (表单类型，表单元素，表单属性,表单事件.)** ###

email 输入email格式

tel 手机号码

url 只能输入url格式

number 只能输入数字

search 搜索框

range 范围 滑动条

color 拾色器

time 时间

date 日期 不是绝对的

--datetime-local

时间日期

month 月份

week 星期

部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

### **表单元素（标签）** ###

智能表单( 输入指定文本提供备选 )

<datalist> 数据列表

与input 配合使用

</datalist>

<keygen name =” ----- ”> 生成加密字符串

keygen 元素  
    
    
    
          keygen 元素的作用是提供一种验证用户的可靠方法。 
    
          keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，    一个是私钥，一个公钥。 
    
    
    
        私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<output> 不可当做数据提交？ (例)

<meter> 表示度量器，不建议用作进度条

<meter  value="81"    min="0" max="100"  low="60"  high="80" />

Max-width

Min-width

### **表单属性** ###

placeholder 占位符

autofocus 获取焦点 (打开页面焦点自动锁定在当前目标)

multiple 文件上传多选或多个邮箱地址

autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off)

(记录上次输入的信息,e-mail默认不会记录)

form 指定表单项属于哪个form，处理复杂表单时会需要

novalidate 关闭验证，可用于<form>标签 (写在form,不会对表单进行验证)

required 必填项 (不填写无法提交表单)

pattern 正则表达式 验证表单

手机号:<input type="tel" name="tel" required="required" pattern="^(\\+86)?1\[3,5,8\](\\d\{9\})$">

### **表单事件** ###

oninput 用户输入内容时触发，可用于移动端输入字数统计(js直接调用)

oninvalid 验证不通过时触发(js直接调用)

### **案例练习** ###

###  ###

注册表单

## **多媒体** ##

在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放，但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得处理音频/视频播放变的非常复杂，并且移动设备的浏览器并不支持Flash插件。

Media palyer

此章节学习目的，了解如何通过HTML5播放音频/视频，以及针对不同浏览器所支持的格式，做多浏览器兼容处理。

### **音频** ###

HTML5通过<audio>标签来解决音频播放的问题。

使用相当简单，如下图所示

并且可以通过附加属性可以更友好控制音频的播放，如：

autoplay 如果出现该属性，则视频在就绪后马上播放

controls 如果出现该属性，则向用户显示控件，比如播放按钮。

loop 循环播放

preload 预加载 同时设置autoplay时些属性失效

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#3f3f3f;border-color:#3f3f3f;width:65.85pt;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">值</span></strong></p> </td> 
   <td style="background-color:#3f3f3f;border-color:#3f3f3f;width:213.9pt;"> <p style="margin-left:0cm;"><strong><span style="color:#ffffff;">描述</span></strong></p> </td> 
   <td style="background-color:#3f3f3f;border-color:#3f3f3f;width:210.9pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#aaaaaa;width:65.85pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">load</span></p> </td> 
   <td style="background-color:#ffffff;width:213.9pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">规定是否预加载视频。</span></p> <p style="margin-left:0cm;"><span style="color:#000000;">可能的值：</span></p> 
    <ul> 
     <li><span style="color:#000000;">auto - </span><span style="color:#000000;">当页面加载后载入整个视频</span></li> 
     <li><span style="color:#000000;">meta - </span><span style="color:#000000;">当页面加载后只载入元数据</span></li> 
     <li><span style="color:#000000;">none - </span><span style="color:#000000;">当页面加载后不载入视频</span></li> 
    </ul></td> 
   <td style="background-color:#ffffff;width:210.9pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

由于版权等原因，不同的浏览器可支持播放的格式是不一样的

**多浏览器支持的方案，如下图**

### **视频** ###

HTML5通过<video>标签来解决音频播放的问题。

同音频播放一样，<video>使用也相当简单，如下图

同样，通过附加属性可以更友好的控制视频的播放

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

preload 预加载，同时设置了autoplay，此属性将失效

width 设置播放窗口宽度

height 设置播放窗口的高度

由于版权等原因，不同的浏览器可支持播放的格式是不一样的

**多浏览器支持的方案，如下图**

## **DOM扩展** ##

### **获取元素** ###

1、document.getElementsByClassName ('class') 通过类名获取元素，以类数组形式存在。

2、document.querySelector(‘\#box’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。

3、document.querySelectorAll('selector') 通过CSS选择器获取元素，以类数组形式存在。

### **类名操作** ###

1、Node.classList.add('class') 添加class

2、Node.classList.remove('class') 移除class

3、Node.classList.toggle('class') 切换class，有则移除，无则添加

4、Node.classList.contains('class') 检测是否存在class

Node指一个有效的DOM节点，是一个通称。

### **自定义属性** ###

在HTML5中我们可以自定义属性，其格式如下data-\*=""，例如

data-info="我是自定义属性"，通过Node.**dataset**\['info'\] 我们便可以获取到自定义的属性值。

Node.dataset是以类对象形式存在的

当我们如下格式设置时，则需要以驼峰格式才能正确获取

data-my-name="itcast"，获取Node.dataset\['myName'\]

### **案例练习 (tab 切换)** ###

**HTML5****第二天API**

## **新增API** ##

### **多媒体** ###

方法：load() 加载、play() 播放、pause() 暂停

属性：currentTime 视频播放的当前进度(播放的当前时间)

duration:视频的总时间

paused:视频播放的状态.

事件：

oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。

ontimeupdate:通过该事件来报告当前的播放进度

(播放时一直触发)

(当拖动进度条时触发该事件)

onended:播放完时触发

以下内容作为了解(视频架加载过程当中的事件)

全屏：video.webkitRequestFullScreen();

### **拖拽** ###

在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

**拖拽元素**

页面中设置了draggable="true"属性的元素

**目标元素**

页面中任何一个元素都可以成为目标元素

**事件监听**

**拖拽元素**

ondrag 应用于拖拽元素，整个拖拽过程都会调用

ondragstart 应用于拖拽元素，当拖拽开始时调用

ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用

ondragend 应用于拖拽元素，当拖拽结束时调用

**目标元素**

ondragenter 应用于目标元素，当拖拽元素进入时调用

ondragover 应用于目标元素，当停留在目标元素上时调用

ondrop 应用于目标元素，当在目标元素上松开鼠标时调用

ondragleave 应用于目标元素，当鼠标离开目标元素时调用

**preventDefault****方法就是可以阻止它的默认行为的发生而发生其他的事情。**

### **历史** ###

提供window.history，对象我们可以管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。

旧版本浏览器..

history.back() 回退

history.forward() 前进

### **地理定位** ###

在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)

**获取地理信息方式**

1、IP地址

2、三维坐标

GPS（Global Positioning System，全球定位系统）

目前世界上在用或在建的第2代全球卫星导航系统（GNSS）有：1.美国 Global Positioning System （[全球定位系统][Link 1]） 简称GPS；.2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）；3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo satellite navigation system（[伽利略][Link 2]卫星导航系统） 简称GALILEO（[伽利略][Link 2]）；4.中国 BeiDou(COMPASS) Navigation Satellite System（[北斗卫星导航系统][Link 3]）简称 BDS ；5.日本 Quasi-Zenith Satellite System （准天顶卫星系统） 简称QZSS ；印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS；以上6个系统中国都能使用。

Wi-Fi

手机信号

3、用户自定义数据

如下图对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。

**隐私**

HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。

**API详解**

navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息

navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息

1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。Coords(坐标)

position.coords.latitude纬度

position.coords.longitude经度

2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error

3、可选参数 options 对象可以调整位置信息数据收集方式

百度地图案例.

### **Web存储** ###

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。

Storage 存储

window.sessionStorage

window.localStorage

(向本地保存数据,有可能在浏览器内存里面，有可能在硬盘上面.)

**特性**

1、设置、读取方便

2、容量较大，sessionStorage约5M、localStorage约20M

3、只能存储字符串，可以将对象JSON.stringify() 编码后存储

**window.sessionStorage**

1、生命周期为关闭浏览器窗口

2、在同一个窗口下数据可以共享

**window.localStorage**

1、永久生效，除非手动删除

2、可以多窗口共享

**方法详解**

setItem(key, value) 设置存储内容

getItem(key) 读取存储内容

removeItem(key) 删除键值为key的存储内容

clear() 清空所有存储内容

key(n) 以索引值来获取存储内容

案例：记住用户名

**其它**

WebSQL、IndexDB

已经被w3c 放弃了..

生命周期差异，存储空间差异

WebSQL、IndexDB

### **全屏** ###

HTML5规范允许用户自定义网页上任一元素全屏显示。

requestFullscreen() 开启全屏显示

cancleFullscreen() 关闭全屏显示

不同浏览器需要添加前缀如：

webkitRequestFullScreen、mozRequestFullScreen

webkitCancleFullScreen、mozCancleFullScreen

通过document.fullScreen检测当前是否处于全屏

不同浏览器需要添加前缀

document.webkitIsFullScreen、document.mozFullScreen

全屏伪类

:full-screen .box \{\}、:-webkit-full-screen \{\}、:moz-full-screen \{\}

### **网络状态** ###

我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值

(切换网络时触发)

window.online用户网络连接时被调用

window.offline用户网络断开时被调用

window.addEventListener("online",function(){
    
             alert("已经建立了网络连接")
    
        })
    
       window.addEventListener("offline",function(){
    
             alert("已经失去了网络连接")
    
       })

### **应用缓存** ###

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。

**优势**

1、可配置需要缓存的资源

2、网络无连接应用仍可用

3、本地读取缓存资源，提升访问速度，增强用户体验

4、减少请求，缓解服务器负担

**缓存清单**

一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型

AddType text/cache-manifest .appcache

例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"，路径要保证正确。

**manifest文件格式**

1、顶行写CACHE MANIFEST

2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等

3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符

4、FALLBACK: 当前页面无法访问时退回的页面(回退; 后退)

换行 当被缓存的文件找不到时的备用资源 可自行查阅资料

**其它**

1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST

2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制

CACHE:需要缓存那些资源.

NETWORK:不需要缓存那些资源，必须在网络下面才能访问.

FALLBACK:当访问不到某个资源时，自动由另外一个资源替换.

CACHE MANIFEST
    
    
    
       CACHE:
    
       #此部分是需要缓存的资源
    
       1.jpg
    
       js/jquery.min.js
    
    
    
       NETWORK:
    
       js/demo.js
    
        # 可以使用 * 好替代
    
        FALLBACK:
    
        one.css two.css    会缓存two.css 当找不到one.css 会去找two.css 文件.

3、\#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。

4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存

### **Font Awesome 字体框架** ###

[http://fontawesome.dashgame.com/][http_fontawesome.dashgame.com]

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果

# **CSS3** #

如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

1.  1.   **CSS3的现状**

1、浏览器支持程度差，需要添加私有前缀

2、移动端支持优于PC端

3、不断改进中

4、应用相对广泛

-webkit-border-radius  radius 半径

1.  1.   **如何对待**

1、坚持渐进增强原则

2、考虑用户群体

3、遵照产品的方案

4、听Boss的

## **准备工作** ##

### **统一环境** ###

由于CSS3兼容性问题的普遍存在，为了避免因兼容性带来的干扰，我们约定统一的环境，以保证学习的效率，在最后会单独说明兼容性的问题。

1、Chrome浏览器 version 46+ 2、Firefox浏览器 firefox 42+

### **如何使用手册** ###

学会使用工具，可以让我们事半功倍。

\[\] 表示全部可选项 padding

|| 表示或者

| 表示多选一

？ 表示0个或者1个

\* 表示0个或者多个

\{\} 表示范围

学会查看手册，培养自主学习能力。

## **基础知识** ##

### **选择器** ###

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。

**属性选择器**

其特点是通过属性来选择元素，具体有以下5种形式：

1.  E\[attr\] 表示存在attr属性即可；

div[class]

2、E\[attr=val\] 表示属性值完全等于val；

div[class=mydemo]

3、E\[attr\*=val\] 表示的属性值里包含val字符并且在“任意”位置；

div[class*=mydemo]

4、E\[attr^=val\] 表示的属性值里包含val字符并且在“开始”位置；

div[class^=mydemo]

5、E\[attr$=val\] 表示的属性值里包含val字符并且在“结束”位置；

div[class$=demos]

案例 配合jQuery 的过滤选择器

**伪类选择器**

除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。

1、以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。

重点理解通过E来确定元素的父元素。

E:first-child第一个子元素

E:last-child最后一个子元素

E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素；

div>ul>li:nth-child(3){
    
               color: deeppink;

}

第三个元素

E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算；

div>ul>li:last-child(2){
    
             color: deeppink;

**\}**

n遵循线性变化，其取值0、1、2、3、4、... 但是当n<=0时，选取无效。

选中所有的奇数的li
    
       li:nth-child(2n-1){
    
           color: red;
    
       }
    
      选中所有的7 的倍数的li

li:nth-child(7n){
    
          color: red;
    
        }
    
       选中前面五个
    
       li:nth-child(-1n+5){
    
           color: red;
    
       }
    
       选中后面五个
    
       li:nth-last-child(-1n+5){

color: red;
    
       }
    
       所有的偶数
    
       li:nth-child(even){
    
          color:red
    
       }
    
       所有的奇数
    
       li:nth-child(odd){
    
          color:blue;
    
       }

n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等；

E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）

没有任何的子元素，包括空格.

案例：日历图.

2、目标伪类

E:target 结合锚点进行使用，处于当前锚点的元素会被选中；

<li><a href="\#title1">CSS (层叠样式表)</a></li>

<h2 id="title1">CSS (层叠样式表)</h2>

h2:target\{

color:red;

图片切换

**伪元素选择器**

重点：E::before、E::after

是一个行内元素，需要转换成块元素

E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。

E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解

E::first-letter文本的第一个字母或字（如中文、日文、韩文等）；

案例：首字下沉

E::first-line 文本第一行； 文本第一行高亮..

E::selection 可改变选中文本的样式；

":" 与 "::" 区别在于区分伪类和伪元素

关于before和after
    
          CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念
    
          CSS3中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者   E:after伪类;

### **颜色** ###

一种新的颜色的表示方式

rgba(255,0,0,0.1)

**RGBA****是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的**[**色彩空间**][Link 4]**。虽然它有的时候被描述为一个颜色空间**

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。

Red、Green、Blue、Alpha即RGBA

Hue、Saturation、Lightness、Alpha即HSLA

R、G、B 取值范围0~255

H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色

S 饱和度 取值范围0%~100%

L 亮度 取值范围0%~100%

A 透明度 取值范围0~1

关于透明度：

1、opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；

2 、transparent 不可调节透明度，始终完全透明

RGBA、HSLA可应用于所有使用颜色的地方。

案例：  
1: opacity 设置透明度，只能针对整个盒子设置透明度.  
2: 子盒子会继承父盒子的透明度.  
.out\{  
width: 200px;  
height: 200px;  
background: green;  
border: 1px solid darkgreen;  
margin: 40px auto;  
opacity: 0.3;  
\}  
  
子盒子也出现透明  
.out .inner\{  
width: 100px;  
height: 100px;  
background-color: yellow;  
\}

2:background-color: transparent; 完全透明，不可调节透明度.

3:使用rgba 来控制颜色，相对opacity ，不具有继承性.

### **文本 (shadow阴影)** ###

text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。

1、水平偏移量 正值向右 负值向左；

2、垂直偏移量 正值向下 负值向上；

3、模糊度是不能为负值；

代码演示：

/* 3px 水平偏移量. 正值向右  负值向左*/
    
        /* 5px 水垂直偏移量. 正值向下 负值向上*/
    
        /* 5px 模糊度   模糊度不能为负值 值越大越模糊*/
    
        /* #ccc 设置对象阴影的颜色.
    
         可以有多个影子.
    
       ul>li{
    
         margin: 20px;
    
         font-size: 24px;
    
    
    
       }
    
    
    
       ul>li:nth-child(1){
    
            text-shadow: 5px 5px 2px #ccc;
    
       }
    
       ul>li:nth-child(2){
    
             text-shadow: -5px  -5px 2px #ccc;
    
        }
    
       ul>li:nth-child(3){
    
         text-shadow: 5px 5px 2px #ccc, -5px  -5px 2px #ccc;
    
        }

案例1：浮雕文字.

/\*设置背景色.\*/  
body \{  
background-color: gray;  
font: bold 6em "microsoft yahei";  
\}  
  
div \{  
margin: 30px;  
color: \#808080;  
text-align: center;  
\}  
6  
/\*设置水平向左1px 向上1 px 向右1px 向下1px \*/  
.to\{  
text-shadow: -1px -1px 1px \#000,1px 1px 1px \#fff;  
\}  
.ao\{  
text-shadow: -1px -1px 1px \#000,1px 1px 1px \#fff;  
\}

### **111盒模型** ###

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

box-sizing 有两个值:content-box border-box

可以分成两种情况：

content-box:对象的实际宽度等于设置的width值和border、padding之和

border-box： 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

我们把这种方式叫做盒模型

兼容性比较好

### **边框** ###

其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。

**边框圆角**

border-radius 每个角可以设置两个值 ，x 值，y值

1: 边框圆角处理

2:  正方形

3：椭圆

圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。如下图

可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）

**边框阴影**

box-shadow 与 text/shadow 用法差不多

1、水平偏移量 正值向右 负值向左；

2、垂直偏移量 正值向下 负值向上；

box-shadow: 5px 5px 27px red, -5px -5px 27px green;

3、模糊度是不能为负值；

4、inset可以设置内阴影；

设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。

可以设置多重边框阴影，实现更好的效果，增强立体感。

**边框图片**

border-image: url("images/border.png") 27/20px round

border-image 设置边框的背景图片.

border-image-source:url(“”) 设置边框图片的地址.

//裁剪图片，如何去裁切图片，浏览器会自动去裁剪图片.

border-image-slice:27,27,27,27

//指定边框的宽度.

border-image-width:20px;

//边框平铺的样式 stretch 拉升

round 会自动调整缩放比例

repeat(重复)

border-image-repeat: stretch;

设置的图片将会被“切割”成九宫格形式，然后进行设置。如下图

“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，

其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。如下图

**1****、round****和repeat****之间的区别**

round 会自动调整尺寸，完整显示边框图片。

repeat 单纯平铺多余部分，会被“裁切”而不能完整显示。

**2****、更改裁切尺寸**

background-slice: 34 36 27 27 分别设置裁切如下图

关于边框图片重点理解9宫格的裁切及平铺方式，实际开发中应用不广泛，但是如能灵活动用会给我们带来不少便利。

**1.1.4案例 用css 实现**

代码实现:

### **渐变** ###

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

可分为线性渐变、径向渐变

**线性渐变 （gradient 变化）**

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

上图是从黄色渐变到绿色

Background:linear-gradient(

To right 表示方向 (left,top,right,left ,也可以使用度数)

Yellow, 渐变起始颜色

Green 渐变终止颜色

)

background:linear-gradient(
    
              to right,
    
              red 0%, red 25% ,
    
              blue 25%,blue 50%,
    
              green 50%,green 75%,
    
              pink 75% ,pink 100%
    
          );  //起止颜色，终止颜色.

background: linear-gradient(
    
            135deg,
    
            black 25%,
    
            transparent 25%,
    
            transparent 50%,
    
            black 50%,
    
            black 75%,
    
            transparent 75%
    
         );

background-size: 100px 100px;

animation: move 1s linear infinite;

@keyframes move {
    
         from {}
    
           to {
    
               background-position: 100px 0;
    
           }
    
         }

**1****、必要的元素：**

a、方向

b、起始颜色

c、终止色；

**2****、关于方向如下图**

**径向渐变 (radial 径向)**

radial-gradient径向渐变指从**一个中心点****开始沿着四周产生渐变效果**

background: radial-gradient(
    
               150px  at  center,
    
               yellow,
    
               green
    
          );

围绕中心点做渐变，半径是150px，从黄颜色到绿颜色做渐变.

**1****、必要的元素：**

a、辐射范围即圆半径 (半径越大，渐变效果越大)

b、中心点 即圆的中心 (中心点的位置是以盒子自身)

background: radial-gradient(
    
                150px  at left center,
    
               yellow,
    
               green
    
            );

以左上角为圆的中心点

**background**: **radial-gradient**(  
150**px at 0px 0px**,  
**yellow**,  
**green**  
);

c、渐变起始色

d、渐变终止色

**2****、关于中心点：**中心位置参照的是盒子的左上角

**3****、关于辐射范围：**其半径可以不等，即可以是椭圆

div{
    
             width: 300px;
    
             height: 300px;
    
             margin:100px auto;
    
             background: radial-gradient(
    
                 250px  at 0px 0px,
    
                 yellow,
    
                 green
    
             );
    
             border-radius: 150px;
    
        }

### **背景** ###

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

**background-size:width,height** **可以设置背景图片的宽度以及高度**

1.  **background-size****设置背景图片的尺寸**

**background-size:600px,auto;**

自动是适应盒子的宽度
    
             background-size: 100% auto;  当宽度发送改变时，高度会有内容溢出。

常规用法，通过百分百，和像素来调整背景的尺寸.

background-size: auto 100%;

cover会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

整个背景图片完整显示在背景区域.

contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

也可以使用长度单位或百分比

案例:全屏背景自动适应.

1.  **background-origin(****原点，起点)****设置背景定位的原点**

**所谓的背景原点就是调整背景位置的一个参照点.**

**调整背景图片定位的参照原点.**

border-box以边框做为参考原点；

padding-box以内边距做为参考原点；

content-box以内容区做为参考点；

**3****、background-clip****设置背景区域clip(****裁切)**

border-box裁切边框以内为背景区域；

padding-box裁切内边距以内为背景区域；

content-box裁切内容区做为背景区域；

**4****、以逗号分隔可以设置多背景，可用于自适应局**

背景图片尺寸在实际开发中应用十分广泛。

### **过渡(transition)** ###

Transition:param1 param2

param1 要过渡的属性

param2 过渡的时间.

过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态

帧动画：扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

关于补间动画更多学习可查看http://mux.alimama.com/posts/1009

特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。

transition-property设置过渡属性

transition-duration设置过渡时间 用来控制速度linear(匀速)

ease-in (加速)

transition-timing-function设置过渡速度

transition-delay设置过渡延时 超过时间后执行动画.

以上四属性重在理解

案例：气泡

案例2：手风琴效果

### **2D转换** ###

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。在css3 当中，通过transform(变形) 来实现2d 或者3d 转换,其中2d 有，缩放，移动，旋转。

1.  缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；

1.  移动 translate(x, y) 可以改变元素的位置，x、y可为负值；

x 在水平方向移动。

y 在垂直方向移动。

1.  旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；

**案例1****，火箭移动**

**案例2** **盾牌，将位置还原**

**案例3** **旋转** **原点**

transform-origin:left top;

### **1、 3d变换** ###

rotateX(30deg) 绕着x旋转30deg

rotateY(30deg) 绕着y旋转30deg

rotateZ(30deg) 绕着z旋转30deg

translateX(30px) 沿着x轴移动30px

translatey(30px) 沿着y轴移动30px

translatez(30px) 沿着Z轴移动30px( 必须给父盒子加透视)

### **2、透视：** ###

加给变换元素的父盒子， 设置的是用户眼睛和屏幕的距离；

只是视觉上的呈现，不是正真的3d

perspective:1000px;

### **3、transform-style:preserve-3d;** ###

加给变换元素的父盒子，让子盒子存在三维空间中，保持3d效果

flat:默认值 （让子盒子被扁平化）

### **4、 backface-visibility:hidden; 背面不可见** ###

skew(30deg,30deg); 2d变换 -倾斜

css3中获取自定义属性的值：content:attr(data-text);

### **5、动画：** ###

定义：

@keyframes 动画名\{

0%\{

100%\{

或者

from\{\}

to\{\}

动画调用：

animation: 动画名称 动画时间 执行次数 运动曲线 延迟执行 结束后状态 是否反向；

inifnite: 无限次

alternate: 反向执行

forwards: 保持结束后的状态

backwards: 保持动起开始前的状态

steps(5): 让动画分步执行；

动画详细属性：

animation-name:动画名称

animation-duration:持续时间

animation-iteration-count:执行次数

animation-timing-function:运动曲线

animation-fill-mode:结束状态

animation-direction: 动画方向

animation-delay: 延迟时间

多列：（了解）

\-webkit-column-count:列数

\-webkit-column-rule:分割线样式

\-webkit-column-width:列宽

\-webkit-column-gap:列间距

\-webkit-column-span:跨列 all 跨所有列

### **伸缩布局** ###

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

如下图，学习新的概念：

主轴：cl

**1****、必要元素：**

a、指定一个盒子为伸缩盒子 display: flex

b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction

c、明确主侧轴及方向

d、可互换主侧轴，也可改变方向

2、各属性详解

a、flex-direction调整主轴方向（默认为水平方向）

**该属性通过定义flex****容器的主轴方向来决定felx****子项在flex****容器中的位置**

row 水平方向

reverse-row 反转

column 垂直方向

reverse-column 反转列

b、justify-content**设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。**

flex-start、 起点对齐

flex-end、 终点对齐

center 中间对齐

space-around、 环绕

space-between 两端对齐

c、flex控制子项目的缩放比例

不指定flex 属性，则不参与分配

d、align-items**设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。**

flex-start、 起点对齐

flex-end、 终点对齐

center 中间对齐

Strethc: 拉伸;

此知识点重在理解，要明确找出主轴、方向，各属性对应的属性值可参考示例源码

应用场景1：

应用场景2:

应用场景3-携程旅行

## **Web字体** ##

开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。

支持程度比较好，甚至IE低版本浏览器也能支持。

### **字体格式** ###

不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。

1、TureTpe(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2、OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

3、Web Open Font Format(.woff)格式

woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

4、Embedded Open Type(.eot)格式

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；

5、SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。

下载字体的网站.

推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体

### **字体图标** ###

其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把图片制作成字体呢？

答案是肯定的。

常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。

优点：

1、将所有图标打包成字体库，减少请求；

2、具有矢量性，可保证清晰度；

3、使用灵活，便于维护；

**Font Awesome** **使用介绍**

http://fontawesome.dashgame.com/

**定制自已的字体图标库**

http://iconfont.cn/

https://icomoon.io/

**SVG****素材**

http://www.iconsvg.com/

## **兼容性** ##

通过http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。

我们需要知道每个属性，能被那个版本的浏览器支持.

## **高级应用** ##

360 案例:

监听滚轮

var i=0;  
document.onmousewheel=function()\{  
console.log(i++);  
\}

//需要处理兼容 （我们是靠监听滚轮的时间来处理）

//我们需要使用到插件. (滚屏插件) 基于jQuery 的一个插件.

jQuery fullPage 全屏滚动插件

中文网址:http://www.dowebok.com

相关说明:http://www.dowebok.com/77.html

对应的颜色

sectionsColor:\['\#0da5d6', '\#2AB561', '\#DE8910', '\#16BA9D', '\#0DA5D6'\],

loopTop:true , 滚到顶部 回到最后一屏；

js代码

$(function()\{  
$('\#dowebok').fullpage(\{  
sectionsColor:\['\#0da5d6', '\#2AB561', '\#DE8910', '\#16BA9D', '\#0DA5D6'\],  
loopTop:true,  
afterLoad:function( anchorLink ,index)\{  
console.log(index);  
  
$('.section').removeClass('current');  
setTimeout(function()\{  
$('.section').eq(index-1).addClass('current');  
\},100);  
\}  
\});  
\});

# **ajax** #

## **HTTP服务搭建** ##

### **AMP** ###

AMP:**A:**`Apache`,**M:**`MySQL`,**P:**`PHP`

*  **Apache** 世界排名第一的服务器软件,特点是`简单`,`速度快`,`性能稳定`

*  **MySQL** 得益于他体积小、速度快、使用成本低，而且是开源，所以很多网站都选用**MySql**作为他们的数据库.
 *  **PHP** 展开后PHP: Hypertext Preprocessor，中文名：`超文本预处理器`,直接将代码嵌入`HTML` 文档中执行,简单易学,容易上手.

### **AMP集成环境** ###

`AMP`是三个独立的软件,但是对于初学者而言分别安装以及配置需要掌握一定的软件知识,所以就有了很多`AMP`集成环境帮助我们简化安装

*  **WAMP:** 在`windows`平台下如果想要一步到位安装好这些软件,可以使用`wamp`,其中w的意思为`windows`指的是windows操作系统
 *  **XAMPP:** 不同于`wamp`针对于`windows`,`XAMPP`可以安装在`Linux`,`Windows`,`MAC OS X`,`Solaris`这些操作系统上面

### **WAMP安装** ###

1.  双击提供的安装包
2.  点击`Next`
3.  选择安装路径,注意:**不要使用中文路径**.建议使用跟图片一致的路径
4.  如果担心安装完成后找不到`wamp`可以将两个方框全部勾选,点击`next`继续安装
5.  点击`install`开始安装
6.  安装完毕以后点击`finish`即可启动`wamp`
7.  启动完成能够在任务栏的右下角看到这个图标即表示安装成功

### **测试访问** ###

打开浏览器输入`127.0.0.1`查看显示的内容,如果是第一次安装,默认显示的应该是如下图片

*  **127.0.0.1****含义****:** `127.0.0.1`是回送地址，指本地机，一般用来测试使用,如果想要让其他电脑也能够访问,需要进行一些配置,详见下文.

**WAMP图标橙色解决方案**

如果没有使用过自己的电脑配置服务器那么`WAMP`默认应该为绿色的图标,那么如果WAMP启动,显示的是橙色图标怎么办呢?

1.检查是否开启了服务:保证`Apache`,`MySQL`的服务都是启动状态即可

2.检查是否开启了微软自带的`IIS``服务`:保证`Internet Information Services`没有被勾选即可

1打开，控制面板-管理工具-服务中，将IIS Admin Service服务 停止就行了
    
    2开始----运行----cmd-----输入 net stop iisadmin

3.修改端口号:在`httpd.conf`中搜索 listen,大概在46行的位置

Listen 80

改为 listen 8080

注这里可以改为任意的端口,修改完毕之后, 保存并重启wamp

访问时在ip地址之后添加:8080 端口号即可

如 192.168.18.125:8080

4.终极解决:卸载\-删除文件夹(wamp安装的文件夹)-重装

### **配置局域网访问** ###

安装好了`WAMP`之后就能够通过自己的浏览器输入`127.0.0.1`,如果想要让同一局域网中的其他电脑也能够访问,需要进行如下配置

*  **关闭防火墙**

*  **修改**`httpd.conf``文件` 因为`Apache`的配置默认不允许外部访问,我们需要修改配置 找到`D:\wamp\bin\apache\Apache2.2.21\conf`文件 使用文本编辑工具打开,通过搜索功能找到`onlineoffline tag - don't remove`这句话 \`\`\` 将在234行附近的 Allow from 127.0.0.1 替换为 Allow from all

`保存``,``然后重启`wamp的所有服务即可

*  **获取本机****IP****地址****:**
    
     *  **方法****1:**
        
         *  打开`控制面板``->``网络和``Internet->``网络和共享中心``->``更改适配器设置`
         *  找到正在连接的网络,双击
     *  **方法****2:**
        
         *  打开命令行工具
         *  输入ipconfig
 *  **局域网内访问****:** 使用一台相同局域网内的`拥有浏览器`的设备即可通过刚刚获取的`IP``地址进行访问`
 *  **常见的通局域网计算机****:**

局域网的概念这里不做拓展,为了方便测试当满足下列情况可以尝试访问

*   *  连接同一个`wifi`的计算机(手机也可以测试)
     *  连接同一个`交换机`的计算机
        
         *  同教室的电脑
         *  同公司的电脑

### **配置网站根目录** ###

(**注****:** *这里使用的路径为上述安装时的路径**,**如果没有安装在**D**盘**,**那么需要找到对应的路径*)

*  **找到**`WAMP`**的安装目录****:**`D:\wamp`
 *  **找到**`Apache`**的配置文件** `D:\wamp\bin\apache\Apache2.2.21\conf`
 *  **修改**`http.conf`**文件** 使用文本编辑工具打开`httpd.conf`文件,搜索`documentRoot` 如果是初次安装,应该分别在`178`行,`205`行 修改完毕以后记得保存`ctrl+s`

*  **重启**`WAMP`**服务** 左键点击`wamp`图标,选择`重新启动所有服务`
 *  **建立文件夹****,****尝试访问** 为了保证访问时确实有内容,在`E:`盘下建立`www`文件夹,并且在改文件夹下放入文件,再次尝试通过`127.0.0.1`进行访问

## **PHP基础** ##

### **PHP简介** ###

PHP在众多的编程语言中,是比较容易上手,结合我们搭建的`WAMP`环境就能够开始学习了

*  **PHP****代码执行方式****:** `服务端``web``编程`写好的代码,需要通过浏览器访问`服务器`,在`服务器端`执行,然后返回给用户结果,如果直接使用浏览器打开,就会解析为文本

### **PHP常见语法** ###

**文件定义****,****注释****:** PHP文件以`.php`结尾,代码的编写位置在`<?php``写在这里``?>`.注释的写法跟`js`一致

<?php

//这是单行注释

这是多行注释

*  **PHP****变量规则****:**
    
     *  变量以`$`符号开头，其后是变量的名称
     *  变量名称必须以字母或下划线开头
     *  变量名称不能以数字开头
     *  变量名称只能包含字母数字字符和下划线（`A-z`、`0-9` 以及`_`）
     *  变量名称对大小写敏感

// 变量以`$`符号开头，其后是变量的名称

// 变量名称必须以字母或下划线开头

$a;

$b;

$a1;

$_abc;

// 变量名称不能以数字开头

// 变量名称只能包含字母数字字符和下划线（`A-z`、`0-9` 以及` _`）

// 下面这些是错误的变量定义

$1;

$哈哈;

$^&*;

//变量名称对大小写敏感（`$y` 与`$Y` 是两个不同的变量）

// 下面定义的两个变量是不同的,大写,小写x

$x;

$X;

*  **数据类型** `PHP`支持的数据类型包括:字符串,整数,浮点数,布尔,数组,对象,NULL(**注****:**由于对象中可以使用函数,故对象的语法在下文中会提及)
    
     *  定义字符串时需要注意:
        
         *  单引号:``` `` ```内部的内容只是作为字符串
         *  双引号:`""` 如果内部是`PHP`的变量,那么会将该变量的值解析
     *  字符串连接:不同于`JavaScript`,`PHP`中使用`.`进行连接

// 字符串

$str = '123';

// 字符串连接

$str2 = '123'.'哈哈哈';

// 字符串

// 整数

$numA = 1; //正数

$numB = -2;//负数

// 浮点数

$x = 1.1;

// 布尔

$a = true;

$b = false;

// 数组

$arr = array('123',123)

*  **运算符** `PHP`中的运算符跟`JavaScript`中的基本一致,用法也基本一致
    
     *  算数运算符: `+`,`-`,`/`,`*`,`%`
     *  赋值运算符: `x = y`,`x += y`,`x -= y` 注:这里列举的并不完全

<?php

$x=10;

$y=6;

echo ($x + $y); // 输出 16

echo ($x - $y); // 输出 4

echo ($x * $y); // 输出 60

echo ($x / $y); // 输出 1.6666666666667

echo ($x % $y); // 输出 4

*  **函数****:** `PHP`虽然系统内建了一些函数,但是这不影响我们定义自己的. 函数的作用就是在代码中可以重复使用的`语法块`,页面加载的时候不会执行,只有在`被调用`的时候才会执行

// 基础语法

function functionName() {

这里写代码

}

// 无参数 无返回值的函数

function sayhi(){

echo "Hello World";

}

// 有参数 无返回值的函数

function sayName($name){

echo $name.'你好哦';

}

// 调用

sayName('小狐狸');

// 有参数,参数有默认值的函数

function sayFood($food='西兰花'){

echo $food.'好好吃';

}

// 调用

sayFood('西葫芦');// 如果传入参数,就使用传入的参数

sayFood();// 如果不传入参数,直接使用默认值

// 有参数,有返回值的函数

function sum($a,$b){

return $a+$b

}

sum(1,2);// 返回值为1+2 = 3

*  **对象****:** PHP中允许使用对象这种,自定义数据类型. 使用时必须先声明,实例化之后才能够使用

// 定义最基础的类

class Fox{

public $name = 'buka';

public $age = 10;

}

$fox = new $fox;

// 对象属性取值

$name = $fox->name;

// 对象属性赋值

$fox->name = '小狐狸';

// 带构造函数的对象

class fox{

// 私有属性,外部无法访问

var $name = '小狐狸';

// 定义方法 用来获取属性

function Name(){

return $this->name;

}

// 构造函数,可以传入参数

function fox($name){

$this->name = $name

}

// 定义了构造函数 需要使用构造函数初始化对象

$fox = new fox('小狐狸');

// 调用对象方法,获取对象名

$foxName = $fox->Name();

*  **内容输出****:** `echo`:`PHP`语句直接使用即可,输出字符串 `print_r()`:`函数`输出复杂数据类型,比如数组,对象 `var_dump()`:`函数`输出详细信息，如对象、数组

$arr =array(1,2,'123');

echo'123';

// 结果为 123

print_r($arr);

// 结果为 Array ( [0] => 1 [1] => 2 [2] => 123 )

var_dump($arr);

/* 结果为

array

0 => int 1

1 => int 2

2 => string '123' (length=3)

*  **循环语句****:** 这里只列举了`foreach`,`for`循环

// for 循环

for ($x=0; $x<=10; $x++) {

echo "数字是：$x <br>";

}

// foreach 循环

$colors = array("red","green","blue","yellow");

// 参数1为循环的对象,参数2会将对象的值挨个取出,直到最后

// 如果循环的是对象的话,输出的是对象属性的值

foreach ($colors as $value) {

echo "$value <br>";

}

输出结果为

red

green

blue

yellow

*  `header()`**函数** 用来向客户端(浏览器)发送报头,如果出现中文无法显示,可以尝试在`PHP`代码顶部添加 如下代码

header("content-type:text/html; charset=utf-8");

### **PHP中的header** ###

浏览器访问http服务器,接收到响应时,会根据响应报文头的内容进行一些具体的操作,在php中,我们能够使用 header来设置这些内容

*  设置文本编码
    
     *  设置编码格式为:utf-8
     *  header("Content-Type:text/html;charset=utf-8");
 *  设置页面跳转
    
     *  设置跳转到百度首页

header('location:http://www.baidu.com');

*  设置页面间隔刷新

header('refresh:3; url=http://www.xiaomi.com');

### **PHP表单** ###

### **PHP\_GET数据获取** ###

在`PHP`中,如果想要获取通过`get`方法提交的数据,可以通过`$_GET`对象来获取(虽然参数在`地址栏`中可以查看)

*  **HTML****代码****:** 下面就是一个简单的表单代码,将数据提交到`01.php`,使用`get`的方式

<label for="">姓名:

<br/>

<label for="">邮箱:

<br/>

</form>

*  **PHP****代码****:**

<?php

echo "<h1>GET_PAGE</h1>";

echo 'userName:'.$_GET['userName'];

echo '<br/>';

echo 'userEmail:'.$_GET['userEmail'];

### **PHP\_POST数据获取** ###

在`PHP`中,如果想要获取通过`post`方法提交的数据,可以通过`$_POST`对象来获取

*  **HTML****代码****:** 下面就是一个简单的表单代码,将数据提交到`02.php`,使用`post`的方式(**注意****:**代码中的`method`改为`post`)

<label for="">姓名:

<br/>

<label for="">邮箱:

<br/>

</form>

*  **PHP****代码****:**

<?php

echo "<h1>POST_PAGE</h1>";

echo 'userName:'.$_POST['userName'];

echo '<br/>';

echo 'userEmail:'.$_POST['userEmail'];

### **POST&GET错误处理** ###

当我们直接访问`POST`&`GET`页面时由于并没有传递任何数据,会因为`$_GET`或`$_POST`不存在对应的key而报错.

*  **处理方式****1:**
    
     *  使用`array_key_exists(key,``数组``)`函数来进行判断
     *  **参数****1:** 要检测的key`字符串`
     *  **参数****2:** 检验的数组

if(array_key_exists('name', $_GET)){

//如果有数据 再去读取

}else{

// 反之 可以执行一些 其他的逻辑

}

### **PHP文件上传处理`$_FILES`对象** ###

上传文件时`html``代码中`需要进行如下设置:

1.  在`html``表单中`需要设置`enctype="multipart/form-data"`
2.  只能`post`方式 PHP接收文件可以通过`$_FILES`来获取

*  **HTML****代码****:**

<label for="">照片:

<br/>

</form>

*  **PHP****代码****01** 这部分代码测试$\_FILES文件的具体内容

<?php

sleep(5);// 让服务器休息一会

print_r($_FILES);

*  **现象****:**
    
     *  点击提交后,服务器没有立即出现反应,而是休息了一会`sleep(5)`
     *  在`wamp/tmp`目录下面出现了一个`.tmp`文件
     *  `.tmp`文件一会就被自动删除了
     *  服务器返回的内容中,有文件的名字`[name] => computer.png`,以及上传文件保存的位置`D:\wamp\tmp\php3D70.tmp`

### **PHP文件上传处理02\_文件保存** ###

刚刚演示了`$_FILES`对象的作用,以及`PHP`接受上传文件时,会先保存在一个临时目录下,那么接下来我们就演示如何将`临时目录`下面的文件保存起来

*  **HTML****代码****:** 这部分的代码不需要改变

<label for="">照片:

<br/>

</form>

*  **PHP****代码** `move_uploaded_file()`这个函数可以处理文件

Array ( [picture] => Array (

[name] => computer.png

[type] => image/png

[tmp_name] => D:\wamp\tmp\php8913.tmp

[error] => 0 [size] => 5212 )

)

其中我们需要通过`picture`(根据表单标签的`name`属性决定)获取`临时文件名`以及`上传文件名`

<?php

sleep(5);// 让服务器休息一会,方便我们查看上传的临时文件

// 第一个参数是 规定要移动的文件

// 第二个参数是 规定文件的新位置

move_uploaded_file($_FILES['picture']['tmp_name'], './upload/'.$_FILES['picture']['name']);

## **常见网络传输协议** ##

协议可以理解为一套`规范`,当使用的双反都遵守这套规范时,才能够实现沟通.比如对于`嘿嘿`的理解不同,带来的沟通障碍.网络协议就有更多规则,需要先干什么,再干什么

*  常见协议
    
     *  HTTP,HTTPS超文本传输协议
     *  FTP文件传输协议
     *  SMTP邮件传输协议

## **HTTP协议** ##

网站是基于`HTTP`协议的,比如我们在开发网站中经常使用的`css`,`js`,`图片`等等都是基于该协议进行传输的

*  组成部分
    
     *  从客户端(能够发送`HTTP`)发出的:`请求``Request`
     *  从服务器返回的:`响应``Response`

### **监测工具** ###

使用监测工具我们可以查看这些`HTTP`请求,以及编辑请求内容,重新发送等

*  浏览器
    
     *  Chrome,Firefox开发工具
 *  抓包工具
    
     *  Fiddler,Charles

### **请求/请求报文** ###

请求有`客户端`发出,主要有三个组成部分:`请求行`,`请求头`,`请求主体`

*  **请求行****:**
    
     *  请求方法:`GET`
     *  请求`URL`
     *  `HTTP`协议版本
 *  **请求头**
    
     *  这里设置的主要是一些信息,包含`客户端`,`服务器`

User-Agent：浏览器的具体类型　　如：User-Agent：Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0

Accept：浏览器支持哪些数据类型　　如：Accept: text/html,application/xhtml+xml,application/xml;q=0.9;

Accept-Charset：浏览器采用的是哪种编码　　如：Accept-Charset: ISO-8859-1

Accept-Encoding：浏览器支持解码的数据压缩格式　　如：Accept-Encoding: gzip, deflate

Accept-Language：浏览器的语言环境　　如：Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3

Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机。Host:www.baidu.com

Connection：表示是否需要持久连接。Keep-Alive/close，HTTP1.1默认是持久连接，它可以利用持久连接的优点，当页面包含多个元素时（例如Applet，图片），显著地减少下载所需要的时间。要实现这一点，Servlet需要在应答中发送一个Content-Length头，最简单的实现方法是：先把内容写入ByteArrayOutputStream，然后在正式写出内容之前计算它的大小。如：Connection: Keep-Alive

Content-Length：表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。

Content-Type：WEB服务器告诉浏览器自己响应的对象的类型和字符集。例如：Content-Type: text/html; charset='gb2312'

Content-Encoding：WEB服务器表明自己使用了什么压缩方法（gzip，deflate）压缩响应中的对象。例如：Content-Encoding：gzip

Content-Language：WEB服务器告诉浏览器自己响应的对象的语言。

Cookie：最常用的请求头，浏览器每次都会将cookie发送到服务器上，允许服务器在客户端存储少量数据。

Referer：包含一个URL，用户从该URL代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的。Referer: http://www.baidu.com/

*  请求体
    
     *  这里是提交给服务器的数据
     *  需要注意的是,如果是往服务器提交数据,需要在请求头中设置`Content-Type: application/x-www-form-urlencoded`(在ajax中需要手动设置)

## **响应/响应报文** ##

响应报文是`服务器`发回给`客户端`的.组成部分有`状态行`,`响应头`,`响应主体`

常见相应属性

Cache-Control

响应输出到客户端后，服务端通过该报文头属告诉客户端如何控制响应内容的缓存。

下面，的设置让客户端对响应内容缓存3600秒，也即在3600秒内，如果客户再次访问该资源，直接从客户端的缓存中返回内容给客户，不要再从服务端获取（当然，这个功能是靠客户端实现的，服务端只是通过这个属性提示客户端“应该这么做”，做不做，还是决定于客户端，如果是自己宣称支持HTTP的客户端，则就应该这样实现）。

Cache-Control: max-age=3600

ETag

一个代表响应服务端资源（如页面）版本的报文头属性，如果某个服务端资源发生变化了，这个ETag就会相应发生变化。它是Cache-Control的有益补充，可以让客户端“更智能”地处理什么时候要从服务端取资源，什么时候可以直接从缓存中返回响应。

ETag: "737060cd8c284d8af7ad3082f209582d"

Location

我们在Asp.net中让页面Redirect到一个某个A页面中，其实是让客户端再发一个请求到A页面，这个需要Redirect到的A页面的URL，其实就是通过响应报文头的Location属性告知客户端的，如下的报文头属性，将使客户端redirect到iteye的首页中：

Location: http://www.google.com.hk

Set-Cookie

服务端可以设置客户端的Cookie，其原理就是通过这个响应报文头属性实现的。

Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1

HTTP响应体：如果请求的是HTML页面，那么返回的就是HTML代码。如果是JS就是JS代码。

HTTP响应头：而设置Cookie，缓存等信息就是在响应头属性设置的。

HTTP响应行：主要是设置响应状态等信息。

## **常见的响应状态** ##

## **PHP设置上传文件大小** ##

### **修改php.ini** ###

*  步骤
    
     *  左键点击`wamp`
     *  选择`php`
     *  在弹出的窗口中选择`php.ini`
     *  在打开的文件中进行修改(搜索默认值 2M )
     *  修改完毕,保存并重启`wamp`

### **修改内容** ###

使用文本编辑工具的搜索功能找到下列选项 进行修改

*  设置文件最大上传限制(值的大小可以根据需求修改)

file_uploads = On   ; 是否允许上传文件 On/Off 默认是On

upload_max_filesize = 32M       ; 上传文件的最大限制

post_max_size = 32M             ; 通过Post提交的最多数据

*  考虑网络传输快慢,这里修改一些参数

max_execution_time = 30000      ; 脚本最长的执行时间 单位为秒

max_input_time = 600            ; 接收提交的数据的时间限制 单位为秒

memory_limit = 1024M            ; 最大的内存消耗

## **Ajax的基本概念和使用** ##

### **同步&异步** ###

同步:必须等待前面的`任务`完成,才能继续后面的任务

异步:不受当前`任务`的影响

*  **举个例子****:**
 *  **同步****:**我们在银行排队时,只有等到你了,才能够去处理业务.

*  **异步****:**我们在排队的时候,玩手机是没有任何影响的

## **异步更新网站** ##

当我们访问一个普通的网站时,当浏览器加载完:`HTML,CSS,JS`以后网站的内容就固定了.如果`网站内容发生更改`必须刷新页面才能够看到更新的内容

### **网站内容更新:** ###

常规的网站内容更新,必须通过`刷新`显示新内容

*  **异步更新**

我们在访问`新浪微博`时,当你看到一大半了,会`自动`帮我们加载更多的微博,同时页面并没有刷新

## **Ajax概念** ##

在浏览器中,我们也能够不`刷新页面`,通过`ajax`的方式去获取一些新的内容,类似网页有`微博`,`朋友圈`,`邮箱`等

*  **单词解释****:**

`Asynchronous Javascript And XML`（异步JavaScript和XML）,他并不是凭空出现的新技术,而是对于现有技术的结合:核心是js对象`XMLHttpRequest`

## **XMLHttpRequest** ##

`ajax`使用的依旧是`HTTP``请求`,那么让我们来回忆一下一个完整的`HTTP``请求`需要什么

*  请求的网址,方法`get/post`
 *  提交请求内容`数据`,`请求主体`等
 *  接收响应回来的内容
 *  **五步使用法****:**
    
    1.  建立XMLHTTPRequest对象(创建异步对象)
    2.  注册回调函数(设置请求的url等参数)

当服务器`回应`我们了,我们想要执行什么逻辑

1.  1.  使用open方法设置和服务器端交互的基本信息(发送请求)

设置提交的`网址`,`数据`,`post`提交的一些额外内容

1.  1.  设置发送的数据，开始和服务器端交互(注册事件)

发送数据

1.  1.  更新界面(在注册的事件中获取 返回的内容,并修改页面显示)

在注册的回调函数中,获取返回的数据,更新界面

*  **示例代码****:GET**

get的数据,直接在请求的`url`中添加即可

// 创建XMLHttpRequest 对象

var xml = new XMLHttpRequest();

// 设置跟服务端交互的信息

xml.open('get','01.ajax.php?name=fox');

xml.send(null);    // get请求这里写null即可

// 接收服务器反馈

xhr.onreadystatechange = function () {

// 这步为判断服务器是否正确响应

if (xhr.readyState == 4 && xhr.status == 200) {

// 打印响应内容

alert(xml.responseText);

}

};

</script>

*  **示例代码****:POST**

// 异步对象

var xhr = new XMLHttpRequest();

// 设置属性

xhr.open('post', '02.post.php' );

// 如果想要使用post提交数据,必须添加

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

// 将数据通过send方法传递

xhr.send('name=fox&age=18');

// 发送并接受返回值

xhr.onreadystatechange = function () {

// 这步为判断服务器是否正确响应

if (xhr.readyState == 4 && xhr.status == 200) {

alert(xhr.responseText);

}

};

</script>

## **XMLHttpRequest\_API讲解** ##

### **1.创建`XMLHttpRequest`对象(兼容性写法)** ###

*  **新版本浏览器****:**

var xml=new XMLHttpRequest();

*  **（****IE5** **和** **IE6****）**

var xml=new ActiveXObject("Microsoft.XMLHTTP");

*  **考虑兼容性创建****Ajax****对象**

var request ;

if(XMLHttpRequest){

// 新式浏览器写法

request = new XMLHttpRequest();

}else{

//IE5,IE6写法

new ActiveXObject("Microsoft.XMLHTTP");

}

### **2.发送请求:** ###

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:207.6pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">方法</span></strong></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:312.5pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">描述</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:207.6pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">open(<em>method</em>,<em>url</em>,<em>async</em>)</span></p> </td> 
   <td style="background-color:#f8f8f8;width:312.5pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">规定请求的类型、</span><span style="color:#333333;">URL </span><span style="color:#333333;">以及是否异步处理请求。</span></p> 
    <ul> 
     <li><em><span style="color:#333333;">method</span></em><span style="color:#333333;">：请求的类型；</span><span style="color:#333333;">GET </span><span style="color:#333333;">或</span><span style="color:#333333;"> POST</span></li> 
     <li><em><span style="color:#333333;">url</span></em><span style="color:#333333;">：文件在服务器上的位置</span></li> 
     <li><em><span style="color:#333333;">async</span></em><span style="color:#333333;">：</span><span style="color:#333333;">true</span><span style="color:#333333;">（异步）或</span><span style="color:#333333;"> false</span><span style="color:#333333;">（同步）</span></li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:207.6pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">send(<em>string</em>)</span></p> </td> 
   <td style="background-color:#ffffff;width:312.5pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">将请求发送到服务器。</span></p> <p style="margin-left:0cm;"><em><span style="color:#333333;">string</span></em><span style="color:#333333;">：仅用于</span><span style="color:#333333;"> POST </span><span style="color:#333333;">请求</span></p> </td> 
  </tr> 
 </tbody> 
</table>

### **3.POST请求注意点:** ###

如果想要像`form`表单提交数据那样使用`POST`请求,需要使用`XMLHttpRequest`对象的`setRequestHeader()`方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据：

xmlhttp.open("POST","ajax_test.php",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");

### **4.onreadystatechange事件** ###

当服务器给予我们反馈时,我们需要实现一些逻辑

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:149.1pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">属性</span></strong></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:374pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">描述</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:149.1pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">onreadystatechange</span></p> </td> 
   <td style="background-color:#f8f8f8;width:374pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">存储函数（或函数名），每当</span><span style="color:#333333;"> readyState </span><span style="color:#333333;">属性改变时，就会调用该函数。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:149.1pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">readyState</span></p> </td> 
   <td style="background-color:#ffffff;width:374pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">存有</span><span style="color:#333333;"> XMLHttpRequest </span><span style="color:#333333;">的状态。从</span><span style="color:#333333;"> 0 </span><span style="color:#333333;">到</span><span style="color:#333333;"> 4 </span><span style="color:#333333;">发生变化。</span></p> 
    <ul> 
     <li><span style="color:#333333;">0: </span><span style="color:#333333;">请求未初始化</span></li> 
     <li><span style="color:#333333;">1: </span><span style="color:#333333;">服务器连接已建立</span></li> 
     <li><span style="color:#333333;">2: </span><span style="color:#333333;">请求已接收</span></li> 
     <li><span style="color:#333333;">3: </span><span style="color:#333333;">请求处理中</span></li> 
     <li><span style="color:#333333;">4: </span><span style="color:#333333;">请求已完成，且响应已就绪</span></li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:149.1pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">status</span></p> </td> 
   <td style="background-color:#f8f8f8;width:374pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">200: "OK"</span></p> <p style="margin-left:0cm;"><span style="color:#333333;">404: </span><span style="color:#333333;">未找到页面</span></p> </td> 
  </tr> 
 </tbody> 
</table>

### **4.服务器响应内容** ###

如果响应的是普通字符串,使用`responseText`,如果响应的是`XML`,使用`responseXML`

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:129.75pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">属性</span></strong></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:390.3pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">描述</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:129.75pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">responseText</span></p> </td> 
   <td style="background-color:#f8f8f8;width:390.3pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">获得字符串形式的响应数据。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:129.75pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">responseXML</span></p> </td> 
   <td style="background-color:#ffffff;width:390.3pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">获得</span><span style="color:#333333;"> XML </span><span style="color:#333333;">形式的响应数据。</span></p> </td> 
  </tr> 
 </tbody> 
</table>

## **Ajax传输xml** ##

### **XML简介** ###

XML 指可扩展标记语言`EXtensible Markup Language`,他设计的时候是用来传递数据的,虽然格式跟`HTML`类似.

*  **xml****示例** 下面是一个XML示例

<?xml version="1.0" encoding="UTF-8"?>

</note>

*  **xml****是纯文本**

`XML`是纯文本,这点跟`HTML`很像,所以我们可以用任何的`文本编辑`软件去打开编辑它

### **XML语法** ###

虽然看起来跟`HTML`类似,但是`XML`的语法有些需要注意的

*  **XML****声明** 第一行是XML的声明,指定`XML`版本(1.0)以及使用的编码(UTF-8万国码)

<?xml version="1.0" encoding="UTF-8"?>

1.  `自定义标签``XML``中没有默认的标签``,``所有的标签都是我们定义者自定义的`

1.  `双标签``XML``中没有但标签``,``都是双标签`

1.  `根节点``XML``中必须有一个根节点``,``所有的子节点都放置在根节点下`

<root>

</root>

*  **XML****属性** 跟`HTML`一样,`XML`的标签里面也能够添加属性`type = 'text'`,但是不建议这样用,而是使用标签的方式来表述内容(下半部分代码)

<lastname>Smith</lastname>

</person>

<sex>female</sex>

<lastname>Smith</lastname>

</person>

### **XML解析** ###

因为`XML`就是标签,所以直接用解析`Dom`元素的方法解析即可

*  **html****代码**

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</person>

</body>

</html>

获取方法

var xmlObj = document.getElementById("personXML");

var name = xmlObj.getElementsByTagName('name')[0].innerHTML;

console.log(name);

</script>

## **PHP中设置Header** ##

在php中如果要使用xml传输数据,需要使用`header()`设置返回的内容为xml

header('content-type:text/xml;charset=utf-8');

读取xml文件 并返回:echo file_get_contents('info/star.xml');

document.querySelector('#getXML').onclick = function () {

var ajax = new XMLHttpRequest();

ajax.open('get','get_XMl.php');

ajax.send();

ajax.onreadystatechange = function () {

if (ajax.readyState == 4 && ajax.status==200) {

// 如果 返回的是 xml文件

console.log(ajax.responseText);

// 异步 对象中 有另外一个属性 用来专门获取 xml

// xml对象 在浏览器段 就是一个 document对象

// 解析时 可以直接使用 querySelector 或者 getElementById等等 document对象 有的语法

console.log(ajax.responseXML);

console.log(ajax.responseXML.querySelector('kuzi').innerHTML);

// 下面这个 页面文档对象 如果要获取某个标签

console.log(window.document);

}

## **Ajax传输json** ##

### **JSON解析** ###

### **JavaScript 中** ###

*  使用`JSON`对象
    
     *  JSON.parse()方法:将`JSON`字符串转化为`JavaScript`对象
     *  JSON.stringify()方法:将`JavaScript`对象,转化为`JSON`字符串
     *  由于老式`IE(8``以下``)`浏览器中没有`JSON`对象,通过导入`JSON2.js`框架即可解决,框架获取地址为:[JSON2.js\_github地址][JSON2.js_github]

var Obj = {

name:"fox",

age:18,

skill:"撩妹"

};

console.log(Obj);

// 将JavaScript对象格式化为JSON字符串

var jsonStr = JSON.stringify(Obj);

console.log(jsonStr);

// 将JSON字符串转化为JavaScript对象

var jsonObj = JSON.parse(jsonStr);

console.log(jsonObj);

### PHP中

* **json_decode()**方法: 将`json`字符串转化为php对象

* **json_encode()**方法: 将php数组转化为`json`字符串

* **示例代码:**

<?php

header("Content-Type:text/html;charset=utf-8");

// json字符串

$jsonStr = '{"name":"buka","age":54,"skill":"歌神"}';

// 字符串转化为 php对象

print_r(json_decode($jsonStr));

echo "<br>";

// php数组

$arrayName = array('name' =>'littleFox' ,'age' => 13 );

// php对象 转化为 json字符串

print_r(json_encode($arrayName));

*  输出结果为:

stdClass Object ( [name] => buka[age] => 54 [skill] => 歌神 )

{"name":"littleFox","age":13}

## **Ajax工具函数封装** ##

### **原生Ajax写法回顾** ###

原生使用`Ajax`主要分为五步,需要手写较多内容,如果每次我们使用`Ajax`都需要手写一遍,较为浪费时间,所以我们将公共代码抽取,封装为工具函数.

*  **五步使用法****:**
    
    1.  建立XMLHTTPRequest对象
    2.  注册回调函数
        
         *  当服务器`回应`我们了,我们想要执行什么逻辑
    3.  使用open方法设置和服务器端交互的基本信息
        
         *  设置提交的`网址`,`数据`,`post`提交的一些额外内容
    4.  设置发送的数据，开始和服务器端交互
        
         *  发送数据
    5.  更新界面
        
         *  在注册的回调函数中,获取返回的数据,更新界面

*  **示例代码****:GET** get的数据,直接在请求的`url`中添加即可

// 创建XMLHttpRequest 对象

var xml = new XMLHttpRequest();

// 设置跟服务端交互的信息

xml.open('get','01.ajax.php?name=fox');

xml.send(null);    // get请求这里写null即可

// 接收服务器反馈

xhr.onreadystatechange = function () {

// 这步为判断服务器是否正确响应

if (xhr.readyState == 4 && xhr.status == 200) {

// 打印响应内容

alert(xml.responseText);

}

};

</script>

*  **示例代码****:POST**

// 异步对象

var xhr = new XMLHttpRequest();

// 设置属性

xhr.open('post', '02.post.php' );

// 如果想要使用post提交数据,必须添加

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

// 将数据通过send方法传递

xhr.send('name=fox&age=18');

// 发送并接受返回值

xhr.onreadystatechange = function () {

// 这步为判断服务器是否正确响应

if (xhr.readyState == 4 && xhr.status == 200) {

alert(xhr.responseText);

}

};

</script>

### **抽取公共部分** ###

**重复步骤分析:**

* 创建异步对象

* 异步对象`open`,`send`方法调用

* `post`方法添加`HTTP`协议头文件

* 判断`Ajax`响应状态

**封装方法1:提取需要改变部分**

这些应该是调用时,由用户传入的

1. **提交方法**

2. **url地址**

3. **数据**

4. **Ajax请求成功调用方法**

**封装方法2:定义方法参数**

将需要用户自定义的部分,通过方法的参数传递进来

**封装方法3:优化参数**

参数的数量较多,如果可以之传入一个`对象`,将需要传入的参数,作为对象的属性,方法看起来会更为简洁

**封装方法4:参数格式化**

自定义ajax传递参数时,数据的格式为`name=fox&age=18`,而我们在写js代码时,创建`js``对象`更为便捷,所以接下来添加处理数据的逻辑

*  **思路分析****:**约定:传入的是`js``对象`
    
     *  将`js``对象`格式化为:`name=fox&age=18`
     *  判断提交方法,将格式化好的数据放置到对应的位置

## **Jquery中的ajax** ##

### **格式化表单$('form').serialize()** ###

我们在向服务器提交数据时,如果使用的是`Ajax`需要手动将数据格式化`name=fox&age=18`类似这样的格式,`JQuery`已经帮助我封装好了一个格式化数据的方法

*  **语法****:$(selector).serialize()** 直接可以将`form`中拥有`name`属性的表单元素的字,进行格式化
 *  **示例代码****:**

<!DOCTYPE html>

<head>

<title>测试jq_serialize方法</title>

$(function(){

$("#getFormInfo").on("click",function(){

var info = $("#testForm").serialize()

console.log(info);

})

</script>

</head>

<body>

</form>

</body>

</html>

### **JQueryAjax使用** ###

`JQuery`作为最受欢迎的`js`框架之一,常见的`Ajax`已经帮助我们封装好了,只需要调用即可

**$.get()方法**

使用`get`方法向服务器获取数据

*  **参数列表**

<table style="margin-left:9.75pt;width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:205.8pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">参数</span></strong></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:304.55pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">描述</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:205.8pt;"> <p style="margin-left:0cm;"><em><span style="color:#333333;">url</span></em></p> </td> 
   <td style="background-color:#f8f8f8;width:304.55pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">必需。规定将请求发送的哪个</span><span style="color:#333333;"> URL</span><span style="color:#333333;">。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:205.8pt;"> <p style="margin-left:0cm;"><em><span style="color:#333333;">data</span></em></p> </td> 
   <td style="background-color:#ffffff;width:304.55pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">可选。规定连同请求发送到服务器的数据。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:205.8pt;"> <p style="margin-left:0cm;"><em><span style="color:#333333;">success(response,status,xhr)</span></em></p> </td> 
   <td style="background-color:#f8f8f8;width:304.55pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">可选。规定当请求成功时运行的函数。</span></p> <p style="margin-left:0cm;"><span style="color:#333333;">额外的参数：</span></p> 
    <ul> 
     <li><span style="color:#333333;">response - </span><span style="color:#333333;">包含来自请求的结果数据</span></li> 
     <li><span style="color:#333333;">status - </span><span style="color:#333333;">包含请求的状态</span></li> 
     <li><span style="color:#333333;">xhr - </span><span style="color:#333333;">包含</span><span style="color:#333333;"> XMLHttpRequest </span><span style="color:#333333;">对象</span></li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:205.8pt;"> <p style="margin-left:0cm;"><em><span style="color:#333333;">dataType</span></em></p> </td> 
   <td style="background-color:#ffffff;width:304.55pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">可选。规定预计的服务器响应的数据类型。</span></p> <p style="margin-left:0cm;"><span style="color:#333333;">默认地，</span><span style="color:#333333;">jQuery </span><span style="color:#333333;">将智能判断。</span></p> <p style="margin-left:0cm;"><span style="color:#333333;">可能的类型：</span></p> 
    <ul> 
     <li><span style="color:#333333;">"xml"</span></li> 
     <li><span style="color:#333333;">"html"</span></li> 
     <li><span style="color:#333333;">"text"</span></li> 
     <li><span style="color:#333333;">"script"</span></li> 
     <li><span style="color:#333333;">"json"</span></li> 
     <li><span style="color:#333333;">"jsonp"</span></li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

**$.post()方法**

通过`post`的方式向服务器获取数据

*  **参数列表****:**

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:220.9pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">参数</span></strong></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:313.35pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">描述</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:220.9pt;"> <p style="margin-left:0cm;"><em><span style="color:#333333;">url</span></em></p> </td> 
   <td style="background-color:#f8f8f8;width:313.35pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">必需。规定把请求发送到哪个</span><span style="color:#333333;"> URL</span><span style="color:#333333;">。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:220.9pt;"> <p style="margin-left:0cm;"><em><span style="color:#333333;">data</span></em></p> </td> 
   <td style="background-color:#ffffff;width:313.35pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">可选。映射或字符串值。规定连同请求发送到服务器的数据。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:220.9pt;"> <p style="margin-left:0cm;"><em><span style="color:#333333;">success(data, textStatus, jqXHR)</span></em></p> </td> 
   <td style="background-color:#f8f8f8;width:313.35pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">可选。请求成功时执行的回调函数。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:220.9pt;"> <p style="margin-left:0cm;"><em><span style="color:#333333;">dataType</span></em></p> </td> 
   <td style="background-color:#ffffff;width:313.35pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">可选。规定预期的服务器响应的数据类型。</span></p> <p style="margin-left:0cm;"><span style="color:#333333;">默认执行智能判断（</span><span style="color:#333333;">xml</span><span style="color:#333333;">、</span><span style="color:#333333;">json</span><span style="color:#333333;">、</span><span style="color:#333333;">script </span><span style="color:#333333;">或</span><span style="color:#333333;"> html</span><span style="color:#333333;">）。</span></p> </td> 
  </tr> 
 </tbody> 
</table>

*  **示例代码****:**

$.post("01.post.php",data,function(backData){

console.log(backData);

})

**$.ajax(\{\}) 方法**

`$.ajax()`方法相比于前面的方法,拥有更为自由的定制性,可以替换`$.get()`,`$.post()`方法

*  **参数****:**
    
     *  参数只有下列一个.实际使用中,传递的是一个对象
     *  而对象的属性在页面的下方

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:144.45pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">参数</span></strong></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:375.6pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">描述</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:144.45pt;"> <p style="margin-left:0cm;"><em><span style="color:#333333;">settings</span></em></p> </td> 
   <td style="background-color:#f8f8f8;width:375.6pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">可选。用于配置</span><span style="color:#333333;"> Ajax </span><span style="color:#333333;">请求的键值对集合。</span></p> <p style="margin-left:0cm;"><span style="color:#333333;">可以通过</span><span style="color:#333333;"> $.ajaxSetup() </span><span style="color:#333333;">设置任何选项的默认值。</span></p> </td> 
  </tr> 
 </tbody> 
</table>

*  **示例代码****:**
    
     *  这里演示的是常用的属性

$.ajax({

url:'01.php',//请求地址

data:'name=fox&age=18',//发送的数据

type:'GET',//请求的方式

success:function (argument) {},// 请求成功执行的方法

beforeSend:function (argument) {},// 在发送请求之前调用,可以做一些验证之类的处理

error:function (argument) {console.log(argument);},//请求失败调用

})

## **模版引擎** ##

### **模版引擎简介** ###

我们在使用`ajax`请求数据时,返回的如果是一个`JSON`格式的字符串,我们需要将其包装到对应的`HTML`代码中,再添加到页面上,才能看到效果.那么这个`包装`得过程有没有简单的方法呢?

*  假设有如下数据(`javascript`中)
 *

var obj = {

name:"fox",

age:18,

skill:"卖萌"

};

希望`包装`为:

<ul>

</ul>

*  **定义模板****,****替换****:** 其间需要我们使用对象替换的位置为`<%=``属性名``%>`部分,如果可以`读取模板`\->`传入对象`\->`完成替换`\->`返回``html``代码` 实现这样的步骤,那么就能够完成我们的模板操作了

### **模版插件原理** ###

我们定义一段文本作为模板,读取文本,使用特殊的符号`<%=``属性名``%>`,通过`正则表达式`找到这些特殊的符号进行替换,是不是就实现了这样的效果呢?

### **常见的模板插件** ###

BaiduTemplate(百度开发) /ArtTemplate(腾讯开发) /velocity.js(淘宝开发)

### **ArtTemplate基本使用** ###

模板引擎的用法大同小异,`ArtTemplate`由于性能优秀,这里我们演示`ArtTemplate`的用法

*  **导入模板引擎****:** 将下载好的`ArtTemplate`导入到页面中

*  **定义模板****:**

`<% %>`这样的语法是定义逻辑表达式

`<%=``内容``%>`这样的语法为输出表达式

**注意****:**这路的模板`type='text'`如果写成`type=javascript`会执行

<ul>

<li><ul>favouriteFood

<% for(var i = 0 ;i < favouriteFood.length;i++) {%>

<% } %>

</ul>

</li>

</ul>

</script>

*  **读取模板****,****传入数据****:**

导入了`模板引擎`以后,我们可以使用`template(``模板``id,``数据``);`

// 调用模板引擎的方法

var backHtml = template("templ01",data);

// 返回值就是填充好的内容

## **同源以及跨域** ##

iframe : 浏览器中的浏览器

Iframe.contentWindow.document 获取窗口内部的节点

### **同源** ###

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:197.05pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">URL</span></strong></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:157.35pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">说明</span></strong></p> </td> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:172.75pt;"> <p style="margin-left:0cm;"><strong><span style="color:#333333;">是否允许通信</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:197.05pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.a.com/a.js<br> http://www.a.com/b.js</span></p> </td> 
   <td style="background-color:#f8f8f8;width:157.35pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">同一域名下</span></p> </td> 
   <td style="background-color:#f8f8f8;width:172.75pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">允许</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:197.05pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.a.com/lab/a.js<br> http://www.a.com/script/b.js</span></p> </td> 
   <td style="background-color:#ffffff;width:157.35pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">同一域名下不同文件夹</span></p> </td> 
   <td style="background-color:#ffffff;width:172.75pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">允许</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:197.05pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.a.com:8000/a.js<br> http://www.a.com/b.js</span></p> </td> 
   <td style="background-color:#f8f8f8;width:157.35pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">同一域名，不同端口</span></p> </td> 
   <td style="background-color:#f8f8f8;width:172.75pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">不允许</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:197.05pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.a.com/a.js<br> https://www.a.com/b.js</span></p> </td> 
   <td style="background-color:#ffffff;width:157.35pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">同一域名，不同协议</span></p> </td> 
   <td style="background-color:#ffffff;width:172.75pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">不允许</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:197.05pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.a.com/a.js<br> http://70.32.92.74/b.js</span></p> </td> 
   <td style="background-color:#f8f8f8;width:157.35pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">域名和域名对应</span><span style="color:#333333;">ip</span></p> </td> 
   <td style="background-color:#f8f8f8;width:172.75pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">不允许</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:197.05pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.a.com/a.js<br> http://script.a.com/b.js</span></p> </td> 
   <td style="background-color:#ffffff;width:157.35pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">主域相同，子域不同</span></p> </td> 
   <td style="background-color:#ffffff;width:172.75pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">不允许</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#f8f8f8;border-color:#dddddd;width:197.05pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.a.com/a.js<br> http://a.com/b.js</span></p> </td> 
   <td style="background-color:#f8f8f8;width:157.35pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">同一域名，不同二级域名（同上）</span></p> </td> 
   <td style="background-color:#f8f8f8;width:172.75pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">不允许（</span><span style="color:#333333;">cookie</span><span style="color:#333333;">这种情况下也不允许访问）</span></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#ffffff;border-color:#dddddd;width:197.05pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">http://www.cnblogs.com/a.js<br> http://www.a.com/b.js</span></p> </td> 
   <td style="background-color:#ffffff;width:157.35pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">不同域名</span></p> </td> 
   <td style="background-color:#ffffff;width:172.75pt;"> <p style="margin-left:0cm;"><span style="color:#333333;">不允许</span></p> </td> 
  </tr> 
 </tbody> 
</table>

### **跨域方案(了解)** ###

顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名

*  document.domain + iframe
 *  window.name + iframe
 *  location.hash + iframe
 *  window.postMessage()

详: [解决跨域方案][Link 5]

### **JSONP(了解)** ###

`JSON with Padding`其本质是利用了`<script src=""></script>`标签src属性具有可跨域的特性，由服务端返回一个预先定义好的`Javascript`函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。

只能以GET方式请求

*  注意只能够通过`get`方法
 *  服务端代码

<?php

// echo "alert('天气不错哦')";

$callBack = $_GET['callback'];

$arr = array(

'name' =>'西兰花' ,

'color' =>'red'

);

echo $callBack."(".json_encode($arr).")";

*  前端代码:注意,域名不同
    
     *  核心是 通过script标签的src属性提交get请求

<!DOCTYPE html>

<head>

<title>Document</title>

function fn(data){

console.log(data);

}

</script>

</head>

<body>

<h1>区域1的页面_jsonP演示</h1>

</body>

</html>

### **jQuery 的$.ajax()** ###

方法当中集成了JSONP的实现，可以非常方便的实现跨域数据的访问。

dataType: 'jsonp' 设置dataType值为jsonp即开启跨域访问

`jsonp` 可以指定服务端接收的参数的“key”值，默认为`callback`

`jsonpCallback` 可以指定相应的回调函数，默认自动生成

*  示例代码

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

Function myJsonPCallback’(){

//逻辑处理

}

function sendAjax(){

$.ajax({

url:'http://192.168.31.55/sectcion02_jqJsonp.php',

type:'post',

dataType: 'jsonp',

jsonCallback:’myJsonPCallback’

data:{name:'itt'},

success:function(data){

console.log(data);

}

})

}

</script>

## **瀑布流** ##

Jq插件 :

// 为 jq 添加 插件

// 注册完毕以后 使用 $("xxx"). waterfall使用

方法:$.fn.extend(\{

//json

waterfall:function()\{

//逻辑

\})

调用方式:

$(".items").waterfall();

插件:

$.fn.extend(\{

"bgC": function () \{

//this 代表当前调用我的对象

var $this = this;

$this.css(\{"backgroundColor": "red"\});

return $this;

\})

### **什么是瀑布流?** ###

`瀑布`值得是从上往下流动的水,并且水量也较大,`瀑布流`指的是内容,信息,像瀑布一样从上往下进行排布

*  **瀑布****:**

*  **瀑布流****:** **示例取自****:**[堆糖网][Link 6]

### **瀑布流实现原理** ###

瀑布流的核心为:

1. `宽度`一致,`高度`参差不齐

2. 新增行的内容,优先添加到`最矮`的下方

*  **难点****:**  
    **当我们到了新一行时****,****如何获取上一行高度最小的行高****?** 可以定义数组用来保存高度,新增了以后替换数组中原始的高度即可,如下图所示,`橙色`的为数组

**移动端开发**

移动web:移动端的页面, 大部分的用户对于网络的使用,依托于移动设备即可

### **设备** ###

平板

手机(智能手机)

### **移动web页面的作用** ###

让用户以一个轻量级的方式体验app

吸引用户去安装app

跟微信小程序有异曲同工之妙

公司在开发app之前可能会先做一个 移动web页面 让用户去体验,去找投资商要钱

成熟的公司

ios的app

安卓的app

移动web页面

### **注意点** ###

在较小的屏幕尺寸上,让用户看的清晰

关于这个技术,app的开发者已经试验了很久,并且效果不错

所以,移动web跟app的外观 很像

### **移动web的注意点** ###

移动端的操作系统

安卓

ios

windowsphone

塞班

黑莓

### **移动端的浏览器** ###

安卓内置的 谷歌浏览器

ios 内置的 Safari

uc不支持弹性布局

qq,百度,360,chrome,猎豹,内核 都是 webkit

经常会收到更新app的 提示

好处就是,浏览器版本都很新(新式浏览器)

移动端h5 c3 可以 放心 大胆的用,兼容性 非常好

移动端的浏览器兼容性 基本上只需要考虑 webkit内核即可

注意点:

越大的公司,考虑的东西越多

### **电脑上查看移动端界面** ###

在桌面端的浏览器中已经整合了 移动端界面模拟显示

老版本的谷歌移动端界面设置较多,在调试阶段可以选用 老版本

建议使用绿色的

安装最新的

绿色版本谷歌使用

将想要调试的页面 直接拖入url 会在当前页打开

拖入标签栏 会在新页面打开

修改谷歌浏览器的搜索引擎,可以直接在url中输入内容搜索,提升 工具使用效率

### **常见前端编辑器** ###

HBuilder

vscode

atom

sublime

webstorm

brackets

## **Viewport** ##

手机拥有了浏览器的初期,人们并没有专门为`移动设备`设计页面,造成的直接结果就是,访问的页面是直接将`电脑页面`进行缩放,操作起来有诸多不便,`viewport`就是用来解决这个问题的

### **viewport的概念** ###

*  移动设备上,用来显示网页的区域.
    
     *  如果把移动设备的浏览器(也有可能是`app``中的``webview`) ,当做相框的话
     *  `viewport`就相当于相框中的画,可能会比相框小,可能会比相框大,如果刚好一样大,那就皆大欢喜.

Sublime生成任意内容 : lorem + tab

### **修改viewport** ###

我们可以通过`meta`标签去修改`viewport`的值 ,防止滚动条出现,提升用户体验

*  移动web常见设置

*  该属性最早是苹果公司在`Safari`中推出用来解决移动设备的`viewport`问题的.后来被各大安卓以及浏览器厂商效仿,所以说这个属性真的是非常有用的

### **可选值** ###

*  **width:**
    
     *  设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
 *  **initial-scale:**
    
     *  设置页面的初始缩放值，为一个数字，可以带小数
 *  **minimum-scale:**
    
     *  允许用户的最小缩放值，为一个数字，可以带小数
 *  **maximum-scale:**
    
     *  允许用户的最大缩放值，为一个数字，可以带小数
 *  **height:**
    
     *  设置layout viewport 的高度，这个属性对我们并不重要，很少使用
 *  **user-scalable:**
    
     *  是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

## **移动web样式注意** ##

移动端开发不同于桌面端开发,需要注意一些细节

### **点击高亮效果** ###

在移动端浏览器会遇见点击出现高亮的效果，在某项项目是不需要这个默认的效果的。那么我们通常会把这个点击的颜色设置成透明。

-webkit-tap-highlight-color:transparent;/*清除a点击高亮效果*/

### **盒子模型** ###

通过`css3`的新属性`box-sizing`我们能够让盒子有限顾及自己的尺寸而不是内容,避免出现多余的滚动条

/*设置宽度以边框开始计算*/

-webkit-box-sizing: border-box;/*webkit内核兼容性写法*/

/* 保证 内容的大小不变 */

box-sizing: content-box;

/* 保证盒子大小不变 内容可能会变 移动端 设置 所有的盒子 都是border-box 目的 保证 盒子大小不变 */

box-sizing: border-box;

### **Input默认样式清除** ###

在移动设备的浏览器中input标签一般会有默认的样式,通过`border=none`,`outline=none`无法去除,比如立体效果,3d效果等等,我们需要添加下列样式

*  css代码

/*在移动端清除浏览器默认样式*/

-webkit-appearance: none;

### **最小宽度和最大的宽度** ###

考虑到移动设备在大尺寸的的屏幕不会过度缩放 失去清晰度,在小尺寸的屏幕中不会出现布局错乱的问题

*  css代码
    
     *  注 下列代码取值不是固定的,根据实际情况需要进行调整

max-width: 640px;  /*在行业当中的移动端的设计图一般使用的是640px*/

min-width: 300px;  /*在移动设备当中现在最小的尺寸320px*/

### **视网膜屏幕** ###

分辨率 跟 像素点关系 是 2倍关系的有

4,4s,5,5s,se,6

6plus 6splus

iphone5分辨率320\*568,屏幕中的像素点640\*1136

肉眼看不清 最小的 像素点

### **左右两张的无限轮播** ###

最左边 加上最后一张图

最右边 加上 第一张图

默认给用户看的 如果用索引来说 是索引为1的

找回写布局的感觉

### **touch** ###

*  **touchstart:**手指触摸时触发
 *  **touchmove:**手指在屏幕上滑动时连续触发
 *  **touchend:**当手指离开屏幕时触发。
 *  事件参数中 能够获取移动的一些属性

dom.addEventListener('touchstart',function(e){

console.log(e.targetTouches); //目标元素的所有当前触摸

console.log(e.changedTouches);//最新更改的所有触摸

console.log(e.touches);//所有的触摸

})

first-child,nth-child 需要考虑 其他的 兄弟节点 如果 是多种 兄弟 混合排布写的时候 就较为复杂

first-of-type: 找到 第一个 这种 类型的标签;

last-of-type: 找到 最后一个 这种 类型的标签;

nth-of-type(2) 找到 索引为 设置值的 某一类元素

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f2f2f2;width:492.65pt;"> 
    <ol> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; div h3:first-of-type{ </li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: darkorange;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; div h3:last-of-type{ </li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: yellowgreen;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</li> 
     <li>&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; div p:nth-of-type(2){ </li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: darkgoldenrod;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* 这种 会将 所有的 子节点 都算进去 */</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; div p:nth-child(2){ </li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: red;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; div p:nth-child(3){ </li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: yellow;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

### **过度事件** ###

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#f2f2f2;width:492.65pt;"> 
    <ol> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.onload = function () { </li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.querySelector("div").onclick = function () { </li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.style.backgroundColor = 'red';</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 添加事件 监听 transitionEnd</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // transitionEnd 是c3中 退出的 新属性 新属性对应的 新事件 浏览器厂商 需要添加 私有前缀</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.querySelector("div").addEventListener('transitionEnd',function () { </li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log('过渡结束了');</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; })</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 过渡结束事件</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.querySelector("div").addEventListener('webkitTransitionEnd',function () { </li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log('过渡结束了_添加了浏览器前缀的方法');</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.style.borderRadius ='20px';</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; })</li> 
     <li>&nbsp;</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

### **图片分辨率问题** ###

ios中会准备多张图片

早期的web开发中也会准备多张图片

现在流行的是 准备一张大图,然后进行压缩

### **移动端屏幕适配布局方式** ###

宽度百分比(自适应),定高

viewport

### **抽取通用样式** ###

目的是:

方便使用

将常用的样式 定义为通用的资源 使用的时候 直接 添加class即可

### **学习布局** ###

http://zh.learnlayout.com/ ,用通俗的话 描述 css , 建议 花半个小时 去看看

### **移动京东站首页js效果** ###

顶部通栏渐变色

倒计时

轮播图自动轮播

### **过度结束事件** ###

需要使用 addEventListener的方式添加

默认的方法名为transitionEnd

由于浏览器兼容性问题 可能需要添加前缀

webkitTransitionEnd

mozTransitionEnd

msTransitionEnd

oTransitionEnd

### **移动端特有事件** ###

touch

touchstart

事件参数中 有 触摸点的值

touchmove

事件参数中 有 触摸点的值

touchend

事件参数中 没有触摸点的值

注意:不能通过dom.ontouchstart的方式去绑定

只能addEventListener的方式进行绑定

只在移动设备上支持

### **常见的封装** ###

左滑,右滑

长按

捏合

等等这些事件 都是基于 touch三个事件的封装

### **LESS** ###

为CSS的赋予了动态语言的特性

变量、继承、运算、函数等，更方便CSS的编写和维护

sublime安装less插件

下载压缩包

sublime 菜单的 倒数第二项

第一个选项

把弹出的文件夹的路径 复制

双击压缩包

解压到

将复制的路径 拷贝进去

确定解压

开关sublime 即可

### **less只是一个纯文本** ###

装插件与否 仅仅影响的是 高亮效果

不影响代码的编写

webstorm 我需要研究一下再告诉大家

### **less使用** ###

创建后缀是.less的文件

运行考拉

讲less的文件夹拖入考拉

只要保存.less文件 ctrl+s 考拉 会自动帮助我们进行 编译

编译的作用是: 讲less 转化为 .css文件

讲less中的语法 根据一定的规则 替换为 对应的css代码

### **考拉编译注意点** ###

如果弹出红色框框 意味着 写错了代码

如果放.less文件的 文件夹 叫做 less

在编译的时候 会在跟less文件夹同级的目录下 创建一个 叫css的文件 编译好的代码就在那里面

如果文件夹名不叫 less 而是 其他的 那么 会在统计目录下

### **less的作用** ###

变量的作用

实现 替换变量值,所有使用变量的地方 都会被替换

### **如何让代码写的通用性更强** ###

**关于dom元素的值**

通过先获取dom元素 然后根据dom元素获取

高度

宽度

子元素个数

默认的样式等等

**不要在代码中出现magicNumber**

实际开发中 在代码最开始的时候 定义 一大堆的变量

成熟的js代码一般都是 先定义变量

**移动端click事件的触发 会延迟200毫秒**

为了提升用户体验,能够实时触发

一般会自己封装一个 叫做 tap的方法

手指快速点击

touch的事件只有三个

左右滑动,长按都是封装出来的

如何算tap事件(手指点上去 不移动 快速松开)

touchstart

记录开始时间

touchmove

手指不动是不会触发的

只要能够执行这个方法 就默认认为 失效

不移动逻辑 可以再这里处理

touchend

记录跟开始时间的差值

**console.log()**

这个方法是十分消耗性能的 所以 该方法 只会出现在 测试的时候,项目上线了 会去\`掉 console.log()

使用老版本的谷歌浏览器 刚切换到 移动端视口时,才能够看到click的延迟效果,如果刷新以后 就看不到了

**手机测试**

比较low的方法

直接拷贝到手机上 然后 通过手机的资源管理器 打开html页面 指定使用浏览器即可

手机登陆qq

电脑登陆qq

发送到我的设备

手机qq打开网站,选择使用浏览器

注意iphone 只支持 使用 qq浏览器才能够打开

公司上班时,会有一个专门的测试服务器

写好了网站以后 上传即可

wamp

配置完毕以后

将自己的移动站点 丢到这里面

保证手机跟电脑在同一个局域网中(连着同一个wifi)

手机打开浏览器输入 电脑的 ip地址 即可访问

### **响应式** ###

**基本概念**

针对所有设备

目的是开发一次即可

会根据设备的屏幕尺寸改变而改变布局

**技术的选取**

老项目

推出的时候手机还没有今天这么流行

重新开发一个移动端的站点

新项目

直接做响应式站点

性能考虑

在时间,金钱允许的情况下 各开发一个版本 是最好的

响应式网站的缺点

代码较多

维护较为复杂

工作中是否选用

看leader(组长,技术经理)

选择项目使用的 技术

开发时间

一般情况 是快于 1+1

直接使用js 也是能够实现该效果的 只不过 可能代码较多

直到CSS3中 推出了 媒体查询

就是 可以通过css 去获取 一些 设备的信息

**媒体查询**

一定要记得写空格,如果漏写空格 会出现无效的情况

空格可以多些

语法

@media screen and (max-width: 1000px)

屏幕尺寸 小于 等于 1000px的时候 引用 括号内的样式

@media screen and (min-width: 480px)

屏幕尺寸 大于 等于 480px的时候 使用括号内的样式

每一个 @media中 都可以 写 多个元素的样式

前面的样式会被后面的样式覆盖

**前端框架**

有一堆预定义的代码

html,css

也有一部分封装的js

可以直接使用

直接使用定义好的class

直接使用它定义好的 html层次结构(组件)

js插件

也可以改参数使用

**bootstrap**

2.x

早期的,目前很难看到

3.x

目前较为流行的版本 其中使用较多的是 3.3.5

4.x

在测试中,更为侧重于移动端

**bootstrap模板**

html5新语义标签的兼容性js

低版本ie中 实现 媒体查询的 js

栅格系统

shan ge

.container (固定宽度)

row

column

在某个范围内 取值是一定的

.container-fluid(100% 宽度)

row

column

会根据父盒子进行缩放

默认讲一行分为 12份, 在 col后面对应的数字 标示 改容器 占几份

col-md-1 占一份

如果 超过了12 换行

如果想要在 不同的品目宽度上 实现不同的布局 可以 通过添加 col-lg col-md col-sm col-xs来进行区分

如果 只写了 col-lg 那么会在小于 1200的宽度下 占一行

如果 只写了 col-lg col-md 那么会在小于 992x的宽度下 占一行

如果 只写了 col-lg col-md col-sm那么会在小于 768的宽度下 占一行

如果 只写了 col-lg col-md col-sm col-xs 会在 对应的 屏幕宽度下 使用 设置的值

### **微金所** ###

顶部通栏

栅格搭好框架

内部的子元素 以及子元素的 布局 还是使用自己手写css的方式

**任务**

boostrap 自己去探索 非常好玩 ^\_^

京东list页面的 使用纯js写完

### **响应式布局** ###

依托于媒体查询这项技术,实现页面布局的多设备适配(改变布局而已)

**wjs项目起始页**

css

base.css

基础样式

index.less

less文件

index.css

生成的css文件

fonts

微金所的字体图标

images

图片

js代码

lib

css

bootstrap的css文件 因为我们用了bootstrap框架 所以 需要导入

为了避免给自己得文件夹冲突 所以放在lib里面

fonts

bootstrap的字体图标的字体文件

跟bootstrap中的css文件 有相对路径关系 不能随机更改

bootstrap的js文件

jquery的文件

**模板页的引用**

由于将bootstrap的文件全部都丢到了lib文件夹中 ,所以需要修改模板页的内容

导入自己的css

base.css

封装了很多wjs的字体图标

index.css

首页的css

### **bootsrap使用** ###

使用组件更改样式

不建议直接修改bootstrap.css 源文件

如果更改了页面中其他想要使用默认样式的元素也会一起更改

为组件的对应html标签 添加自己得class 进行更改

不建议这样做

bootstrap的组件 嵌套关系 很多

建议 用法

拷贝bootstrap的原生样式

修改拷贝出来的原生样式的 类名

在更改了类型的样式中 修改css

使用组件的地方 替换为 我自己的 类名

好处

不会覆盖bootstrap的原生css

层次结构 再复杂 也无所谓

由于使用的是自己的class 不会造成覆盖的问题

快速浮动

pull-left

左浮动

pull-right

右浮动

bootstrap 已经默认帮我们清除了浮动 所以 直接使用浮动的class即可

**微金所信息区域**

最小屏幕要隐藏

大屏幕 一行3个

中等屏幕一行2个

使用栅格进行布局

a标签注意点

a标签的内部 不能嵌套a标签

浏览器会自动帮助我们 将 嵌套的a标签 转化为 兄弟关系的 a标签

### **标签页导航** ###

导航区域

a标签的href ='\#home'

内容区域

div id='home'

使用该注意

导航区域,内容区域 位置可以互换

两块区域是互相独立的 仅仅通过 href 跟id关联 所以可以放置在不同的 位置

如果想要增加导航跟内容 需要在两个区域 都添加东西

优惠券布局

左或右,定宽,另外一边自适应布局

将 浮动的html元素 前置

避免由于浏览器从上往下解析 造成的 显示问题

栅格使用补充

栅格是可以嵌套使用的

在栅格的内部,可以再次使用栅格,进行子元素的布局

如果外面已经使用了 栅格 .row 内部 可以再次 使用栅格的 col-xx的div 进行布局

由于 字体图标在定义时少写一个,在base.css中 添加了 wjs\_E915的class

### **bootstrap使用** ###

默认的能够使

直接使用

html标签组成不对

审查元素 进行删减

样式不对

找到bootstrap.css中的 该组间的 所有样式

拷贝,替换类名

修改自己使用的组间的类名 为步骤二的名字

进行修改即可

### **栅格系统的偏移** ###

栅格一行默认只能使用12份

偏移的宽度 也是 在这12份里面的

综上,一行能够放置的元素 计算 需要考虑偏移值

<div class="col-md-4 col-md-offset-4">col-md-offset-4</div>

如上,第一行只能放 div1的宽度4+div1的偏移值4+div2的宽度4 =12

语法col-xx-offset-x

xx 写的跟 栅格系统的 对应 屏幕宽度是一致的

x 写的是偏移值

col-lg-offset-4

### **zepto** ###

模块化

想要使用对应的功能 需要导入对应模块(.js文件)

语法跟jq基本一样

现在没有前几年流行

现在流行:jq 自己封装一个jq 把移动事件封装进去

### **+++++++++++++++++++++++++++++++++++++++++++‘’响应式布局** ###

依托于媒体查询这项技术,实现页面布局的多设备适配(改变布局而已)

**wjs项目起始页**

**css**

base.css

基础样式

index.less

less文件

index.css

生成的css文件

**fonts**

微金所的字体图标

**images**

图片

**js**

js代码

**lib**

css

bootstrap的css文件 因为我们用了bootstrap框架 所以 需要导入

为了避免给自己得文件夹冲突 所以放在lib里面

fonts

bootstrap的字体图标的字体文件

跟bootstrap中的css文件 有相对路径关系 不能随机更改

bootstrap的js文件

jquery的文件

**模板页的引用**

由于讲bootstrap的文件全部都丢到了lib文件夹中 ,所以需要修改模板页的内容

导入自己的css

base.css

封装了很多wjs的字体图标

index.css

首页的css

### **bootsrap使用** ###

使用组件更改样式

不建议直接修改bootstrap.css 源文件

如果更改了页面中其他想要使用默认样式的元素也会一起更改

为组件的对应html标签 添加自己得class 进行更改

不建议这样做

bootstrap的组件 嵌套关系 很多

建议 用法

拷贝bootstrap的原生样式

修改拷贝出来的原生样式的 类名

在更改了类型的样式中 修改css

使用组件的地方 替换为 我自己的 类名

好处

不会覆盖bootstrap的原生css

层次结构 再复杂 也无所谓

由于使用的是自己的class 不会造成覆盖的问题

快速浮动

pull-left

左浮动

pull-right

右浮动

bootstrap 已经默认帮我们清除了浮动 所以 直接使用浮动的class即可

### **微金所信息区域** ###

最小屏幕要隐藏

大屏幕 一行3个

中等屏幕一行2个

使用栅格进行布局

a标签注意点

a标签的内部 不能嵌套a标签

浏览器会自动帮助我们 将 嵌套的a标签 转化为 兄弟关系的 a标签

# **Php基础** #

## **phpstorm安装** ##

## **安装** ##

1.  **安装文件**
2.  **打开安装目录修改文件**

打开bin目录下phpstorm.exe.vmoptions，phpstorm64.exe.vmoptions两个文件

在文件末尾处添加：

\-javaagent:F:\\PhpStorm 2017.1.4\\lib\\JetbrainsCrack-2.6.2.jar

F:\\PhpStorm 2017.1.4\\lib\\ 改成你自己的地址

1.  **运行程序**

将下面内容复制到上图位置

ThisCrackLicenseId-\{??

"licenseId":"ThisCrackLicenseId",??

"licenseeName":"idea",??

"assigneeName":"",??

"assigneeEmail":"idea@163.com",??

"licenseRestriction":"For?This?Crack,?Only?Test!?Please?support?genuine!!!",??

"checkConcurrentUse":false,??

"products":\[??

\{"code":"II","paidUpTo":"2099-12-31"\},??

\{"code":"DM","paidUpTo":"2099-12-31"\},??

\{"code":"AC","paidUpTo":"2099-12-31"\},??

\{"code":"RS0","paidUpTo":"2099-12-31"\},??

\{"code":"WS","paidUpTo":"2099-12-31"\},??

\{"code":"DPN","paidUpTo":"2099-12-31"\},??

\{"code":"RC","paidUpTo":"2099-12-31"\},??

\{"code":"PS","paidUpTo":"2099-12-31"\},??

\{"code":"DC","paidUpTo":"2099-12-31"\},??

\{"code":"RM","paidUpTo":"2099-12-31"\},??

\{"code":"CL","paidUpTo":"2099-12-31"\},??

\{"code":"PC","paidUpTo":"2099-12-31"\}??

\],??

"hash":"2911276/0",??

"gracePeriodDays":7,??

"autoProlongated":false\}??

安装破解完毕

## **配置** ##

1.  设置代码及字体风格：File->Settings->Editor->Colors&Fonts->Font
2.  安装插件（如：tp，laravel，yii。。。）：File->Settings->Plugins
3.  设置自动换行：File->Settings->Editor->General->勾选 “ Use soft wrap in editor ”
4.  设置行号：File->Settings->Editor->General-》Appearance->勾选 “ show line numbers”
5.  最后记得点击应用，其他需要配置可以自行百度。

## **快捷键** ##

1.  **查询快捷键**

1.  CTRL+N 查找类
2.  CTRL+SHIFT+N 查找文件，打开工程中的文件(类似于eclipse中的ctrl+shift+R)，目的是打开当前工程下任意目录的文件
3.  CTRL+SHIFT+ALT+N 查 找类中的方法或变量(JS)
4.  CIRL+B 找变量的来源，跳到变量申明处
5.  CTRL+ALT+B 找所有的子类
6.  CTRL+SHIFT+B 找变量的 类
7.  CTRL+G 定位行，跳转行
8.  CTRL+F 在当前窗口查找文本
9.  CTRL+SHIFT+F 在指定路径查找文本
10. CTRL+R 当前窗口替换文本
11. CTRL+SHIFT+R 在指定路径替换文本
12. ALT+SHIFT+C 查找修改的文件，最近变更历史

1.  **自动代码**

1.  ALT+回车 导入包,自动修正
2.  CTRL+ALT+L 格式化代码
3.  CTRL+ALT+I 自动缩进
4.  CTRL+ALT+O 优化导入的类和包
5.  CTRL+E 最近更改的文件/代码
6.  CTRL+SHIFT+SPACE 切换窗口
7.  CTRL+SPACE空格 代码自动完成，代码提示,一般与输入法冲突
8.  CTRL+ALT+SPACE 类 名或接口名提示（与系统冲突）
9.  CTRL+P 方法参数提示，显示默认参数
10. CTRL+J 自动代码提示，自动补全
11. CTRL+ALT+T 把选中的代码放在 TRY\{\} IF\{\} ELSE\{\} 里
12. ALT+INSERT 生成代码(如GET,SET方法,构造函数等)

1.  **复制快捷方式**

1.  F5 复制文件/文件夹
2.  CTRL+C 复制
3.  CTRL+V 粘贴
4.  CTRL+X 剪 切,删除行
5.  CTRL+D 复制行
6.  Ctrl + Y 删除行插入符号
7.  CTRL+SHIFT+V 可以复制多个文本

1.  **其他快捷方式**

1.  CTRL+Z 倒退(代码后悔)
2.  CTRL+SHIFT+Z 向前
3.  CTRL+H 显 示类结构图
4.  Ctrl +F12 文件结构弹出
5.  Ctrl+Shift+H 方法的层次结构
6.  Ctrl+Alt+H 呼叫层次
7.  CTRL+Q 显示代码注释
8.  CTRL+W 选中代码，连续按会 有其他效果
9.  Ctrl+Shift+W 减少当前选择到以前的状态
10. CTRL+B 转到声明，快速打开光标处的类或方法说明注释(CTRL + 鼠标单击 也可以)
11. CTRL+O 魔术方法
12. CTRL+/ 注释//取消注释
13. CTRL+SHIFT+/ 注释/\*...\*/
14. CTRL+ \[\] 光标移动到 \{\}\[\]开头或结尾位置
15. CTRL+SHIFT+\[\] 选中块代码，可以快速复制
16. ctrl + '-/+': 可以折叠项目中的任何代码块,包括htm中的任意nodetype=3的元素，function,或对象直接量等等。它不是选中折叠，而是自动识别折叠。

1.  **调试**

1.  F8步过
2.  F7步入
3.  Shift + F7智能进入
4.  Shift + F8步骤
5.  ALT + F9运行到光标
6.  Alt + F8计算表达式
7.  F9恢复程序
8.  Ctrl + F8切换断点
9.  Ctrl + Shift + F8查看断点

## **服务器** ##

*  **环境安装**

单独安装

php

MySql

Apache

集成环境包

PhpStudy xampp wamp appserver phpwind...

文件夹不要有中文名

http://localhost 本地域名访问 [http://www.163.com][http_www.163.com 1] 只在本地访问

http://127.0.0.1 本地IP访问 走网卡

http://192.168.0.110 访问局域网内ip 走路由

配置文件修改后必须重启服务器才能生效

*  **浏览器访问Web服务器图解**

C:\\Windows\\System32\\drivers\\etc

*  **虚拟主机配置**
 *  **空间主机**

1.  **虚拟主机**

也叫虚拟空间，更通俗的叫法是网站空间。简单地讲，就是存放网站内容的地方。就是指能存放网站文件和资料，包括文字、文档、数据库、网站页面、图片等等文件的计算机空间。

虚拟主机其实就是服务器中的一块空间，往往都是从服务器中划分出来的。一台服务器中可以划分出来N个虚拟主机。

1.  **服务器**

服务器指一个管理资源并为用户提供服务的计算机软件，通常分为文件服务器、数据库服务器和应用程序服务器。运行以上软件的计算机或计算机系统也被称为服务器。相对于普通PC来说，服务器在稳定性、安全性、性能等方面都要求更高，因此CPU、芯片组、内存、磁盘系统、网络等硬件和普通PC有所不同。

通俗一点的理解，我们的虚拟主机所在的那台计算机，就叫服务器。

1.  **合租空间**

上面的概念我们提到，虚拟主机是从服务器中划分出来的，一台服务器可能会有N个虚拟主机，一个空间至少代表着一个网站。而一台服务器上的网站越多，就意味着这台服务器越不稳定。因为一台服务器的资源是有限的，上面的网站越多，每个网站分配到的资源越少，访问起来就会不稳定，甚至很慢。

理想的状态是整个服务器就我们一个网站，但是这样的话，成本肯定会很高，通常租用一台独立的服务器，一年至少要万元左右。那有没有一个折中的方法呢？答案是肯定的，就是召集几个人，一起共用一台服务器，然后费用平摊，这样即省了钱，又保证了服务器的稳定性和网站的质量。这种做法，就叫合租空间。

1.  **VPS主机**

VPS主机（虚拟专用服务器）（"Virtual Private Server"，或简称 "VPS"） ，是利用VPS（Virtual Private Server）技术，在一台服务器上创建多个相互隔离的虚拟专用服务器的优质服务。每个VPS的运行和管理都与一台独立主机完全相同，都可分配独立公网IP地址、独立操作系统、独立超大空间、独立内存、独立CPU资源、独立执行程序和独立系统配置等。用户除了可以分配多个虚拟主机及无限企业邮箱外，更具有独立服务器功能，可自行安装程序，单独重启服务器，总而言之，VPS是一项具备高弹性、高质量及低成本效益的服务器解决方案。

简单的说，VPS主机就是在一台真正的服务器上，利用技术手段建立多个虚拟主机。

1.  **云主机**

利用云技术建立起来的主机。云技术，简单的说就是把N台计算机的资源整合到一块，然后统一管理和统一分配资源。这样就能做到将这些计算机的效用发挥到最大。

## **PHP** ##

## **Web开发** ##

通常Web开发分为两大类：

1.  静态网站Web0

.html的文件都可以说是静态网站

1.  动态网站Web0

数据动态获取

*  **PHP的概念**

PHP原始为Personal Home Page的缩写，已经正式更名为 "PHP: Hypertext Preprocessor",中文名：“超文本预处理器”。是一个强大的网页程序语言，它是一种动态效果的文件，这样说并不代表文件本身内容会变动，而是通过程序设计的方式让浏览这个文件的使用者看到不同的结果。

*  **特点**

1.  免费&开源：完全免费，源代码全部公开
2.  跨平台：由于PHP是运行在服务器端的脚本，可以运行在UNIX、LINUX、WINDOWS、Mac OS、Android等平台,同时支持多种数据库
3.  易学：虽然PHP采用类似 C 语言语法，但是PHP并没有 C 语言的复杂，语法非常简洁。
4.  快捷：程序开发快，运行快，技术本身学习快。嵌入于HTML：因为PHP可以被嵌入于HTML语言，它相对于其他语言。编辑简单，实用性强。
5.  缺点：不擅长桌面程序ERP类软件

*  **版本**

1.  x-4.x太古老无视
2.  5.x 完全支持面向对象

5.1.x-5.2.x无视

5.3.x引入命名空间

5.4.x 引入数组简写 array() \[\]

5.5.x 不再支持xp

5.6.x

1.  6.x 胎死腹中
2.  7.x-7.2.2

提升性能

全面支持64位系统

东西太新,用的少

*  **执行方式**

<table style="margin-left:55.4pt;width:0px;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:352pt;"> <p style="margin-left:0cm;">1.浏览一个HTML档案：</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1.要求一个 HTM 档案</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2.回传HTML档案给客户端</p> <p style="margin-left:0cm;">&nbsp;</p> &nbsp; <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp; 客 户 端&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服务器</p> <p style="margin-left:0cm;">&nbsp;当客户端向服务器要求一个HTML时，服务器直接把档案传给浏览器，浏览器再做解析的动作。</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">2.浏览一个PHP档案：</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1.要求一个PHP档案</p> <p style="margin-left:0cm;">&nbsp;</p> <p style="margin-left:0cm;">&nbsp;</p> &nbsp; <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2.Apache服务器直译PHP档案并且</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 执行成为一个标准 HTML</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3.回传 HTML 档案给客户端</p> </td> 
  </tr> 
 </tbody> 
</table>

错误

Fatal Error:致命错误（脚本终止运行）

E\_ERROR // 致命的运行错误，错误无法恢复，暂停执行脚本

E\_CORE\_ERROR // PHP启动时初始化过程中的致命错误

E\_COMPILE\_ERROR // 编译时致命性错，就像由Zend脚本引擎生成了一个E\_ERROR

E\_USER\_ERROR // 自定义错误消息。像用PHP函数trigger\_error（错误类型设置为：E\_USER\_ERROR）

Parse Error：编译时解析错误，语法错误（脚本终止运行）

E\_PARSE //编译时的语法解析错误

Warning Error：警告错误（仅给出提示信息，脚本不终止运行）

E\_WARNING // 运行时警告 (非致命错误)。

E\_CORE\_WARNING // PHP初始化启动过程中发生的警告 (非致命错误) 。

E\_COMPILE\_WARNING // 编译警告

E\_USER\_WARNING // 用户产生的警告信息

Notice Error：通知错误（仅给出通知信息，脚本不终止运行）

E\_NOTICE // 运行时通知。表示脚本遇到可能会表现为错误的情况.

E\_USER\_NOTICE // 用户产生的通知信息。

error\_reporting(“E\_ALL & ~E\_NOTICE”);

*  **基本语法**

1.  **基本结构**

所有的 PHP 语法均必须被包在<?php ?>里面，并且每一行代码必须要用 「;」 结束：

<?php

程序代码;

例：

<?php

echo “Hello PHP”;

<? ?>

echo 123;

</script>

不建议使用

如果只输出一个变量:

<?=$变量名?>

例:

<?=$a?>

1.  **注释**

块注释: /\*\*/

行注释: // \#

1.  **输出**

echo 多对象输出,每个对象之间用’,’隔开

print 单对象输出

以下两个方法绝大多数绝大多数是用来做测试的

print\_r 输出数组,对象

var\_dump 打印详细内容

1.  **变量**

1.  命名

以$开始加名称

1.  命名规则

1.  必须以字母和’\_’开头。
2.  中间不能包含特殊符号。
3.  不能超过 255 个字符。
4.  在作用域中必须唯一。
5.  通常会用有意义的单词做变量名称
6.  PHP变量严格区分大小写
7.  同名变量后面的会覆盖前面的

1.  类型

三大类:

1.  基本类型:

整形

小数float double

布尔 true false

字符串

1.  复合类型

数组

对象

1.  特殊类型

Null

Resource 资源型

1.  作用域

1.  全局变量：被定义在所有函数以外的变量，其作用域为整个PHP文件，但是在用户自定义函数内部是不可用的，想在用户自定义函数内部使用全局变量，要使用关键字global声明，或者通过使用全局数组$Globals进行访问；
2.  局部变量：在函数内部定义的变量，只限于在函数内部使用，在函数外部不能被使用；

1.  特殊变量

1.  可变变量：可变变量是一种独特的变量，变量的名称并不是预先定义好的，而是动态地设置和使用。可变变量一般是指使用一个变量的值作为另一个变量的名称，所以可变变量又称为变量的变量。可变变量通过在一个变量名称前使用两个$符号实现；
2.  静态变量：能够在函数调用结束后仍保留变量值，当再次回到其作用域时，又可以继续使用原来的值。而一般变量在是在函数调用结束后，其存储的数据将被清除，所占的内存空间被释放。换句话说静态变量仅在局部函数域中存在，但当程序执行离开此作用域时，其值并不丢失。声明方法为： static $name=value;其中，static 为声明静态变量的关键字，$name 为变量的名称，value 为变量的取值。
3.  预定义变量：系统自带变量,具备一定的功能

$\_GET $\_POST $GLOBALS

1.  **常量**

1.  定义

define(常量名,常量值); const 常量名=常量值;

1.  特点

1.  不用$
2.  定义之后不可改变
3.  常量的名称为了区别于普通变量,我们用大写表示
4.  常量一般被用来书写配置文件

1.  预定义常量

1.  **运算符**

1.  算数运算符

1.  比较运算符

<table style="width:0px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#9999ff;width:42.7pt;"> <p style="margin-left:28pt;">符 号</p> </td> 
   <td style="background-color:#9999ff;width:54.05pt;"> <p style="margin-left:28pt;">意　义</p> </td> 
   <td style="background-color:#9999ff;width:383.25pt;"> <p style="margin-left:28pt;">用 法 与 语 法</p> </td> 
  </tr> 
  <tr> 
   <td style="width:42.7pt;"> <p style="margin-left:0cm;"><strong>==</strong></p> </td> 
   <td style="width:54.05pt;"> <p style="margin-left:0cm;">等于</p> </td> 
   <td style="width:383.25pt;"> <p style="margin-left:0cm;">系统判断等号左右是否<strong><span style="color:#000066;">相等</span></strong>相等则传回 <strong><span style="color:#ff0000;">True</span> </strong>不等则传回 <strong><span style="color:#ff0000;">False</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="width:42.7pt;"> <p style="margin-left:0cm;"><strong>===</strong></p> </td> 
   <td style="width:54.05pt;"> <p style="margin-left:0cm;">全等</p> </td> 
   <td style="width:383.25pt;"> <p style="margin-left:0cm;">系统判断左右是否相等,并且数据类型一致相等则传回 <strong><span style="color:#ff0000;">True</span> </strong>不等则传回 <strong><span style="color:#ff0000;">False</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="width:42.7pt;"> <p style="margin-left:0cm;"><strong>&gt;</strong></p> </td> 
   <td style="width:54.05pt;"> <p style="margin-left:0cm;">大于</p> </td> 
   <td style="width:383.25pt;"> <p style="margin-left:0cm;">系统判断是否<strong><span style="color:#000066;">大于</span></strong> 是则传回 <strong><span style="color:#ff0000;">True</span></strong>&nbsp; 不是则传回 <strong><span style="color:#ff0000;">False</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="width:42.7pt;"> <p style="margin-left:0cm;"><strong>&lt;</strong></p> </td> 
   <td style="width:54.05pt;"> <p style="margin-left:0cm;">小于</p> </td> 
   <td style="width:383.25pt;"> <p style="margin-left:0cm;">系统判断是否<strong><span style="color:#000066;">小于</span></strong> 是则传回 <strong><span style="color:#ff0000;">True</span></strong> 不是则传回 <strong><span style="color:#ff0000;">False</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="width:42.7pt;"> <p style="margin-left:0cm;"><strong>&lt;=</strong></p> </td> 
   <td style="width:54.05pt;"> <p style="margin-left:0cm;">小于等于</p> </td> 
   <td style="width:383.25pt;"> <p style="margin-left:0cm;">系统判断是否<strong><span style="color:#000066;">小于等于</span></strong><strong> </strong>是则传回 <strong><span style="color:#ff0000;">True</span></strong> 不是则传回 <strong><span style="color:#ff0000;">False</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="width:42.7pt;"> <p style="margin-left:0cm;"><strong>&gt;=</strong></p> </td> 
   <td style="width:54.05pt;"> <p style="margin-left:0cm;">大于等于</p> </td> 
   <td style="width:383.25pt;"> <p style="margin-left:0cm;">系统判断是否<strong><span style="color:#000066;">大于等于</span></strong><strong> </strong>是则传回 <strong><span style="color:#ff0000;">True</span></strong> 不是则传回 <strong><span style="color:#ff0000;">False</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="width:42.7pt;"> <p style="margin-left:0cm;"><strong>!=</strong></p> </td> 
   <td style="width:54.05pt;"> <p style="margin-left:0cm;">不等于</p> </td> 
   <td style="width:383.25pt;"> <p style="margin-left:0cm;">系统判断是否<strong><span style="color:#000066;">不等于</span></strong><strong> </strong>是则传回 <strong><span style="color:#ff0000;">True</span></strong> 不是则传回 <strong><span style="color:#ff0000;">False</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="width:42.7pt;"> <p style="margin-left:0cm;"><strong>&lt;&gt;</strong></p> </td> 
   <td style="width:54.05pt;"> <p style="margin-left:0cm;">不等于</p> </td> 
   <td style="width:383.25pt;"> <p style="margin-left:0cm;">系统判断是否<strong><span style="color:#000066;">不等于</span></strong><strong> </strong>是则传回 <strong><span style="color:#ff0000;">True</span></strong> 不是则传回 <strong><span style="color:#ff0000;">False</span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="width:42.7pt;"> <p style="margin-left:0cm;"><strong>!==</strong></p> </td> 
   <td style="width:54.05pt;"> <p style="margin-left:0cm;">非全等</p> </td> 
   <td style="width:383.25pt;"> <p style="margin-left:0cm;">&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

1.  逻辑运算符
2.  优先级

括号 > 算数运算符 > 比较 > 逻辑 > 赋值

符号&&与 and 的区别在于优先级

如果你的逻辑很复杂,请使用括号,不要相信自己的逻辑

1.  **流程控制**

1.  顺序控制

从上到下从左到右

1.  分支控制

1.  单分支

if()

1.  双分支

ifelse

1.  多分支

ifelseif

1.  switch分支

1.  **循环控制**

1.  for循环
2.  while循环
3.  dowhile循环
4.  break与continue
5.  goto

1.  **函数**

为完成某一功能的程序指令的集合(具有一定功能的代码块),称为函数,在php中函数分为自定义函数,系统预定义函数

1.  基本结构

//参数列表，用处是接收数据

function 函数名(参数列表)\{

//函数体；(完成某一个功能的指令集合)

//return 语句；(return语句主要的用处是返回一个结果，这

个可以没有)

1.  函数的命名跟自定义变量一样,首字母只能使用\_，A-Z,a-z；不要用数字或者特特殊字符开头
2.  函数名不区分大小写
3.  一个自定义函数中的变量是局部的，函数外不生效

1.  引入文件

require require\_once include include\_once

小结：我们应当使用哪个？

1.我们做项目的时候，基本上使用的是 require\_once

2.我们使用的 require\_once/require…应当放在 php前面

1.  函数参数

function 函数名(参数列表)\{

//函数体;

//return 语句；

1.  参数列表可以是多个参数
2.  参数可以多个,同时，其数据类型可以是php语言支持的任意类型
3.  如果定义的时候有参数调用时必须对该参数赋值
4.  如果定义的时候参数有默认值调用时可以不给
5.  如果给默认值，该参数一般要排列在最后
6.  参数个数无限制

## **基本数据类型** ##

### **（一）数组** ###

数组的值理论上可以是php支持的任意数据类型

1.  **索引型数组**

数值型数组,在js中接触的最多的数组\[1,2,3,4,5\] new Array(1,2,3,4,5);

array(1,2,3,4,5);

1.  **关联型数组**

键=>值

关联型数组的下标(键)是一个有意义的单词 关联型数组与js中的对象基本一样\{\}

id 名字 性别 年龄

array(‘id’=>’1’,’name’=>’小明’,’sex’=>’1’,’age’=>’12’);

1.  **一维数组**

一般情况下我们接触的数组都是一维数组,即数组的值是普通数据类型

1.  **二维数组**

数组的值依然是一个数组

1.  **遍历数组**

for循环遍历数组 暂时只能遍历数值型数组

遍历关联型数组用foreach

思考如何遍历二维数组

作业1:写个函数遍历无限维数组 递归

需要判断你输出的$val是否是数组

**中文字符集**

一共三个位置设置

1.  html页面meta标签 charset = utf-8
2.  php页面header(“Content-type:text/html;charset=utf-8”);
3.  数据库存取字符集(目前没用上)

*  **字符串函数**

1.  strlen(str)函数 //用于计算字符串的长 度,长度以1开始
2.  strpos("str1","str2"); //用于在字符串内检索另外一段字符串，如果查找到将返回该字符串的位置，否则返回false
3.  isset(var); //判断变量是否存在，返回值为true,false
4.  unset(var); //销毁变量
5.  substr(string,start,lenght); //截取字符串，返回截取完毕的字符串

start为负代表从后边开始数

length为负代表从后边开始数

1.  mb\_substr() 截取中文字符
2.  substr\_replace(str,replace,start); //替换字符串
3.  str\_replace()
4.  strrev(str); //翻转字符串
5.  str\_repeat(str,num); //将指定的字符串重复指定的次数
6.  str\_shuffle(str); //随机打乱字符串
7.  explode()函数 // 分割字符串返回数组
8.  strtolower()函数 //将字符串强制转换为小写
9.  strtoupper()函数 //将字符串强制转换为大写
10. lcfirst()
11. ucfirst()
12. ucwords()
13. strstr(); //从指定的字符串截取到最后的字符串
14. str\_pad()//使用另一个字符串填充字符串为指定长度
15. chr() //数转码
16. ord()//码转数
17. htmlspecialchars()
18. trim()
19. ltrim()
20. rtrim()
21. md5()

*  **数组函数**

1.  implode("分隔符",数组)函数 //将数组内元素组合，返回字符串
2.  array\_chunk(array,size,key); //将一个数组分割为新的二维数组
3.  array\_combine(); //通过合并两个数组来创建一个新的数组，其中一个作为新组数的下标，另一个做为新数组的值
4.  array\_count\_values(); //用于统计数组中所有值出现的次数，返回一个数组，元素的下标是原数组的值，键值是在数组中出现的次数
5.  array\_keys(); //返回数组中所有下标的一个新数组 新数组为数值型数组

作业2: for循环遍历关联数组

1.  array\_pop(); //删除数组中最后一个元素（出栈）并返回最后一个元素的值；
2.  array\_push(); //向数组尾部添加一个或多个元素，返回新数组的长度（入栈）
3.  array\_rand(); //从数组中随机选出一个或多个元素，并返回该元素的下标
4.  array\_shift(); //删除数组中第一个元素，并返回该元素的值，数组剩下的元素，如果是数值型数组，所有元素获得新的下标，0开始
5.  array\_unshift(); //向数组开头插入一个或多个元素
6.  in\_array(); //在数组中搜索指定的值，如果存在返回true,否则返回false
7.  array\_change\_key\_case()
8.  count()
9.  end()
10. sort()
11. array\_key\_exists()

练习: 获取一个任意文件的扩展名

*  **类型检测**

gettype();

is\_int() 检测是否是整形

is\_float()

is\_bool() 检查boolearn

is\_string() 检测是否是字符串

is\_array() 检测是否是数组

is\_object()

is\_null() 检测是否为空 null 为空返回true

is\_resource()

empty() 检测是否为空 凡是没有的都能检测出来

*  **预定义变量**

$\_POST

$\_GET

$\_REQUEST

$\_SERVER

## **数学函数** ##

abs() 绝对值

pi()

M\_PI 常量pi

sqrt()

pow()指数

进制

base\_convert() 任意

decbin() 10-2

decoct() 10-8

dechex() 10-16

bindec() 2-10

octdec() 8-10

hexdec() 16-10

取整

round()

ceil()

floor()

三角

deg2rad()

rad2deg()

sin() //参数弧度

cos()

hypot() 直角三角形斜边长

max()

min()

随机数

rand()

mt\_rand()

GD2图形函数库

应用，验证码，图像加水印，截取图像，缩略图

开启GD2图形函数库 php.ini

extension=php\_gd2.dll 前面;去掉

imagecreatefromjpeg("url");//复制图像

//imagettftext($im,50(字体大小),30(角度),900(水印的位置),300,$col,"simfang.ttf",$str);

imagettftext($im,60,0,300,300,$col,"STSONG.TTF","hello");

网站引入字体文件,包括作图的字体尽量使用免费字体或者系统自带字体

imagecolorallocate($im,255,0,0);

$w = imagesx($im);

$h = imagesy($im);

imagecolorallocatealpha($image, 255, 255, 0, 75);

透明颜色 最后一个参数alpha值0-127

imagecopyresampled(目标图像连接资源，源图像连接资源，目标x点坐标，目标y点坐标，源图像x点坐标，源图像y点坐标，目标宽度，目标高度，源图像的宽度，源图像的高度)

imagecopymerge(目标图像连接资源，源图像连接资源, 目标x点坐标，目标y点坐标，源图像x点坐标，源图像y点坐标，源图像的宽度，源图像的高度, pct);

思考 : 画图-白纸-笔-调色盘

1 imagecreatetruecolor(width,height);创建真色彩图像(画布)返回句柄(控制权)

2 输出 imagegif($im);

imagepng($im);

imagejpeg($im);

imagegif($im,"生成图像路径");

header("Content-type:image/gif");

header("Content-type:image/png");

header("Content-type:image/jpeg");

imagedestroy()销毁图像;

3 imagecolorallocate($im,r,g,b);准备颜色 (调色板)

4 imageline($im,x,y,x1,y1,$color);画线

5 imagefill($im,x,y,$color);填充，附近所有的点都会被填充

6 imagefilledellipse($im,x,y,width,height,$color);画椭圆 并填充

7 imageellipse();画椭圆线

8 imagefilledrectangle($im,x,y,x1,y1,$color); 矩形并填充

9 imagerectangle();矩形线

10 imagechar($im,$font,x,y,str,$color);水平绘制字符

11 imagestring();水平绘制字符串

12 imagestringup();垂直绘制字符串

13 imagesetpixel($im,x,y,$color);绘制单一像素点

14 imagearc (resource $image , int $cx , int $cy , int $w , int $h , int $s , int $e , int $color )

15 imagecopymerge()

imagecolorallocatealpha

imageantialias ($im,true);去锯齿

// 验证码

1 生成随机数

2 准备画布

3 雪花背景

4 随机数写入画布

## **存储** ##

## **一 COOKIES 缓存** ##

Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。Cookie名称和值可以由服务器端开发自己定义服务器可以利用Cookies包含信息的任意性来筛选并经常性维护这些信息，以判断在HTTP传输中的状态。 Cookies最典型的应用是判定注册用户是否已经登录网站，用户可能会得到提示，是否在下一次进入此网站时保留用户信息以便简化登录手续，这些都是Cookies的功用。另一个重要应用场合是“购物车”之类处理。户可能会在一段时间内在同一家网站的不同页面中选择不同的商品，这些信息都会写入Cookies，以便在最后付款时提取信息。

Cookie是服务器留在客户端的小文件 ,每个服务器最多在当前客户端放置20个cookie

每个客户端只能接受300个cookie文件

有一定得生存周期

1 设置cookie

设置cookie之前不能有任何形式的输出

setcookie('cookie名称','对应的值','存在的时间');

2 获取cookie

$\_COOKIES\['cookie名称'\];

3 如何让cookie失效（把时间设置为过去值）

setcookie('cookie名称','对应的值','过去式');

time(); 获取当前时间的时间戳

时间戳指从1970年1月1日到现在的秒数

## **$\_SESSION 重点** ##

session 的作用就是它在 Web服务器上保持用户的状态信息供在任何时间从任何页访问。因为浏览器不需要存储任何这种信息，所以可以使用任何浏览器。随着越来越多用户登录，Session 所需要的服务器内存量也会不断增加。访问 Web应用程序的每个用户都生成一个单独的 Session 对象。每个 Session 对象的持续时间是用户访问的时间加上不活动的时间。如果每个 Session 中保持许多对象，并且许多用户同时使用 Web应用程序（创建许多 Session），则用于 Session 持久性的服务器内存量可能会很大，从而影响了可伸缩性。

$\_SESSION是PHP的预定义数组，用于存储用户的会话信息，变量保存的数据是单一用户的，多个用户之间无法共享数据，并且可提供给程序中所有页面使用。session的创建取决于用户的使用，销毁于用户退出，或该用户默认24分钟内未向服务器提交任何请求。

在php的配置文件中可以更改默认时间：

php.ini

session.gc\_maxlifetime = 1440

session\_set\_cookie\_params

1开启session

session\_start();

2 对session存值

$\_SESSION\['名称'\]=值

3 关闭页面

unset销毁session

一定时间内无操作也会销毁session

session\_unset();

session\_destroy();

4 同名变量会影响到session的值

## **时间函数** ##

## **引用 &** ##

## **全局作用域** ##

global 关键字用于函数内部定义全局变量供外部使用 相当于新定义一个局部变量的全局变量副本

$GLOBAS 在函数内部使用外部变量

$\_FILES数组的内容

格式：$\_FILES\["表单字段名"\]\["属性"\]

$\_FILES\["表单元素名"\]\["type"\] 被上传文件的类型

$\_FILES\["表单元素名"\]\["size"\] 被上传文件的大小（字节为单位）

1M=1024KB

1KB=1024B; 以B为单位

2000000

$\_FILES\["表单元素名"\]\["name"\] 被上传文件的名称

$\_FILES\["表单元素名"\]\["tmp\_name"\] 被上传文件所在服务器的临时文件名称

$\_FILES\["表单元素名"\]\["error"\] 由上传文件所导致的错误代码

## **涉及到php的配置文件:php.ini** ##

在此配置文件中，有这么几个值是跟文件上传有密切关系的：

file\_uploads = on //是否允许系统支持文件上传

;upload\_tmp\_dir //临时文件的存储路径，linux下为系统默认路径，win32下需要指定

upload\_max\_filesize = 2m //允许文件上传最大体积

post\_max\_size = 2m //通过post方法给php时，php所能接受的最大数据容量

如果你上传的文件体积在8m一下(通常情况),那修改以上设置就可以满足你的要求了。。

但要>8m，那除了上面几个值，还要特别关注另外两个值了：

max\_execution\_time = 30 //每个script所执行的最大时间(php上传就时，体积大了，就是个时间问题)

memory\_limit = 8m //每个script所能消耗的最大memory

试着把这两个值改大些。一般就可以解决大多数问题了。

2 注意：如果表单需要上传文件，必须更改表单发送的数据类型，

在form标记中加入 enctype="multipart/form-data"

3 需要使用到的其它函数

move\_uploaded\_file("要移动文件的位置","新位置"); //移动上传文件的位置（只能操作被上传的

文件），如果移动成功返回true,失败返回false

rename("原有文件路径","新文件路径"); //对文件重新命名并更改位置

explode(); //分割字符串，返回数组

exe格式的视频 file获取的类型 ：application/octet-stream

swf格式 ：application/x-shockwave-flash

UPLOAD\_ERR\_OK

其值为 0，没有错误发生，文件上传成功。

UPLOAD\_ERR\_INI\_SIZE

其值为 1，上传的文件超过了 php.ini 中 upload\_max\_filesize 选项限制的值。

UPLOAD\_ERR\_FORM\_SIZE

其值为 2，上传文件的大小超过了 HTML 表单中 MAX\_FILE\_SIZE 选项指定的值。

UPLOAD\_ERR\_PARTIAL

其值为 3，文件只有部分被上传。

UPLOAD\_ERR\_NO\_FILE

其值为 4，没有文件被上传。

UPLOAD\_ERR\_NO\_TMP\_DIR

其值为 6，找不到临时文件夹。PHP 4.3.10 和 PHP 5.0.3 引进。

UPLOAD\_ERR\_CANT\_WRITE

其值为 7，文件写入失败。PHP 5.1.0 引进。

form流程写了,明天交

把上传封装成函数

## **GD2图形函数库**  ##

应用，验证码，图像加水印，截取图像，缩略图

开启GD2图形函数库 php.ini

extension=php\_gd2.dll 前面;去掉

imagecreatefromjpeg("url");//复制图像

//imagettftext($im,50(字体大小),30(角度),900(水印的位置),300,$col,"simfang.ttf",$str);

imagettftext($im,60,0,300,300,$col,"STSONG.TTF","hello");

网站引入字体文件,包括作图的字体尽量使用免费字体或者系统自带字体

imagecolorallocate($im,255,0,0);

$w = imagesx($im);

$h = imagesy($im);

imagecolorallocatealpha($image, 255, 255, 0, 75);

透明颜色 最后一个参数alpha值0-127

imagecopymerge(目标图像连接资源，源图像连接资源, 目标x点坐标，目标y点坐标，源图像x点坐标，源图像y点坐标，源图像的宽度，源图像的高度, pct);

思考 : 画图-白纸-笔-调色盘

1 imagecreatetruecolor(width,height);创建真色彩图像(画布)返回句柄(控制权)

2 输出 imagegif($im);

imagepng($im);

imagejpeg($im);

imagegif($im,"生成图像路径");

header("Content-type:image/gif");

header("Content-type:image/png");

header("Content-type:image/jpeg");

imagedestroy()销毁图像;

3 imagecolorallocate($im,r,g,b);准备颜色 (调色板)

4 imageline($im,x,y,x1,y1,$color);画线

5 imagefill($im,x,y,$color);填充，附近所有的点都会被填充

6 imagefilledellipse($im,x,y,width,height,$color);画椭圆 并填充

7 imageellipse();画椭圆线

8 imagefilledrectangle($im,x,y,x1,y1,$color); 矩形并填充

9 imagerectangle();矩形线

10 imagechar($im,$font,x,y,str,$color);水平绘制字符

11 imagestring();水平绘制字符串

12 imagestringup();垂直绘制字符串

13 imagesetpixel($im,x,y,$color);绘制单一像素点

14 imagearc (resource $image , int $cx , int $cy , int $w , int $h , int $s , int $e , int $color )

15 imagecopymerge()

imagecolorallocatealpha

imageantialias ($im,true);去锯齿

## **MYSQL数据库** ##

有很多种，php+mysql使用最方便的搭配 linux mysql apache php win apache mysql php

oracle mssql sql\_server mysql

mongoDb

修改mysql root用户密码

格式：set password for '用户名'@'主机'=password('新密码')

1 连接mysql数据库

运行-cmd- 输入 mysql -u root -p 回车

PASSWORD:123456/root

2 显示库

show databases;

3 选择库

use 库名;

4 显示库中表

show tables;

5 建库

create database 库名;

drop database 库名;

## **数据库中的数据类型** ##

1 数字类型 ：整形 浮点

2 字符类型 ：最多存储255字符 用

varchar (255)

char();

3 时间类型 ：例如（日期 2016-05-5） （时间 14：09:10) (日期时间 2016-05-5 14:09:10)

1）日期时间类型

mysql 数据类型 含义

date 3个字节，日期 格式：2016-05-5

time 3个字节， 时间 格式：14:11:25

datetime 8个字节，时间日期 格式：2016-05-5 14:09:10

timestamp 4个字节，自动存储记录修改时间

year 1个字节 年份

2）数值数据类型

2.1 整型

mysql 数据类型 含义

tinyint 1个字节，范围（-128~127）

smallint 2个字节，范围（-32768~32767）

mediumint 3个字节，范围（-8388608~8388607）

int 4个字节，范围（-2147483648~2147483647）

bigint 8个字节，范围（+-9.22\*10的18次方）

2.2 浮点型

mysql 数据类型 含义

float(m,d) 4个字节，m总个数，d小数位 单精度浮点型

double(m,d) 8个字节，m总个数，d小数位 双精度浮点型

decimal(m,d) 是存储为字符串的浮点数

3）字符串数据类型

mysql 数据类型 含义

char(n) 固定长度，最多255个字符

varchar(n) 可变长度，最多255个字符

tinytext 可变长度，最多255个字符

text 可变长度，最多65535个字符

mediumtext 可变长度，最多2的24次方-1个字符

longtext 可变长度，最多2的32次方-1个字符

6 建表

Char（20）

create table 表名

(

字段名1称 数据类型 字段属性 主键 自增,

字段名2称 数据类型 字段属性,

字段名3称 数据类型 字段属性

)

Char 定长的

Varchar 可变长度

String

create table user

(

id int(10) not null auto\_increment primary key,

username varchar(255) not null,

pwd varchar(255) not null,

sex ，

aihao

);

admin id int(10) username varchar(255) pwd

news\_type id type\_name

news id news\_tit writer con

7 desc 表名; 显示表结构

6 向表内添加字段

alter table 表名 add 字段名 数据类型;

7 删除表内字段

alter table 表名 drop 字段名;

8 修改字段名及数据结构

alter table 表名 change 原字段 新字段名 新数据类型;

9 删除主键

先修改字段名和数据类型不带自动递增->取消主键

alter table 表名 change id id int(10) not null;

alter table 表名 drop primary key;

10 设置主键

alter table 表明 add primary key(字段名);

========================================

sql 语句 curd

## **数据库内置函数:** ##

now() 获取当前时间

1 添

insert into 表名(字段1,字段2,字段3....) values('值1','值2','值3'...);

2 删

delete from 表名 where id='';

3 改

update 表名 set 字段名='值' 条件;

update admin set user='zhangfei' where id='';

4 查

select \* from 表名 where ;

==================

## **建一个表** ##

字段：

Id int（10）不为空 主键

Username varchar(20) 不为空

Password varchar(32) …

Sex int(1) …

Age int(3) …

Score int(3)…

Timer datetime

1 字段=值 and && or|| 都可以使用 比较运算符 > < >= <>....

2 select \* from 表名 order by id desc"; 降序排列 （新闻发布）

select \* from 表名 order by id asc"; 升序排列

3 where 字段=值 order by 字段 排序;

4 select 字段1,字段2..from 表名;

5 limit 查询 选取固定数量

limit num1; 只要前num1 条

limit num1,num2;

用来做分页

6 模糊查询(站内搜索)

select \* from 表名 where 字段名 like '%关键字%';

## **三范式：** ##

1NF: 字段具有原子性，不可再分，所有关系型的数据库管理操作系统必须满足第一范式（数据表中的字段都是唯一的（不能重名），不可再分）。

例如：姓名 其中姓名必须作为一个整体，无法区分哪部分是姓或者是名 如果要区分姓和名 ，必须设计数据俩个不同的字段（独立的字段）

2NF：是在第一范式（1NF）的基础上建立的，既满足第二范式必须先满足第一范式（1NF）

固定：要求实体的属性完全依赖于关键字

所谓关键字依赖是指：不能存在依赖关键字一部分的属性，如果存在，那么这个属性和关键字的一部分应该分离出来，形成一个新的实体，新的实体与原来实体之间是一对多的关系。

（第二范式总结：每一行都能被唯一的区分，强调一个表要有主键）

3NF：必须满足第二范式（2NF） 三范式要求一个数据表中不包含已存在的其他表中的非主 键关键字的信息（总结：与数据冗余有关，一个表不能包含其他表的非关键字的信息，也就是说你有其他表的主键作为自己表的外键，不能拿人家的其他字段）

所有的mysql数据的文件名后缀名 \*.sql结尾 （\*代表所有）

为什么要给数据表加上前缀，第一根据你的项目名称来定义的叫那么这个表的前缀就是以 bk开头 bk\_数据表名称 例如：bk\_admin 超级管理员数据表

原因二：设计到数据库的安全，防止不法分子破坏，猜到你的数据表名称（admin）

我们需要创建一个管理员表：bk\_admin

创建个用户表

使用wamp的同学 mysql没有初始化密码

1.  找到右下角wamp控制台 打开mysql控制台
2.  敲回车
3.  盘符:mysql>
4.  mysql>use mysql;
5.  mysql>update user set password=password(‘root’) where user = ‘root’;
6.  mysql>select password from user;
7.

## **PHP的mysql函数库** ##

1.  连接->选择库->操作表内数据->关闭数据库
2.  1 mysql\_connect(servername,username,password); //连接数据库函数
3.  
4.  2 mysql\_error(); //连接错误信息函数 mysql\_errno()
5.  
6.  3 mysql\_close($conn); //关闭数据库
7.  
8.  4 mysql\_select\_db("dbname",$conn);//选择库
9.  
10. 5 mysql\_query("query",$conn); //执行一条sql语句
11. 
12. 6 mysql\_fetch\_row($res);
13. //将选择的记录作为一条数组返回，数组的下标以0开始（索引数组）。同时具有向下移动记录指针功能
14. 
15. 7 mysql\_fetch\_assoc($res);//同上，返回的数组是一个关联数组，下标以字段为名
16. 
17. 8 mysql\_fetch\_array($res); //是上两个函数的集合体，返回的数组索引，既可以用数值，也可以用关联
18. 
19. 9 mysql\_num\_rows($res); //返回操作记录的数量
20. 
21. 10 mysql\_num\_fields(); // 取得结果集中字段的数量
22. 
23. 11 mysql\_get\_client\_info() 取得客户端信息
24. 
25. 12 mysql\_get\_host\_info() 取得主机信息
26. 
27. 13 mysql\_get\_proto\_info() 取得MYSQL协议版本
28. 
29. 14 mysql\_get\_server\_info() 取得MYSQL服务器信息
30. 
31. 15 mysql\_list\_dbs() 取得MYSQL服务器中所有的数据库，返回一个可操作记录的指针
32. 
33. 16 mysql\_insert\_id 取得上一步 INSERT 操作产生的 ID
34. 
35. 17mysql\_affected\_rows 取得前一次 MySQL 操作所影响的记录行数

## **PHP面向对象** ##

### **一、概念** ###

面向对象编程（Object Oriented Programming, OOP, 面向对象程序设计）是一种计算机编程架构，OOP 的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成，OOP达到了软件工程的三个目标：重用性、灵活性和扩展性。为了实现整体运算，每个对象都能够接收信息、处理数据和向其它对象发送信息。面向对象一直是软件开发领域内比较热门的话题，首先，面向对象符合人类看待事物的一般规律。其次，采用面向对象方法可以使系统各部分各司其职、各尽所能。为编程人员敞开了一扇大门，使其编程的代码更简洁、更易于维护，并且具有更强的可重用性。有人说 PHP 不是一个真正的面向对象的语言，这是事实。PHP 是一个混合型语言，你可以使用 OOP，也可以使用传统的过程化编程。然而，对于大型项目，你可能需要在 PHP 中使用纯的 OOP 去声明类，而且在你的项目里只用对象和类。

*  **类、对象**

**类**：类是具有相同属性和服务的一组对象的集合。它为属于该类的所有对象提供了统一的抽象描述，其内部包括属性和服务两个主要部分。在面向对象的编程语言中，类是一个独立的程序单位，它应该有一个类名并包括属性说明和服务说明两个主要部分。

**对象**：对象是系统中用来描述客观事物的一个实体，它是构成系统的一个基本单位。一个对象由一组属性和对这组属性进行操作的一组服务组成。从更抽象的角度来说，对象是问题域或实现域中某些事物的一个抽象，它反映该事物在系统中需要保存的信息和发挥的作用；它是一组属性和有权对这些属性进行操作的一组服务的封装体。客观世界是由对象和对象之间的联系组成的。

类与对象的关系就如模具和铸件的关系，类的实例化结果就是对象，而对一类对象的抽象就是类。类描述了一组有相同特性（属性）和相同行为（方法）的对象。

*  **面向对象编程**

开发一个系统程序，把每个独立的功能模块抽象成类，形成对象，由多个对象组成这个系统，这些对象之间都能够接收信息、处理数据和向其它对象发送信息等等相互作用。就构成了面向对象的程序。

高内聚,低耦合

*  **如何抽象出一个类**

class\{

成员属性：

成员方法：

class\{

var $name

*  **实例对象**
 *  **如何去使用对象中的成员**

this

### **七、构造方法、析构方法** ###

\_\_construct 构造方法

当类被实例化的时候会自动调用构造方法

般构造方法一般是用于类内属性的初始化

\_\_destruct 析构方法

当类实例化结束的时候会被自动调用

php中以 \_\_开头的方法叫魔术方法(magic method)

*  **封装性**

面向对象三大特性:

封装

继承

多态

private

*  **魔术方法**

\_\_set \_\_get \_\_isset \_\_unset

*  **继承**

“继承”是面向对象软件技术当中的一个概念。如果一个类A继承自另一个类B，就把这个A称为"B的子类"，而把B称为"A的父类"。继承可以使得子类具有父类的各种属性和方法，而不需要再次编写相同的代码。在令子类继承父类的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类的原有属性和方法，使其获得与父类不同的功能。另外，为子类追加新的属性和方法也是常见的做法。

有些编程语言支持多重继承

在c++语言中，一个派生类可以从一个基类派生，也，即一个子类可以同时有多个父类，比如C++编程语言；而在有些编程语言中，一个子类只能继承自一个父类，比如Java编程语言，这时可以利用接口来实现与多重继承相似的效果。可以从多个基类派生。从一个基类派生的继承称为单继承；从多个基类派生的继承称为多继承。

*  **访问类型**

修饰符

自己 子类 外部

public 1 1 1

protected 1 1 0

private 1 0 0

final 只能修饰类 方法 常量 define const

类 final 定义的类是不可以被继承的

方法 final定义的方法可以被子类继承,但是不能被子类重写(重载)

static

静态属性 在类被创建的时候创建,不属于对象 调用方法: 类名::属性名

静态方法 静态方法中只能访问静态属性或者静态方法,因为静态方法不属于对象没$this

调用方法: 类名::方法名

非静态方法可以访问静态方法和属性 调用方式: 类名::属性名 类

名::方法名

类内调用: self::属性/方法名

可以被继承

const

常量名不用$

一经定义不可被改变,可以继承 类内访问: self::常量名 类外访问: 类名::常量名

\_\_tostring

\_\_clone

\_\_call

抽象方法 抽象类

一个类中如果有一个抽象方法那么这个类就是抽象类,不能被实例化

子类继承抽象类,需要实现抽象类中的所有抽象方法才能被实例化

如果子类没有实现父类中所有的抽象方法,那么子类依然是一个抽象类

抽象类中可以有非抽象方法

作业:

回家把后台所有功能整理好

1.  管理员
2.  新闻
3.  产品
4.  可以建几个单表, 公司简介 系统配置

前台

网上找一个或者自己写一个

把后台数据取到前台

## **多态性** ##

多态性是指相同的操作或函数、过程可作用于多种类型的对象上并获得不同的结果。不同的对象，收到同一消息将可以产生不同的结果，这种现象称为多态性。  
  
多态性允许每个对象以适合自身的方式去响应共同的消息。多态性增强了软件的灵活性和重用性。  
  
在面向对象的软件开发中，多态性是最为重要的部分之一。面向对象编程并不只是将相关的方法与数据简单的结合起来，而是采用面向对象编程中的各种要素将现实生活中的各种情况清晰的描述出来。这一小节将对面向对象编程中的多态性作详细的讲解。  
  
**1.****什么是多态**  
  
多 态（Polymorphism）按字面上意思理解就是“多种形状”。可以理解为多种表现形式，也即“一个对外接口，多个内部实现方法”。在面向对象的理论 中，多态性的一般定义为：同一个操作作用于不同的类的实例，将产生不同的执行结果。也即不同类的对象收到相同的消息时，将得到不同的结果。  
  
在实际的应用开发中，采用面向对象中的多态主要在于可以将不同的子类对象都当作一个父类来处理，并且可以屏蔽不同子类对象之间所存在的差异，写出通用的代码，做出通用的编程，以适应需求的不断变化。  
  
**2.****多态的应用设计**  
  
在实际的应用开发中，通常为了使项目能够在以后的时间里的轻松实现扩展与升级，需要通过继承实现可复用模块进行轻松升级。在进行可复用模块设计时，就需要尽可能的减少使用流程控制语句。此时就可以采用多态实现该类设计。  
  
**【示例】例举了通常采用流程控制语句实现不同类的处理。**其代码如下所示。

.代码如下:

<?php  
class painter\{ //定义油漆工类  
public function paintbrush()\{ //定义油漆工动作  
echo "油漆工正在刷漆！/n";  
\}  
\}  
class typist\{ //定义打字员类  
public function typed()\{ //定义打字员工作  
echo "打字员正在打字！/n";  
\}  
\}  
function printworking($obj)\{ //定义处理类  
if($obj instanceof painter)\{ //若对象是油漆工类，则显示油漆工动作  
$obj->paintbrush();  
\}elseif($obj instanceof typist)\{ //若对象是打字员类，则显示打字员动作  
$obj->typed();  
\}else\{ //若非以上类，则显示出错信息  
echo "Error: 对象错误！";  
\}  
\}  
printworking(new painter()); //显示员工工作  
printworking(new typist()); //显示员工工作  
?>

**分析：**在上述程序中，首先定义两个员工类：油漆工类和打字员类。然后定义一个处理函数，在该函数中，判断员工是否为已经定义的员工，打印出员工的工作状态。其结果如下所示。  
油漆工正在刷漆  
打字员正在打字  
从 以上程序可轻松看出，若想显示其几种员工的工作状态，需要首先定义该员工类，并在该员工类中定义员工的工作，然后在printworking()函数中增 加elseif语句以检查对象是哪一员工类的实例。这在实际的应用中，是非常不可取的。若此时采用多态，则可以轻松解决此问题。  
  
可以首先创建一个员工父类，所有的员工类将继承自该员工父类，并且继承父类的所有方法与属性。然后在员工类中创建“是一”关系，判断是否为合法的员工。  
  
**【示例】例举了采用多态的方式改写上例**。其代码如下所示。

.代码如下:

<?php  
class employee\{//定义员工父类  
protected function working()\{//定义员工工作，需要在子类的实现  
echo "本方法需要在子类中重载!";  
\}  
\}  
class painter extends employee\{//定义油漆工类  
public function working()\{//实现继承的工作方法  
echo "油漆工正在刷漆！/n";  
\}  
\}  
class typist extends employee\{//定义打字员类  
public function working()\{  
echo "打字员正在打字！/n";  
\}  
\}  
class manager extends employee\{//定义经理类  
public function working()\{  
echo "经理正在开会！";  
\}  
\}  
function printworking($obj)\{//定义处理方法  
if($obj instanceof employee)\{//若是员工对象，则显示其工作状态  
$obj->working();  
\}else\{//否则显示错误信息  
echo "Error: 对象错误！";  
\}  
\}  
printworking(new painter());//显示油漆工的工作  
printworking(new typist());//显示打字员的工作  
printworking(new manager());//显示经理的工作  
?>

分析：在上述程序中，首先定义一个员工基类，并定义一个员工工作状态的方法。然后定义将继承自员工基类的三个员工类：油漆工类、打字员类和经理类。然后定义显示员工工作状态的方法。并在该方法中创建一个“是一”关系，用于判断是否为合法的员工。其结果如下所示。  
油漆工正在刷漆!  
打字员正在打字!  
经理正在开会!  
从上例可发现，无论增加多少个员工类，只需要实现自员工父类继承的该员工类和方法。而无须修改显示员工工作状态的方法printworking()。

## **Mysqli类** ##

$mysqli = new MySQLi(‘localhost’,’root’,123456,’php0216’);//实例化mysqli，带参数直接连接

@$mysqli->connect('localhost','root','123456');//@屏蔽错误，可以打开新的连接

$mysqli->select\_db('php0216');选择数据库

$mysqli->set\_charset("utf8");设置字符集

if(mysqli\_connect\_errno())\{//连接错误代码

die('连接错误：'.mysqli\_connect\_error());//连接错误信息

$mysqli->character\_set\_name()//获取mysql字符集

$mysqli->query($sql)//mysqli提交查询

$mysqli->affected\_rows;//上一条查询语句影响记录条数

$mysqli->error//最近函数调用错误的信息

$mysqli->erron//最近函数调用错误的代码

$mysqli->field\_count//最近查询获取的列数（字段数）

$mysqli->insert\_id//上一条添加语句返回ID

$mysqli->multi\_query();//提交多个sql语句，用“；”隔开

$mysqli->close()//关闭mysqli连接

Mysqli\_result类

$result->close//释放内存，关闭结果集，结果集将不可用

$result->field\_seek(2)//设置结果集中字段的偏移位置

$result->fetch\_field()//从结果集中获取某一字段的信息；

$result->fetch\_fields()//从结果集中获取全部字段的信息；

$result->fetch\_field\_direct(2)//从指定列返回信息

*  name - 列名
 *  table - 该列所在的表名
 *  max\_length - 该列最大长度
 *  not\_null - 1，如果该列不能为 NULL
 *  primary\_key - 1，如果该列是 primary key
 *  unique\_key - 1，如果该列是 unique key //唯一
 *  multiple\_key - 1，如果该列是 non-unique key//重复
 *  numeric - 1，如果该列是 numeric//数值
 *  blob - 1，如果该列是 BLOB
 *  type - 该列的类型
 *  unsigned - 1，如果该列是无符号数
 *  zerofill - 1，如果该列是 zero-filled
 *  decimals 小数

$result->fetch\_array()

$result->field\_count//查询结果中获取列的个数

$result->num\_rows//结果集中记录条数

Mysqli\_stmt类

$stmt=$mysqli->prepare($sql);//准备要预处理的语句；

$stmt->bind\_param('ssss',$name,$img,$desc,$timer)//把预处理语句中的参数与变量绑定

$stmt->execute()//执行预处理语句

$stmt->store\_result()//取回全部查询结果

$stmt->bind\_result($fields)//绑定查询结果字段

$stmt->fetch()//循环查询结果集

$stmt->close();//关闭资源

# **AngularJS** #

## **介绍** ##

AngularJS是一款由Google公司开发维护的前端MVC框架，其克服了[HTML][]在构建应用上的诸多不足，从而降低了开发成本提升了开发效率。

### **特点** ###

AngularJS与我们之前学习的jQuery是有一定的区别的，jQuery更准确来说只一个类库（类库指的是一系列函数的集合）以DOM做为驱动（核心），而AngularJS则一个框架（诸多类库的集合）以数据和逻辑做为驱动（核心）。

框架对开发的流程和模式做了约束，开发者遵照约束进行开发，更注重的实际的业务逻辑。

AngularJS有着诸多特性，最为核心的是：模块化、双向数据绑定、语义化标签、依赖注入等。

与之类似的框架还有BackBone、KnockoutJS、Vue、React等。

### **下载** ###

1、通过[AngularJS][]官网下载，不过由于国内特殊的国情，需要翻墙才能访问。

2、通过npm下载，npm install angular

3、通过bower下载，bower install angular

bower是什么？

### **体验AngularJS** ###

### **MVC** ###

MVC是一种开发模式，由模型（Model）、视图（View）、控制器（Controller）3部分构成，采用这种开发模式为合理组织代码提供了方便、降低了代码间的耦合度、功能结构清晰可见。

模型（Model）一般用来处理数据（读取/设置），一般指操作数据库。

视图（View）一般用来展示数据，比如通过HTML展示。

控制器（Controller）一般用做连接模型和视图的桥梁。

通过ThinkPHP来演示后端MVC的执行流程，其重点在于理解。

MVC更多应用在后端开发程序里，后被引入到前端开发中，由于受到前端技术的限制便有了一些细节的调整，进而出现了很多MVC的衍生版（子集）如MVVM、MVW、MVP、MV\*等。

MVVM:

1.  M model
2.  V view
3.  VM viewmodel

注：做为初学可以不必过于在意这些概念。

## **模块化** ##

使用AngularJS构建应用（App）时是以模块化（Module）的方式组织的，即将整个应用划分成若干模块，每个模块都有各自的职责，最终组合成一个整体。

采用模块化的组织方式，可以最大程度的实现代码的复用，可以像搭积木一样进行开发。

### **定义应用** ###

通过为任一HTML标签添加ng-app属性，可以指定一个应用，表示此标签所包裹的内容都属于应用（App）的一部分。

### **定义模块** ###

AngularJS提供了一个全局对象angular，在此全局对象下存在若干的方法，其中angular.module()方法用来定义一个模块。

注：应用（App）其本质也是一个模块（一个比较大的模块）。

### **定义控制器** ###

控制器（Controller）作为连接模型（Model）和视图（View）的桥梁存在，所以当我们定义好了控制器以后也就定义好了模型和视图。

模型（Model）数据是要展示到视图（View）上的，所以需要将控制器（Controller）关联到视图（View）上，通过为HTML标签添加ng-controller属性并赋值相应的控制器（Controller）的名称，就确立了关联关系。

以上步骤就是AngularJS最基本的MVC工作模式。

下图是AngularJS的结构，学习AngularJS会围绕下图的结构展开。

## **指令** ##

HTML在构建应用（App）时存在诸多不足之处，AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷，所谓指令就是AngularJS自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，例如ng-app、ng-controller、ng-repeat等。

### **内置指令** ###

ng-app 指定应用根元素，至少有一个元素指定了此属性。

ng-controller 指定控制器

ng-show控制元素是否显示，true显示、false不显示

ng-hide控制元素是否隐藏，true隐藏、false不隐藏

ng-if控制元素是否“存在”，true存在、false不存在

ng-src增强图片路径

ng-href增强地址

ng-class控制类名

ng-include引入模板

ng-disabled表单禁用

ng-readonly表单只读

ng-checked单/复选框表单选中

ng-selected下拉框表单选中

注：后续学习过程中还会介绍其它指令。

### **自定义指令** ###

AngularJS允许根据实际业务需要自定义指令，通过angular全局对象下的directive方法实现。

return 参数

1. restrict

值为字符串，可选参数，指明指令在DOM中以什么形式被声明

1.  replace

布尔型，默认值为false，设置为true的时候，表示可以用模板内容替换自定义的元素标签。

1.  template

字符串:一段html文本

1.  templateUrl

## **数据绑定** ##

AngularJS是以数据做为驱动的MVC框架，所有模型（Model）里的数据经由控制器（Controller）展示到视图（View）中。

所谓数据绑定指的就是将模型（Model）中的数据与相应的视图（View）进行关联，分为单向绑定和双向绑定两种方式。

### **单向绑定** ###

单向数据绑定是指将模型（Model）数据，按着写好的视图（View）模板生成HTML标签，然后追加到DOM中显示，如之前所学的artTemplate 模板引擎的工作方式。

如下图所示，只能模型（Model）数据向视图（View）传递。

### **双向绑定** ###

双向绑定则可以实现模型（Model）数据和视图（View）模板的双向传递，如下图所示。

### **相关指令** ###

在AngularJS中通过“\{ \{\}\}”和ng-bind指令来实现模型（Model）数据向视图模板（View）的绑定，模型数据通过一个内置服务$scope来提供，这个$scope是一个空对象，通过为这个对象添加属性或者方法便可以在相应的视图（View）模板里被访问。

注：“\{ \{\}\}”是ng-bind的简写形式，其区别在于通过“\{ \{\}\}”绑定数据时会有“闪烁”现象，添加ng-cloak也可以解决“闪烁”现象，通过ng-bind-template可以绑定多个数据。

通过为表单元素添加ng-model指令实现视图（View）模板向模型（Model）数据的绑定。

通过ng-init可以初始化模型（Model）也就是$scope。

AngularJS对事件也进行了扩展，无需显式的获取DOM元素便可以添加事件，易用性变的更强。通过在原有事件名称基础上添加ng-做为前缀，然后以属性的形式添加到相应的HTML标签上即可。如ng-click、ng-dblclick、ng-blur等。

通过ng-repeat可以将数组或对象数据迭代到视图模板中，ng-switch、on、ng-switch-when可以对数据进行筛选。

## **作用域** ##

通常AngularJS中应用（App）是由若干个视图（View）组合成而成的，而视图（View）又都是HTML元素，并且HTML元素是可以互相嵌套的，另一方面视图都隶属于某个控制器（Controller），进而控制器之间也必然会产生嵌套关系。

每个控制器（Controller）又都对应一个模型（Model）也就是$scope对象，不同层级控制器（Controller）下的$scope便产生了作用域。

### **根作用域** ###

一个AngularJS的应用（App）在启动时会自动创建一个根作用域$rootScope，这个根作用域在整个应用范围（ng-app所在标签以内）都是可以被访问到的。

### **子作用域** ###

通过ng-controller指令可以创建一个子作用域，新建的作用域可以访问其父作用域的数据。

## **过滤器** ##

在AngularJS中使用过滤器格式化展示数据，在“\{ \{\}\}”中使用“|”来调用过滤器，使用“:”传递参数。

### **内置过滤器** ###

1、currency将数值格式化为货币格式

2、date日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、毫秒（.sss），也可以组合到一起使用。

3、filter在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数

4、json将Javascrip对象转成JSON字符串。

5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位

6、lowercase将文本转换成小写格式

7、uppercase将文本转换成大写格式

8、number数字格式化，可控制小位位数

9、orderBy对数组进行排序，第2个参数可控制方向

### **自定义过滤器** ###

除了使用AngularJS内建过滤器外，还可以根业务需要自定义过滤器，通过模块对象实例提供的filter方法自定义过滤器。

## **依赖注入** ##

AngularJS采用模块化的方式组织代码，将一些通用逻辑封装成一个对象或函数，实现最大程度的复用，这导致了使用者和被使用者之间存在依赖关系。

所谓依赖注入是指在运行时自动查找依赖关系，然后将查找到依赖传递给使用者的一种机制。

常见的AngularJS内置服务有$http、$location、$timeout、$rootScope等

### **推断式注入** ###

没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称。

这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到。

### **行内注入** ###

以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数。

推荐使用这种方式声明依赖

## **服务** ##

服务是一个对象或函数，对外提供特定的功能。

### **内建服务** ###

1、$location是对原生Javascript中location对象属性和方法的封装。

2、$timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。

3、$filter在控制器中格式化数据。

4、$log打印调试信息

5、$http用于向服务端发起异步请求。

同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。

注：各参数含义见代码注释。

### **自定义服务** ###

通过上面例子得知，所谓服务是将一些通用性的功能逻辑进行封装方便使用，AngularJS允许将自定义服务。

1、factory方法

2、service方法

3、value方法定义常量

在介绍服务时曾提到服务本质就是一个对象或函数，所以自定义服务就是要返回一个对象或函数以供使用。

## **模块加载** ##

AngularJS模块可以在被加载和执行之前对其自身进行配置。我们可以在应用的加载阶段配置不同的逻辑。

### **配置块** ###

1、通过config方法实现对模块的配置，AngularJS中的服务大部分都对应一个“provider”，用来执行与对应服务相同的功能或对其进行配置。

比如$log、$http、$location都是内置服务，相对应的“provider”分别是$logProvider、$httpProvider、$locationPorvider。

下图以$log为例进行演示，修改了配置

下图以$filter为例进行演示，实现相同功能

### **运行块** ###

服务也是模块形式存在的对且对外提供特定功能，前面学习中都是将服务做为依赖注入进去的，然后再进行调用，除了这种方式外我们也可以直接运行相应的服务模块，AngularJS提供了run方法来实现。

不但如此，run方法还是最先执行的，利用这个特点我们可以将一些需要优先执行的功能通过run方法来运行，比如验证用户是否登录，未登录则不允许进行任何其它操作。

注：此知识点意在了解AngularJS的加载机制。

## **路由** ##

一个应用是由若个视图组合而成的，根据不同的业务逻辑展示给用户不同的视图，路由则是实现这一功能的关键。

### **SPA** ###

SPA（Single Page Application）指的是通单一页面展示所有功能，通过Ajax动态获取数据然后进行实时渲染，结合CSS3动画模仿原生App交互，然后再进行打包（使用工具把Web应用包一个壳，这个壳本质上是浏览器）变成一个“原生”应用。

在PC端也有广泛的应用，通常情况下使用Ajax异步请求数据，然后实现内容局部刷新，局部刷新的本质是动态生成DOM，新生成的DOM元素并没有真实存在于文档中，所以当再次刷新页面时新添加的DOM元素会“丢失”，通过单页面应可以很好的解决这个问题。

### **路由** ###

在后端开发中通过URL地址可以实现页面（视图）的切换，但是AngularJS是一个纯前端MVC框架，在开发单页面应用时，所有功能都在同一页面完成，所以无需切换URL地址（即不允许产生跳转），但Web应用中又经常通过链接（a标签）来更新页面（视图），当点击链接时还要阻止其向服务器发起请求，通过锚点（页内跳转）可以实现这一点。

实现单页面应用需要具备：

a、只有一页面

b、链接使用锚点

通过上面的例子发现在单一页面中可以能过hashchange事件监听到锚点的变化，进而可以实现为不同的锚点准不同的视图，单页面应用就是基于这一原理实现的。

AngularJS对这一实现原理进行了封装，将锚点的变化封装成路由（Route）,这是与后端路由的根本区别。

在1.2版前路由功能是包含在AngularJS核心代码当中，之后的版本将路由功能独立成一个模块，[下载angular-route.js][angular-route.js]

1.   **使用**

1、引入angular-route.js

2、实例化模块（App）时，当成依赖传进去（模块名称叫ngRoute）。

3、配置路由模块

4、布局模板

通过ng-view指令布局模板，路由匹配的视图会被加载渲染到些区域。

1.   **路由参数**

1、提供两个方法匹配路由，分别是when和otherwise，when方法需要两个参数，otherwise方法做为when方法的补充只需要一个参数，其中when方法可以被多次调用。

2、第1个参数是一个字符串，代表当前URL中的hash值。

3、第2个参数是一个对象，配置当前路由的参数，如视图、控制器等。

a、template 字符串形式的视图模板

b、templateUrl 引入外部视图模板

c、controller 视图模板所属的控制器

d、redirectTo跳转到其它路由

4、获取参数，在控制中注入$routeParams可以获取传递的参数

## **其它** ##

### **jQuery** ###

在没有引入jQuery的前提下AngularJS实现了简版的jQuery Lite，通过angular.element不能选择元素，但可以将一个DOM元素转成jQuery对象，如果引提前引入了jQuery则angular.element则完全等于jQuery。

### **bower** ###

基于NodeJS的一个静态资源管理工具，由twitter公司开发维，解决大型网站中静态资源的依赖问题。

1、依赖NodeJS环境和git工具。

2、npm install -g bower --registry=https://registry.npm.taobao.org安装bower

3、bower search 查找资源信息

4、bower install 安装（下载）资源，通过\#号可以指定版本号

5、bower info 查看资源信息

6、bower uninstall 卸载（删除）资源

7、bower init初始化（在windows下只能使用cmd来操作），用来记录资源信息及依赖。

**AngularJS**

## **介绍** ##

AngularJS是一款由Google公司开发维护的前端MVC框架，其克服了[HTML][]在构建应用上的诸多不足，从而降低了开发成本提升了开发效率。

### **特点** ###

框架对开发的流程和模式做了约束，开发者遵照约束进行开发，更注重的实际的业务逻辑。

AngularJS有着诸多特性，最为核心的是：模块化、双向数据绑定、语义化标签、依赖注入等。

与之类似的框架还有BackBone、KnockoutJS、Vue、React等。

### **下载** ###

1、通过[AngularJS][]官网下载，不过由于国内特殊的国情，需要翻墙才能访问。

2、通过npm下载，npm install angular

3、通过bower下载，bower install angular

bower是什么？

### **体验AngularJS** ###

### **MVC** ###

模型（Model）一般用来处理数据（读取/设置），一般指操作数据库。

视图（View）一般用来展示数据，比如通过HTML展示。

控制器（Controller）一般用做连接模型和视图的桥梁。

通过ThinkPHP来演示后端MVC的执行流程，其重点在于理解。

MVVM:

1.  M model
2.  V view
3.  VM viewmodel

注：做为初学可以不必过于在意这些概念。

## **模块化** ##

使用AngularJS构建应用（App）时是以模块化（Module）的方式组织的，即将整个应用划分成若干模块，每个模块都有各自的职责，最终组合成一个整体。

采用模块化的组织方式，可以最大程度的实现代码的复用，可以像搭积木一样进行开发。

### **定义应用** ###

通过为任一HTML标签添加ng-app属性，可以指定一个应用，表示此标签所包裹的内容都属于应用（App）的一部分。

### **定义模块** ###

AngularJS提供了一个全局对象angular，在此全局对象下存在若干的方法，其中angular.module()方法用来定义一个模块。

注：应用（App）其本质也是一个模块（一个比较大的模块）。

### **定义控制器** ###

控制器（Controller）作为连接模型（Model）和视图（View）的桥梁存在，所以当我们定义好了控制器以后也就定义好了模型和视图。

以上步骤就是AngularJS最基本的MVC工作模式。

下图是AngularJS的结构，学习AngularJS会围绕下图的结构展开。

## **指令** ##

### **内置指令** ###

ng-app 指定应用根元素，至少有一个元素指定了此属性。

ng-controller 指定控制器

ng-show控制元素是否显示，true显示、false不显示

ng-hide控制元素是否隐藏，true隐藏、false不隐藏

ng-if控制元素是否“存在”，true存在、false不存在

ng-src增强图片路径

ng-href增强地址

ng-class控制类名

ng-include引入模板

ng-disabled表单禁用

ng-readonly表单只读

ng-checked单/复选框表单选中

ng-selected下拉框表单选中

注：后续学习过程中还会介绍其它指令。

### **自定义指令** ###

AngularJS允许根据实际业务需要自定义指令，通过angular全局对象下的directive方法实现。

return 参数

1. restrict

值为字符串，可选参数，指明指令在DOM中以什么形式被声明

1.  replace

布尔型，默认值为false，设置为true的时候，表示可以用模板内容替换自定义的元素标签。

1.  template

字符串:一段html文本

1.  templateUrl

## **数据绑定** ##

AngularJS是以数据做为驱动的MVC框架，所有模型（Model）里的数据经由控制器（Controller）展示到视图（View）中。

所谓数据绑定指的就是将模型（Model）中的数据与相应的视图（View）进行关联，分为单向绑定和双向绑定两种方式。

### **单向绑定** ###

单向数据绑定是指将模型（Model）数据，按着写好的视图（View）模板生成HTML标签，然后追加到DOM中显示，如之前所学的artTemplate 模板引擎的工作方式。

如下图所示，只能模型（Model）数据向视图（View）传递。

### **双向绑定** ###

双向绑定则可以实现模型（Model）数据和视图（View）模板的双向传递，如下图所示。

### **相关指令** ###

通过为表单元素添加ng-model指令实现视图（View）模板向模型（Model）数据的绑定。

通过ng-init可以初始化模型（Model）也就是$scope。

AngularJS对事件也进行了扩展，无需显式的获取DOM元素便可以添加事件，易用性变的更强。通过在原有事件名称基础上添加ng-做为前缀，然后以属性的形式添加到相应的HTML标签上即可。如ng-click、ng-dblclick(双击)、ng-blur(失去焦点)等。

通过ng-repeat可以将数组或对象数据迭代到视图模板中，ng-switch、ng-switch-when，ng-switch-defult，ng-if可以对数9据进行筛选。

## **作用域** ##

每个控制器（Controller）又都对应一个模型（Model）也就是$scope对象，不同层级控制器（Controller）下的$scope便产生了作用域。

### **根作用域** ###

一个AngularJS的应用（App）在启动时会自动创建一个根作用域$rootScope，这个根作用域在整个应用范围（ng-app所在标签以内）都是可以被访问到的。

### **子作用域** ###

通过ng-controller指令可以创建一个子作用域，新建的作用域可以访问其父作用域的数据。

## **过滤器** ##

在AngularJS中使用过滤器格式化展示数据，在“\{ \{\}\}”中使用“|”来调用过滤器，使用“:”传递参数。

### **内置过滤器** ###

1、currency将数值格式化为货币格式

2、date日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、毫秒（.sss），也可以组合到一起使用。

3、filter在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数

4、json将Javascrip对象转成JSON字符串。

5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位

6、lowercase将文本转换成小写格式

7、uppercase将文本转换成大写格式

8、number数字格式化，可控制小位位数

9、orderBy对数组进行排序，第2个参数可控制方向

### **自定义过滤器** ###

除了使用AngularJS内建过滤器外，还可以根业务需要自定义过滤器，通过模块对象实例提供的filter方法自定义过滤器。

## **依赖注入** ##

AngularJS采用模块化的方式组织代码，将一些通用逻辑封装成一个对象或函数，实现最大程度的复用，这导致了使用者和被使用者之间存在依赖关系。

所谓依赖注入是指在运行时自动查找依赖关系，然后将查找到依赖传递给使用者的一种机制。

常见的AngularJS内置服务有$http、$location、$timeout、$rootScope等

### **推断式注入** ###

没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称。

这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到。

### **行内注入** ###

以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数。

推荐使用这种方式声明依赖

## **服务** ##

服务是一个对象或函数，对外提供特定的功能。

### **内建服务** ###

1、$location是对原生Javascript中location对象属性和方法的封装。

2、$timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。

3、$filter在控制器中格式化数据。

4、$log打印调试信息

5、$http用于向服务端发起异步请求。

同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。

注：各参数含义见代码注释。

### **自定义服务** ###

通过上面例子得知，所谓服务是将一些通用性的功能逻辑进行封装方便使用，AngularJS允许将自定义服务。

1、factory方法

2、service方法

3、value方法定义常量

在介绍服务时曾提到服务本质就是一个对象或函数，所以自定义服务就是要返回一个对象或函数以供使用。

## **模块加载** ##

AngularJS模块可以在被加载和执行之前对其自身进行配置。我们可以在应用的加载阶段配置不同的逻辑。

### **配置块** ###

1、通过config方法实现对模块的配置，AngularJS中的服务大部分都对应一个“provider”，用来执行与对应服务相同的功能或对其进行配置。

比如$log、$http、$location都是内置服务，相对应的“provider”分别是$logProvider、$httpProvider、$locationPorvider。

下图以$log为例进行演示，修改了配置

下图以$filter为例进行演示，实现相同功能

### **运行块** ###

注：此知识点意在了解AngularJS的加载机制。

## **路由** ##

一个应用是由若个视图组合而成的，根据不同的业务逻辑展示给用户不同的视图，路由则是实现这一功能的关键。

### **SPA** ###

### **路由** ###

实现单页面应用需要具备：

a、只有一页面

b、链接使用锚点

AngularJS对这一实现原理进行了封装，将锚点的变化封装成路由（Route）,这是与后端路由的根本区别。

在1.2版前路由功能是包含在AngularJS核心代码当中，之后的版本将路由功能独立成一个模块，[下载angular-route.js][angular-route.js]

1.  **使用**

1、引入angular-route.js

2、实例化模块（App）时，当成依赖传进去（模块名称叫ngRoute）。

3、配置路由模块

4、布局模板

通过ng-view指令布局模板，路由匹配的视图会被加载渲染到些区域。

1.  **路由参数**

1、提供两个方法匹配路由，分别是when和otherwise，when方法需要两个参数，otherwise方法做为when方法的补充只需要一个参数，其中when方法可以被多次调用。

2、第1个参数是一个字符串，代表当前URL中的hash值。

3、第2个参数是一个对象，配置当前路由的参数，如视图、控制器等。

a、template 字符串形式的视图模板

b、templateUrl 引入外部视图模板

c、controller 视图模板所属的控制器

d、redirectTo跳转到其它路由

4、获取参数，在控制中注入$routeParams可以获取传递的参数

## **其它** ##

### **jQuery** ###

版本:

1.  X 正常版本

4.X node

## **表单:** ##

AngularJS1.x有专门针对form表单的系统检验指令。主要通过myForm.\*.\*.type或myForm.\*.\*的引用，其中第一个参数为form的name属性值，第二个参数为form中元素的name属性值。如myForm.myEmail.$error.email则检验name="myEmail"的元素输入的值是否符合email的书写规范，若符合则返回ture，反之为false。更多的检验列表如下：

1.$error.required 唯一值验证

2.$error.email 文本输入内置电子邮件验证。

3.$error.number 带有数量验证的文本输入。也可以有最小和最大值的附加属性。

4.$error.date 带有输入日期文本输入。

5.$error.url 带有输入验证的URL文本输入。

6.$error.minlength,参数范围需从input中ng-minlength设置

7.$error.maxlength，参数范围需从input中ng-maxlength设置

8.$error.pattern,正则表达式需从input中ng-pattern设置

9.$dirty 表单有填写记录

10.$pristine 表单没有填写记录

11.$valid 字段内容合法的,如formname.$valid

12.$invalid 字段内容是非法的

[http_www.w3school.com.cn_jquery_effect_animate.asp]: http://www.w3school.com.cn/jquery/effect_animate.asp
[http_api.jquery.com_prop]: http://api.jquery.com/prop/
[http_www.w3school.com.cn_jquery_jquery_ref_events.asp]: http://www.w3school.com.cn/jquery/jquery_ref_events.asp
[http_learn.jquery.com_plugins_basic-plugin-creation]: http://learn.jquery.com/plugins/basic-plugin-creation/
[http_api.jqueryui.com_category_all]: http://api.jqueryui.com/category/all/
[jQueryUI]: http://www.runoob.com/jqueryui/jqueryui-intro.html
[Link 1]: https://www.baidu.com/s?wd=%E5%85%A8%E7%90%83%E5%AE%9A%E4%BD%8D%E7%B3%BB%E7%BB%9F&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBnjD1uhcdPj-Wnjm4mvDz0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1mzrj6LPWbznW6snW6LPjRz
[Link 2]: https://www.baidu.com/s?wd=%E4%BC%BD%E5%88%A9%E7%95%A5&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBnjD1uhcdPj-Wnjm4mvDz0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1mzrj6LPWbznW6snW6LPjRz
[Link 3]: https://www.baidu.com/s?wd=%E5%8C%97%E6%96%97%E5%8D%AB%E6%98%9F%E5%AF%BC%E8%88%AA%E7%B3%BB%E7%BB%9F&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBnjD1uhcdPj-Wnjm4mvDz0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1mzrj6LPWbznW6snW6LPjRz
[http_fontawesome.dashgame.com]: http://fontawesome.dashgame.com/
[Link 4]: http://baike.baidu.com/view/974298.htm
[JSON2.js_github]: https://github.com/douglascrockford/JSON-js
[http_www.163.com]: http://www.163.com/
[Link 5]: http://blog.csdn.net/joyhen/article/details/21631833
[Link 6]: http://www.duitang.com/topics/
[http_www.163.com 1]: http://www.163.com
[HTML]: http://baike.baidu.com/view/692.htm
[AngularJS]: https://angularjs.org/
[angular-route.js]: https://code.angularjs.org/