常用属性............................................................................................ 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: 10px;/*让控件在右侧*/
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;/*清除鼠标点击输入框时出现的蓝色边框*/

<!--onfocus是得到焦点，
onblur  是失去焦点-->
<input type="text" οnblur="fn(this)" οnfοcus="fn2(this)">

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

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

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

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

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

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

可能的值

a标签空连方式：

1,href=“#”

2，href=“javascript:;”

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

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

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

onselectstart=”return false”禁止被选中

Html基础 

常用快捷键

认识大前端

前端工作就是 : 将设计图通过 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标签分类

<nav>

    <ul>

        <li></li>

    </ul></nav>

<div></div><p></p><blockquote></blockquote>

<div></div><div>

    <p><span></span><em></em></p>

    <blockquote></blockquote></div>

<div></div><div>

    <p><span></span><em></em></p></div><blockquote></blockquote>

<div>

    <header>

        <ul>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

        </ul>

    </header>

    <footer>

        <p></p>

    </footer></div>

<div>

    <dl>

        <dt></dt>

        <dd></dd>

        <dt></dt>

        <dd></dd>

        <dt></dt>

        <dd></dd>

    </dl></div><footer>

    <p></p></footer>

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li></ul>

<ul>

    <li class="item1"></li>

    <li class="item2"></li>

    <li class="item3"></li>

    <li class="item4"></li>

    <li class="item5"></li></ul>

<h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3>

<ul>

    <li class="item001"></li>

    <li class="item002"></li>

    <li class="item003"></li>

    <li class="item004"></li>

    <li class="item005"></li></ul>

<ul>

    <li class="item5"></li>

    <li class="item4"></li>

    <li class="item3"></li>

    <li class="item2"></li>

    <li class="item1"></li></ul>

<ul>

    <li class="item3"></li>

    <li class="item4"></li>

    <li class="item5"></li>

    <li class="item6"></li>

    <li class="item7"></li></ul>

<div id="header"></div>

<div class="title"></div>

<form id="search" class="wide"></form>

<p class="class1 class2 class3"></p>

<p title="Hello world"></p>

<td rowspan="2" colspan="3" title=""></td>

<div a="value1" b="value2"></div>

<a href="">Click me</a>

<p>Click <a href="">here</a> to continue</p>

<div class="class"></div>

<em><span class="class"></span></em>

<ul>

    <li class="class"></li></ul>

<table>

    <tr class="row">

        <td class="col"></td>

    </tr></table>

<!doctype html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>Document</title></head><body>

</body></html>

<a href=""></a>

<a href="http://"></a>

<a href="mailto:"></a>

<abbr title=""></abbr>

<acronym title=""></acronym>

<base href="" />

<basefont />

<br />

<frame />

<hr />

<bdo dir=""></bdo>

<bdo dir="rtl"></bdo>

<bdo dir="ltr"></bdo>

<col />

<link rel="stylesheet" href="" />

<link rel="stylesheet" href="style.css" />

<link rel="stylesheet" href="print.css" media="print" />

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<link rel="apple-touch-icon" href="favicon.png" />

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

<meta />

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="IE=7" />

<style></style>

<script></script>

<script src=""></script>

<img src="" alt="" />

<iframe src="" frameborder="0"></iframe>

<embed src="" type="" />

<object data="" type=""></object>

<param name="" value="" />

<map name=""></map>

<area shape="" coords="" href="" alt="" />

<area shape="default" href="" alt="" />

<area shape="circle" coords="" href="" alt="" />

<area shape="rect" coords="" href="" alt="" />

<area shape="poly" coords="" href="" alt="" />

<form action=""></form>

<form action="" method="get"></form>

<form action="" method="post"></form>

<label for=""></label>

<input type="text" />

<input type="text" name="" id="" />

<input type="hidden" name="" />

<input type="hidden" name="" />

<input type="text" name="" id="" />

<input type="search" name="" id="" />

<input type="email" name="" id="" />

<input type="url" name="" id="" />

<input type="password" name="" id="" />

<input type="password" name="" id="" />

<input type="datetime" name="" id="" />

<input type="date" name="" id="" />

<input type="datetime-local" name="" id="" />

<input type="month" name="" id="" />

<input type="week" name="" id="" />

<input type="time" name="" id="" />

<input type="number" name="" id="" />

<input type="color" name="" id="" />

<input type="checkbox" name="" id="" />

<input type="checkbox" name="" id="" />

<input type="radio" name="" id="" />

<input type="radio" name="" id="" />

<input type="range" name="" id="" />

<input type="file" name="" id="" />

<input type="file" name="" id="" />

<input type="submit" value="" />

<input type="submit" value="" />

<input type="image" src="" alt="" />

<input type="image" src="" alt="" />

<input type="button" value="" />

<input type="button" value="" />

<isindex />

<input type="reset" value="" />

<select name="" id=""></select>

<option value=""></option>

<textarea name="" id="" cols="30" rows="10"></textarea>

<menu type="context"></menu>

<menu type="context"></menu>

<menu type="toolbar"></menu>

<menu type="toolbar"></menu>

<video src=""></video>

<audio src=""></audio>

<html xmlns="http://www.w3.org/1999/xhtml"></html>

<keygen />

<command />

<blockquote></blockquote>

<acronym title=""></acronym>

<figure></figure>

<figcaption></figcaption>

<iframe src="" frameborder="0"></iframe>

<embed src="" type="" />

<object data="" type=""></object>

<source></source>

<caption></caption>

<colgroup></colgroup>

<fieldset></fieldset>

<button></button>

<button type="button"></button>

<button type="reset"></button>

<button type="submit"></button>

try{

    //这里写可能出现异常的代码

}catch(e){

    //这里的e就是捕获的异常对象

    //可以在这里写，出现异常后的处理代码

}

throw 异常对象;

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 ( e ) {

    //如果出现错误就执行

} finally {

    //结束 try 这个代码块之前执行, 即最后执行

}

面向过程的思维方式：

    step 1:收拾脏衣服

    step 2:打开洗衣机盖

    step 3:将脏衣服放进去

    step 4:设定洗衣程序

    step 5:开始洗衣服

    step 6:打开洗衣机盖子

    step 7:晒衣服

面向对象的思维方式：

    洗衣机需要什么对象？

    女朋友    

    洗衣机

{ name:"张三", age:18, gender:"Male" }

{ name:"刘亦菲", age:18, gender:"female", address:"上海", phone:"110" }

// 任务需求:

// 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 = {};

var p = new Person();

class Person {

 string name;

 int age;

}

class Student : Person {

}

var stu = new Student();

stu.name

function mix ( o1, o2 ) {

    for ( var k in o2 ) {

        o1[ k ] = o2[ k ];

    }

}

动物 animal = new 子类(); // 子类：麻雀、狗、猫、猪、狐狸...

动物 animal = new 狗();

animal.叫();

function Person(name, age){

    this.name = name;

    this.age = age;

    this.sayHi = function(){

        console.log("你好");

    }

}

var p = new Person("张三", 18);

var p1 = new Person("李四", 19);

console.log(p.sayHi == p1.sayHi); //输出结果为false

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

    function Person(name, age){this.name = name;this.age = age;//        this.sayHi = function(){//            console.log("你好");//        }this.sayHi=sayHi;}//    调用该构造函数创建对象，并对比创建出来的对象的sayHi方法：function sayHi() {console.log(this.sayHi);}var p = new Person("张三", 18);var p1 = new Person("李四", 19);console.log(p.sayHi === p1.sayHi); //输出结果为true

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.sayHello();

p1.sayHello();

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

function Car(name){

     this.name = name;

}

function Person() {}

Person.prototype.name = '张三'; //基本类型的属性影响不大

Person.prototype.car = new Car("法拉利"); //引用类型的属性，会被所有的对象共享

var p = new Person();

function Person() {}

Person.prototype.name = '张三';

var p1 = new Person();

var p2 = new Person();

p1.name = '李四';

console.log( p1.name );

console.log( p2.name );

// 如果是访问数据, 当前对象中如果没有该数据就到构造函数的原型属性中去找

// 如果是写数据, 当对象中有该数据的时候, 就是修改值; 如果对象没有该数据, 那么就添加值

function Person () { }

Person.prototype.func = function () {

 console.log( 'something' );

};

var p = new Person();

p.func();

function Person () { };

Person.prototype = {

    func: function () {

        console.log( '22222' );

    }

};

var p = new Person();

p.func();

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();

function Person(){}

//通过构造函数的原型属性prototype可以直接访问原型

Person.prototype;

function Person(){}

var p = new Person();

//以前不能直接通过p来访问神秘对象

function Person(){}

var p = new Person();

//实例对象的__proto__属性可以方便的访问到原型对象

p.__proto__;

//既然使用构造函数的`prototype`和实例对象的`__proto__`属性

//都可以访问原型对象

//就有如下结论

p.__proto__ === Person.prototype;

var p = new Person();

p.constructor.prototype;

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);

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];

}

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(){}

});

function Person() {

}

var p = new Person();

// p 具有默认的原型链

function ToolsCollection () {

}

ToolsCollection.prototype = [];

var arr = new ToolsCollection();

// arr -> [] -> Array.prototype -> Object.prototype -> null

// var arr = new Array();

function Person(){};

var p = new Person();

//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 );');

<div id="code" style="display:none">

var res = a > b ? a : b;

res = res > c ? res : c;

return res;

</div>

<script>

var txt = document.getElementbyId("code).innerHtml + ' ';

var func = new Function('a', 'b', 'c', txt);

</script>

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();

{

    var num = 123;

    {

        console.log( num );

    }

}

console.log( num );

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();

}

func();

function func(){

     alert("Funciton has been called");

}

func();

function func(){

     alert("Funciton has been called");

}

function func(){

    alert("Funciton has been called");

}

func();

alert(a);

var a = 1;

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

This is last func1

function func1(){

     console.log('This is func1');

}

function func1(){

     console.log('This is last func1');

}

func1();

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();

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>

<script>

function func(){

    console.log('AA3');

}

</script>

func();

var func = function(){

    alert("我被提升了");

};

var func;

func();

func = function(){

    alert("我被提升了");

}

console.log(typeof func);

if(true){

    function(){

        return 1;

    }

}

console.log(typeof func);

    //f1--->全局

    function f1(){

        //f2--->f1--->全局

        function f2(){

            //f3---->f2--->f1--->全局

            function f3(){

            }

            //f4--->f2--->f1---->全局

            function f4(){

            }

        }

        //f5--->f1---->全局

        function f5(){

        }

    }

function foo () {

    var i1 = 1 // 局部

    i2 = 2, // 全局

    i3 = 3; // 全局

}

function foo () {

    var num = 123;

    return num;

}

var res = foo();

console.log( res ); // => 123

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;