JavaScript

1

第一章：原生JS入门：JS语法、函数、元素获取、判断循环、this、索引值

1.1 - JS简介

1.1.1 - PC端应用

1.1.2 - 移动端应用

1.2 - 编写JS应用的前提条件

1.2.1 - html简洁、可扩展的布局与样式

1.2.2 - “简单省事”的 xhtml+css2 结构例举

1.2.2.1 - 实例：图文列表展示模式切换

1.3 - JS语法入门

1.3.1 - 行间事件操作

1.3.1.1 - 缺点：代码可读性差、难以复用

1.3.2 - 函数概念（与css中“类”的关联）

1.3.2.1 - 定义函数、调用函数

1.3.2.2 - 优点：可复用，可维护

1.3.2.3 - 实例：简便的弹出层

1.3.3 - 结构、样式、行为三者分离中的：事件提取

1.3.4 - DOM元素获取 1

1.3.4.1 - JS中的“id选择符”document.getElementById

1.3.4.2 - JS中的“名称选择符”document.getElementsByName

1.3.4.3 - JS中的“类型选择符”document.getElementsByTagName

1.3.4.3.1 - 集合型对象的几个属性

1.3.4.3.1.1 - length

1.3.4.3.1.2 - 集合

1.3.4.3.1.3 - []

1.3.4.3.1.4 - 读取顺序

1.3.4.3.2 - JS中的“包含选择符”obj.getElementsByTagName

1.3.4.4 - 万能选择符 document.querySelector [兼容IE8及以上]

1.3.4.4.1 - querySelector() 方法仅仅返回匹配指定选择器的第一个元素。

1.3.4.4.1 - 如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

1.3.4.5 - JS中的“类选择符”document.getElementsByClassName [兼容IE9及以上]

1.3.5 - var 变量

1.3.5.1 - 声明变量几种格式

1.3.5.2 - 变量的赋值类型

1.3.5.3 - 变量读写应用

1.3.5.4 - 变量命名通用规范

1.4 - JS属性操作入门

1.4.1 - 属性操作中的“读”和“写” 1 2 3

1.4.1.1 - 文字放大缩小(style) 1

1.4.1.2 - 批量修改样式(cssText) 1

1.4.2 - innerHTML 1

1.4.3 - className 1

1.4.4 - 相对路径读取的问题 1

1.4.5 - “-”与驼峰

1.4.6 - a链接与a.href的一致性与差异

1.4.6.1 - 为A链接添加事件

1.4.7 - 属性操作中的：[]

1.4.7.1 - 实例：“惨遭蹂躏”的DIV^_^

1.5 - JS字符串基础操作

1.5.1 - 字符串拼接：双引号与单引号嵌套

1.5.2 - 实例：模拟留言提交 1 2

1.6 - if 判断 1

1.6.1 - 判断的4种语法格式

1.6.2 - 实例：模拟短信发送

1.7 - 数组的基础操作 1

1.7.1 - 存放数据

1.7.2 - length和[]

1.7.3 - 实例：图片切换综合应用

1.7.3.1 - 基础图片切换 1

1.7.3.2 - 动态生成图片总数、图片说明 1

1.7.3.3 - 添加切换功能、合并函数 1

1.8 - for 循环

1.8.1 - for 循环基础 1 2

1.8.1.1 - for循环执行顺序

1.8.1.2 - 获取一组元素

1.8.1.3 - 获取被包含中的一组元素

1.8.1.4 - 获取一组“奇、偶”数元素

1.8.2 - for 循环应用

1.8.2.1 - 生成多组元素 1 2

1.8.2.2 - 定义坐标点 1

1.8.2.2.1 - 思路1：Math.floor与%

1.8.2.2.2 - 思路2：for循环嵌套 1

1.9 - this 关键字

1.9.1 - this 是什么 1

1.9.1.1 - 当前方法、函数的调用对象

1.9.1.2 - 通过事件调用函数的对象

1.9.2 - function 与 this 的“亲密关系”

1.9.2.1 - 嵌套函数中的this

1.9.2.2 - this 的变量引用

1.9.3 - this 简单运用

1.9.3.1 - this选取当前元素 1

1.9.3.2 - this选取当前元素内的子元素 1

1.9.3.3 - 浏览器选项卡中的高亮显示效果

1.9.3.3.1 - 思路1：“大清洗”

1.9.3.3.2 - 思路2：“定点清除”

1.10 - 自定义属性

1.10.1 - 什么是自定义属性 1

1.10.2 - 给一组元素添加“布尔值”自定义属性 1 2

1.10.2.1 - 实例：仿系统文件夹多选功能 1

1.10.3 - 给一组元素添加“索引值”

1.10.3.1 - “索引值”的作用：匹配、关联 1 2

1.10.3.1.1 - 实例：同步切换的列表 1

1.10.3.1.2 - 实例：同步变化的简单焦点图 1

1.10.3.1.3 - 实例：QQ列表展示 1

1.11 - 第一章课后练习

1.11.1 - 时尚网站导航切换功能

1.11.2 - 鼠标提示层功能

1.11.3 - 网站后台二级菜单应用功能

1.11.4 - 创建任意个数的图片矩阵功能

1.11.5 - 焦点图切换功能

2

第二章：JS核心-ECMAScript、数据类型、运算符、流程控制、函数传参、作用域、闭包

2.1 - ECMAScript 简介

2.1.1 - 定义JS的语法、基本对象、数据类型、关键字 …

2.2 - JS数据类型、typeof、数据类型划分及相关特性、数据类型使用原则 … 1

2.2.1 - string、number、false、function、object、array、null、undefined

2.3 - JS数据类型转换

2.3.1 - JS强制类型转换：Number、parseInt、parseFloat … 1

2.3.2 - JS隐式类型转换：+ - * / % < > == ! ++ -- … 1

2.3.3 - NaN详解、isNaN()及实例 1 2 3

2.4 - 运算符：算术、赋值、关系、逻辑

2.4.1 - 算术：+ 加、- 减、* 乘、/ 除、% 取模（求余数） 1

2.4.2 - 赋值：=、+=、-=、*=、/=、%=

2.4.3 - 关系：<、>、<=、>=、==、!=、===、!== 1

2.4.4 - 逻辑：&& 与、|| 或、! 否 1 2

2.5 - JS的程序流程控制：判断、数据类型真假、循环、循环中止语句

2.5.1 - 判断：if、switch（case break default）、?:

2.5.2 - 数据类型中的：真、假判断 1

2.5.3 - 循环：while、for

2.5.4 - 跳出：break、continue 1

2.5.5 - 逻辑：&& 与、|| 或、! 否

2.6 - 函数传参

2.6.1 - 形参与数据类型 1 2

2.6.2 - 形参实际应用 1 2

2.6.3 - 实参与形参的关系与差异

2.6.4 - 实参集合：arguments 1

2.6.5 - 函数传参：实参应用实例

2.6.6 - 函数传参：实参集合（arguments）应用实例

2.7 - 函数内的 return（返回值）

2.7.1 - return含义、函数名+括号与return关系、return后的代码不执行 1

2.7.2 - return应用

2.7.2.1 - 封装getId()函数 1 2

2.7.2.2 - 封装getStyle()函数 1

2.7.2.2.1 - currentStyle、getComputedStyle 注意事项

2.7.2.2.1.1 - 注意空格

2.7.2.2.1.2 - 计算后的样式

2.7.2.2.1.3 - 设初使值

2.7.2.2.1.4 - 返回字符串

2.8 - JS作用域概念

2.8.1 - JS解析器执行方式

2.8.1.1 - var关键字解析、function关键字解析

2.8.1.2 - JS预解析机制 1

2.8.1.3 - “作用域”范围

2.8.1.3.1 - 全局作用域：script

2.8.1.3.2 - 函数作用域：function

2.8.1.3.3 - 对象作用域：{}

2.8.1.4 - “作用域”实例

2.8.1.4.1 - 获取函数内的值 1

2.8.1.4.2 - FF 不能对函数进行预解析实例 2

2.8.2 - 局部作用域数据的获取方式

2.8.2.1 - 全部变量

2.8.2.2 - 全局对象属性添加

2.8.2.3 - 传参

2.8.3 - 作用域原理分析：this、for函数中 i 的取值 1

2.9 - 闭包

2.9.1 - JS中的垃圾回收机制

2.9.2 - 什么是闭包

2.9.2.1 - 函数嵌套函数

2.9.2.2 - 阻止变量被垃圾回收机制清除

2.9.3 - 闭包应用：闭包特性中的索引值设置

2.9.4 - 闭包的其他应用

2.9.4.1 - 私有成员属性的外部访问

2.9.4.2 - 模块化代码

2.9.4.2.1 - 函数表达式

2.9.5 - 闭包的问题：IE下的内存泄漏

2.9.5.1 - 获取DIV的ID：引发内存泄漏情况

2.9.5.1.1 - oDiv.onclick = function() { alert(oDiv.id); };

2.9.5.2 - 解决方案

2.9.5.2.1 - window.onunload = function() { oDiv.onclick = null; };

2.9.5.2.2 - var id = oDiv.id; oDiv.onclick = function() { alert(id); }; oDiv = null;

2.10 - 第二章课后练习

2.10.1 - 数据类型筛选查找功能

2.10.2 - 列表商品价格统计功能

2.10.3 - 百度音乐列表展示状态及全选功能

2.10.4 - 选项卡套选项卡焦点图功能

2.10.5 - 百度文库评分功能

2.10.6 - return返回值函数封装练习

3

第三章：定时器研究、时间日期对象、倒计时、浏览器插件、控制台、代码断点调试 …

3.1 - 连续触发定时器：setInterval 1

3.1.1 - 参数(函数名||“字符串函数调用”||匿名函数, 毫秒)

3.1.2 - setInterval 返回值

3.1.3 - clearInterval 清除定时器

3.1.4 - 实例：壁纸选择功能 1

3.1.4.1 - 开启定时器，图片自动轮播

3.1.4.2 - 清除定时器，停止轮播

3.1.4.3 - 定时器内部实现机制

3.1.4.4 - 限制定时器连续触发

3.1.4.4.1 - 先清除，后设置

3.1.4.4.2 - 设置开关，停止时恢复启用

3.1.5 - 实例：自动播放的焦点图 1

3.2 - 延时触发定时器：setTimeout 1

3.2.1 - 参数(函数名||“字符串函数调用”||匿名函数, 毫秒)

3.2.2 - setTimeout 返回值

3.2.3 - clearTimeout 清除定时器

3.2.4 - 实例：延时消失菜单 1

3.2.5 - 实例：门户网站延时广告 1

3.2.6 - 定时器应用实例

3.2.6.1 - 运动函数封装 1 2 3 4

3.2.6.2 - 让一排DIV往下掉 1

3.2.6.3 - 抖函数 1 2

3.3 - 时间对象实例研究

3.3.1 - 获取时间对象：new Date() 1

3.3.1.1 - getFullYear

3.3.1.2 - getMonth

3.3.1.3 - getDate

3.3.1.4 - getDay

3.3.1.5 - getHours

3.3.1.6 - getMinutes

3.3.1.7 - getSeconds

3.3.1.8 - 实例：图片网页电子时钟 1

3.3.2 - 时间戳：new Date().getTime()-返回从1970年1月1日到现在的毫秒数（UTC时间标准时间）

3.4 - 倒计时实例 1 2

3.4.1 - Date对象参数

3.4.1.1 - 数字日期形式：new Date(2013,4,1,9,48,12)

3.4.1.2 - 字符串形式：new Date('June 10,2013 12:12:12')

3.4.1.2.1 - 月份取值：January、February、March、April、May、June、July、August、September、October、November、December

3.4.1.3 - 时间戳形式：new Date(new Date().getTime())

3.4.2 - 时间转换公式

3.4.2.1 - 天：Math.floor(t/86400)

3.4.2.2 - 时：Math.floor(t%86400/3600)

3.4.2.3 - 分：Math.floor(t%86400%3600/60)

3.4.2.4 - 秒：t%60

3.5 - 第三章课后练习

3.5.1 - 按钮控制商品图片上下滚动

3.5.2 - 淘宝商品广告效果

3.5.3 - 延时消失的菜单

3.5.4 - 自动轮换选项卡

3.5.5 - 倒计时功能（精确到毫秒）

4

第四章：字符串、Json、数组方法、排序、算法（冒泡、快排）、Math（随机、取整公式）

4.1 - 获取类

4.1.1 - charAt ——获取指定位置的字符 1

4.1.2 - charCodeAt——获取指定位置字符的编码 1

4.1.2.1 - 数字、大小写字母、空格、制表符

4.1.2.2 - 使用charCodeAt检测是否是数字 1

4.1.3 - fromCharCode——把编码转换成字符（静态方法） 1 2 3 4

4.1.4 - substring —— 提取指定范围子字符串 1 2

4.1.5 - slice —— 提取指定范围子字符串 1

4.2 - 查找类

4.2.1 - indexOf，lastIndexOf 1 2 3

4.2.1.1 - 查找子字符串出现的位置和次数

4.3 - 比较类: >, <, == 1

4.4 - 其他类

4.4.1 - split——把字符串以指定内容分隔成数组 1 2 3

4.4.2 - trim

4.4.2.1 - 验证文本框是否输入纯空格

4.4.2.2 - 去除文本框输入内容的首尾空格

4.4.3 - toUpperCase, toLowerCase 1

4.0 - 字符串总结 1

4.5 - JSON

4.5.1 - json数据格式 1

4.5.2 - for-in遍历json对象属性 1

4.5.3 - 关于for循环和for-in的使用 1

4.5.4 - JSON.parse()——用于从一个字符串中解析出json对象 1

4.5.5 - JSON.stringify()——用于从一个对象解析出字符串 1

4.6 - 数组 1

4.6.1 - 数组常用方法shift [ unshif , …… ,push ] pop 1

4.6.1.1 - shift——删除并返回数组的第一个元素 1

4.6.1.2 - unshif——向数组的开头添加一个或更多元素，并返回新的长度。 1

4.6.1.3 - push——向数组的末尾添加一个或更多元素，并返回新的长度。 1

4.6.1.4 - pop——删除并返回数组的最后一个元素 1

4.6.1.5 - splice——向/从数组中指定位置添加/删除项目，然后返回被删除的项目 1

4.6.1.5.1 - 数据去重 1

4.6.2 - sort([比较函数])，排序一个数组

4.6.2.1 - 排序一个字符串数组 1

4.6.2.2 - 排序一个数字数组 1

4.6.2.3 - sort排序默认规则： 1

4.6.2.3.1 - 字符串排序规则

4.6.2.4 - 比较函数 1 2

4.6.2.5 - 正数交换位置、负数不交换。零表示两数相等

4.7 - concat、reverse、join

4.7.1 - concat() 连接多个数组，并生成新数组 1

4.7.1.1 - arr1.concat(val1, val2, ...);

4.7.1.2 - concat(arr1, arr2, ...)

4.7.2 - reverse() 反转数组 1

4.7.3 - join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

4.7.3.1 - 实例：反转数组、字符串

4.8 - toString()把数组转换为字符串，并返回结果。相当于join()未指定分隔符的情况

4.9 - slice()从某个已有的数组返回选定的元素

4.8 - 数组循环 : forEach()方法

4.9 - 算法分析

4.9.1 - 冒泡排序算法

4.9.2 - 快速排序算法

4.10 - Math对象

4.10.1 - 随机函数：random() 1

4.10.1.1 - 实例：打乱数组顺序

4.10.1.2 - 实例：求一组随机数字

4.10.2 - 常见方法：ceil() 向上取整、floor() 向下取整、round() 四舍五入、abs() 绝对值

4.10.3 - 常用的取整公式

4.10.3.1 - x ~ y : Math.round(Math.random()*(y-x) + x)

4.10.3.2 - 0 ~ x : Math.round(Math.random()*x)

4.10.3.3 - 1 ~ x : Math.ceil(Math.random()*x)||1

4.10.3.4 - 0 ~ x-1 : Math.floor(Math.random()*x)

4.11 - 第四章 课后练习

4.11.1 - 英文文章首字母大写

4.11.2 - 数组 indexOf() 方法兼容版

4.11.3 - 地址栏数据分组存储

4.11.4 - 使用json构建数据实现新闻列表

4.11.5 - 模拟计算游戏装备掉率计算

4.11.6 - 数据统计加载显示功能

4.11.7 - 模拟 office 查找、替换与高亮关键字

4.11.8 - 模拟文字录入效果

4.11.9 - 扫雷游戏第一步：随机布雷

5

第五章：DOM、BOM、方法封装、窗口 | 文档 | 滚动 | 等尺寸及兼容性处理、浏览器检测 …

5.1 - DOM基础

5.1.1 - JS 组成：ECMAScript DOM BOM

5.1.2 - 什么是DOM 1

5.1.3 - 用 iframe 查看document位置

5.1.4 - DOM节点 1

5.1.5 - childNodes

5.1.5.1 - 在标准及ie9以上 ： 会获取空文本节点。

5.1.5.2 - 在ie6/7/8 : 没有空文本节点。

5.2 - 查看节点类型：nodeType、nodeName、nodeValue

5.2.1 - 节点类型(nodeType) 1 1

5.2.1.1 - ①元素节点

5.2.1.2 - ②属性节点

5.2.1.3 - ③文本节点

5.2.1.4 - ⑧注释节点

5.2.1.5 - ⑨document

5.3 - children 属性

5.3.1 - children 与 childNodes 的区别 1

5.3.1.1 - children（不是标准的属性，但是所有浏览器都支持）、childNodes（标准属性）

5.3.1.2 - children（只包括元素，忽略换行、空格等部分）、childNodes（包括元素和换行、空格等部分）

5.3.2 - 实例：childNodes 的类型判断 1

5.3.3 - 注意：xhtml 文档的严谨：符合标签嵌套规则

5.4 - DOM节点-子节点

5.4.1 - firstChild : 第一个子节点 在标准和ie9下会获取到空白文本节点。

5.4.2 - firstElementChild : 标准下获取第一个子元素节点，ie6/7/8不支持。 1

5.4.3 - lastChild : 最后一个子节点 在标准和ie9下会获取到空白文本节点。

5.4.4 - lastElementChild : 标准下获取最后一个子元素节点，ie6/7/8不支持。 1

5.4.5 - nextSibling：下一个兄弟节点 在标准和ie9下会获取到空白文本节点。

5.4.6 - nextElementSibling：标准下获取下一个兄弟节点，ie6/7/8不支持。 1

5.4.7 - previousSibling：上一个兄弟节点 在标准和ie9下会获取到空白文本节点。

5.4.8 - previousElementSibling：标准下获取上一个兄弟节点，ie6/7/8不支持。 1

5.4.9 - 实例：兼容性处理

5.4.10 - 原则：标准在左，非标准在右

5.4.11 - 实例：封装四个方法 first()、last()、next()、prev();

5.5 - parentNode 1

5.5.1 - 获取父节点，点击链接隐藏整个li 1

5.6 - offsetParent 1

5.6.1 - 距离当前节点最近的具有定位属性的祖先节点(如果祖先节点都没有定位，那么默认为body)

5.6.1.1 - 注意： 祖先节点必须要有定位属性，否则offsetParent在低版本ie中会有严重混乱的兼容问题

5.6.2 - offsetLeft : 当前节点的左外边框到offsetParent的左内边框之间的距离。 1

5.6.3 - offsetTop : 当前节点的上外边框到offsetParent的上内边框之间的距离。 1

5.6.3.1 - 计算元素相对body的绝对内容的例子(一层层往上找) 1 2

5.6.3.2 - getBoundingClientRect(返回值为一个对象)：
获取某个元素的信息（高版本：left,top,bottom,rigit,width,height）
注意：获取的值是会根据滚动条变化的。 1

5.6.4 - offsetWidth offsetHeight（计算边框） clientWidth clientHeight（不计算边框） : 1

5.6.4.1 - 指的是元素在页面所占的空间大小, 如果元素没有占页面空间，那么这四属性的值都为0(比如给元素设置了 display: none; 属性)

5.6.4.2 - 都不计算margin，都计算padding，获取的值都是不带“px”的数字

5.6.4.3 - 可视区的宽/高 1

5.6.4.3.1 - 可视区的宽：document.documentElement.clientWidth

5.6.4.3.2 - 可视区的高：document.documentElement.clientHeight

5.7 - 操作元素属性的第三种方式：

5.7.1 - 前两种方式： [] 和 .

5.7.2 - 第三种方式： 1

5.7.2.1 - 获取属性：getAttribute('')

5.7.2.1.1 - 可以获取行间的自定义属性。

5.7.2.1.2 - 可以获取到src,href,url等的相对地址。(需要带上第二个参数 ： 2) 1

5.7.2.2 - 设置属性： setAttribute('','')

5.7.2.3 - 删除属性： removeAttribute('')

5.7.2.3.1 - 当碰到关键字、保留字的时候，ie6/7需要避开，而ie8以上不需要考虑。

5.7.2.3.2 - 操作第二层以上属性的时候，标准浏览器不支持。

5.8 - dataSet - 元素自定义数据集 1

5.9 - 创建和插入元素

5.9.1 - createElement : 创建一个dom节点。
document.createElement(tagName) 1

5.9.2 - appendChild ： 往一个节点里面追加一个新的子节点。(注意：是添加在最后) 1

5.9.2.1 - 实例：留言板插入内容

5.9.3 - insertBefore ： 往一个子节点里面的某个子节点前面插入一个新的子节点。

5.9.3.1 - insertBefore(准备要插入的节点，插入到哪个节点的前面) 1

5.9.3.2 - 特性：如果第二个参数为假的，那么会将某个元素添加到父元素的末位。

5.9.4 - removeChild : 从一个节点里面删除掉某个指定的子节点。 1

5.9.4.1 - 实例：删除留言

5.9.5 - replaceChild ： 用一个节点替换掉另一个节点里面的指定子节点。 1

5.9.5.1 - 实例：只显示一条留言

5.9.5 - cloneNode ： 克隆某个元素。 1

5.9.5.1 - 在克隆的时候，默认（false）只克隆指定元素本身，不会克隆该元素下的所有子节点。（cloneNode(有参数，默认为false)），如果里面传入true，那么就可以克隆该元素下的所有子节点。
事件不会被克隆。

5.9.6 - appendChild / insertBefore / replaceChild :

5.9.6.1 - 既可以操作创建的元素，也可以操作页面已有的元素。

5.9.6.2 - 操作已有元素时，是直接把元素从一个位置移动到另一个位置，而不是复制。

5.10 - 用className选择元素

5.10.1 - getElementsByClassName - 不兼容低版本浏览器。

5.10.1.1 - 自定义方法：

5.10.1.1.1 - 如何用className选择元素

5.10.1.1.2 - 选出所有元素

5.10.1.1.3 - 通过className条件筛选

5.10.1.1.4 - 封装成函数

5.10.1.2 - getByClass()

5.10.1.3 - addClass() 添加class

5.10.1.4 - removeClass() 移除class

5.11 - 表格应用

5.11.1 - 获取

5.11.1.1 - tBodies、tHead、tFoot、rows、cells 1

5.11.2 - 表格的创建（实例） 1

5.11.2.1 - 实例：数据添加

5.11.2.2 - 实例：表格版隔行变色

5.11.2.3 - 实例：删除一行

5.11.3 - 选择 1

5.11.3.1 - checkbox 全选、反选

5.12 - BOM

5.12.1 - 打开、关闭窗口

5.12.1.1 - window.open : 打开一个新窗口。 1

5.12.1.2 - 参数： 四个（平时主要使用前两个，后面两个有兼容问题）

5.12.1.2.1 - 指定要打开的页面地址。

5.12.1.2.2 - 打开方式 ： _blank _self ... （target）

5.12.1.2.3 - 浏览器的窗口特征 （宽，高，窗口位置等）

5.12.1.2.4 - 是否覆盖历史记录。

5.12.1.2.5 - 实例： 新窗口运行代码

5.12.1.3 - window.close : 关闭当前窗口 1

5.12.1.3.1 - 不同的浏览器有不同的处理方式，存在兼容问题。（火狐下无法关闭正常页面，IE下关闭时会提示）

5.12.1.3.2 - 在ff/IE下面 : 只允许关闭由window.open方法所打开的窗口。

5.12.1.3.3 - 关闭非window.open方法所打开的窗口：
　　　　1. ff : 无法关闭
　　　　2. chrome : 直接关闭
　　　　3. ie : 询问用户

5.12.2 - 常用属性

5.12.2.1 - window.navigator.userAgent ： 用户代理信息 1

5.12.2.1.1 - 操作系统 、 浏览器内核 、浏览器版本等

5.12.2.1.2 - 实例：输出内核信息，判断是电脑还是移动设备 1

5.12.2.2 - window.location ： 地址栏信息。 1

5.12.2.2.1 - href : 完整的URL链接，包括问号和#号部分

5.12.2.2.2 - search : 地址栏查询信息 （问号到#号之间的所有内容）

5.12.2.2.3 - hash : 锚信（#号后面的所有内容）

5.12.3 - 窗口尺寸 1

5.12.3.1 - 可视区尺寸

5.12.3.1.1 - 标准：

5.12.3.1.2 - window.innerWidth / window.innerHeight;(低版本ie[IE 9以下]不兼容)

5.12.3.1.3 - 低版本ie[IE8、7、6、5]兼容处理：

5.12.3.1.4 - document.documentElement.clientWidth / document.documentElement.clientHeight
或者document.body.clientHeight / document.body.clientWidth

5.12.3.1.5 - 封装函数：viewW() / viewH()

5.12.3.2 - 滚动距离

5.12.3.2.1 - 标准：

5.12.3.2.2 - window.pageXOffset / window.pageYOffset (低版本ie[IE 9以下]不支持)

5.12.3.2.3 - 低版本兼容： document.body.scrollTop / document.documentElement.scrollTop / document.body.scrollLeft / document.documentElement.scrollLeft

5.12.3.2.4 - 封装：scrollY() / scrollX()

5.12.3.3 - 内容高度 : 被内容所撑出来的高度

5.12.3.3.1 - document.body.scrollHeight

5.12.3.3.2 - chrome: 内容高度没有可视区高，scrollHeight就是可视区的高度。

5.12.3.3.3 - 其它浏览器 : 内容的实际高度。

5.12.3.3.4 - scrollH()

5.12.3.4 - 文档高度 ：容器设置的高度

5.12.3.4.1 - document.body.offsetHeight

5.12.3.4.2 - 如果没有设置初始值，就是与scrollHeight相等

5.12.3.4.3 - offsetH()

5.12.3.5 - window对象常用事件 1

5.12.3.5.1 - onscroll : 滚动条滚动所触发的事件。

5.12.3.5.2 - onresize : 窗口尺寸发生改变所触发的事件。

5.12.3.5.3 - 实例： 土豆登陆框实例

5.13 - 第五章 课后练习

5.13.1 - 淘宝手机频道商品选择

5.13.2 - 58同城职位筛选

5.13.3 - 土豆返回顶部

5.13.4 - 模拟留言板

5.13.5 - 土豆登陆框

5.13.6 - 腾讯微云目录树

5.13.7 - 复深蓝软件公司招聘

5.13.8 - 实用的关键字提示层

5.13.9 - 表格操作：数据排序与上移下移

5.13.10 - 扫雷游戏第二步：初中高级切换

5.13.11 - 扫雷游戏第三步：递归运算雷区

6

第六章：事件基础、事件模型、冒泡、事件侦听、捕获、键盘事件、默认事件

6.1 - 焦点事件 1

6.1.1 - 获取焦点事件onfocus 失去焦点事件 onblur 选择指定元素的文本内容 select 1

6.1.1.1 - select()、focus()、blur()应用

6.1.1.1.1 - 实例：

6.1.1.1.1.1 - 京东搜索默认值

6.1.1.1.1.2 - 百度首页自动获得焦点

6.2 - 回顾this关键字

6.3 - Event对象 1

6.3.1 - 获取事件详细信息（事件信息清单）

6.3.2 - Event对象的兼容：ev = ev || window.event / ev = ev || event

6.3.2.1 - ie/chrome : event是一个内置全局对象

6.3.2.2 - 标准下 : 事件对象是通过事件函数的第一个参数传入

6.3.3 - Event对象下的获取鼠标位置：clientX clientY 1

6.3.4 - 实例：方块跟着鼠标移动（消除滚动条影响） 1

6.4 - 事件模型

6.4.1 - 事件冒泡 1

6.4.1.1 - 冒泡的好处：事件委托(分享到例子) 1

6.4.1.2 - 冒泡的不良影响：仿select控件(下拉菜单) 1

6.4.1.3 - 取消冒泡：ev.cancelBubble=true 1

6.4.1.3.1 - 阻止冒泡：ev.stopPropagation();

6.4.1.4 - onmouseenter / onmouseleave

6.4.1.4.1 - onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 。

6.4.1.4.2 - onmouseleave 事件类似于 onmouseout 事件。 唯一的区别是 onmouseleave 事件不支持冒泡 。

6.4.2 - 事件侦听器的第2种注册机制

6.4.2.1 - obj.attachEvent(事件名称，事件函数); [非标准IE下] 1

6.4.2.1.1 - 1.没有捕获

6.4.2.1.2 - 2.事件名称有on

6.4.2.1.3 - 3.事件函数执行的顺序：标准ie->正序 非标准ie->倒序

6.4.2.1.4 - 4.this指向window [解决方法：使用call改变this指向]

6.4.2.2 - obj.addEventListener(事件名称，事件函数，是否捕获); [标准下]
是否捕获 : 默认是false(false:冒泡 true:捕获) 1

6.4.2.2.1 - 1.有捕获

6.4.2.2.2 - 2.事件名称没有on

6.4.2.2.3 - 3.事件执行的顺序是正序

6.4.2.2.4 - 4.this触发该事件的对象(正常)

6.4.2.3 - call()：改变函数内 this 指向 1

6.4.2.3.1 - call()：函数下的一个方法，call方法第一个参数可以改变函数执行过程中的内部this的指向，call方法第二个参数开始就是原来函数的参数列表

6.4.2.3.2 - fn1() = fn1.call()

6.4.2.4 - 实例：封装bind()方法 1

6.4.3 - 事件捕获 1

6.4.3.1 - 捕获：事件进来的时候触发；冒泡：事件出去的时候触发；(事件的顺序是先进来，后出去)

6.4.4 - 事件侦听器的注销： 1

6.4.4.1 - 普通绑定注销——obj.事件名 = null;(例：document.onclick = null;)

6.4.4.2 - 第二种方式绑定注销
ie : obj.detachEvent(事件名称，事件函数);
标准 : obj.removeEventListener(事件名称，事件函数，是否捕获);

6.5 - 键盘事件详解 1

6.5.1 - 基于键盘事件：onkeydown、onkeyup、onkeypress

6.5.1.1 - onkeypress 事件在所有浏览器中不能触发所有按键(例如：ALT, CTRL, SHIFT, ESC) 。如果只对用户是否已经按下一个按键检测， 可以使用 onkeydown 取代, onkeydown被所有按键触发。

6.5.1.2 - 事件触发顺序:onkeydown、onkeypress、onkeyup

6.5.2 - keyCode 键值 [在event事件对象下，event.keyCode;键值是数字类型]
浏览器差异：Internet Explorer 使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 使用 event.which。

6.5.2.1 - 获取用户按下键盘的哪个按键

6.5.2.2 - 实例：键盘控制Div移动 [用定时器解决长按连继执行卡顿的情况]
例如车子，方向键是方向盘，定时器是发动机。

6.5.3 - 其他属性

6.5.3.1 - ctrlKey、shiftKey、altKey [在event事件对象下，event.keyCode;键值是布尔值]

6.5.3.2 - 实例：提交留言（回车、ctrl+回车） 1

6.6 - 事件默认行为 1

6.6.1 - 什么是事件默认行为

6.6.2 - 阻止事件默认行为

6.6.2.1 - 普通方式默认行为的阻止：return false;

6.6.2.2 - 实例：右键菜单（环境菜单）oncontextmenu 1

6.7 - 第六章 课后练习

6.7.1 - 京东首页搜索关键字提示

6.7.2 - 百度首页自动定位焦点到搜索框

6.7.3 - 跟随鼠标的提示层

6.7.4 - 腾讯图片频道鼠标点击图片切换

6.7.5 - 鼠标滑动图片四方向切换

6.7.6 - 键盘方向控制图片四方向切换

7

第七章：事件应用、拖拽、碰撞检测、自定义滚动条、鼠标滚轮

7.1 - 简易拖拽

7.1.1 - 拖拽原理 1

7.1.1.1 - 鼠标和Div的相对距离不变

7.1.1.2 - 三大事件

7.1.1.3 - 把拖拽加到document上

7.1.1.3.1 - 注：FF下, 空Div拖拽bug（18.0版本前）

7.1.1.4 - 实例：简易拖拽

7.1.2 - 修复简易拖拽bug 1

7.1.2.1 - 标准下：阻止默认行为 return false; 1

7.1.2.2 - 非标准ie：设置全局捕获 setCapture(); 1

7.1.2.2.1 - 全局捕获：当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发 1

7.1.2.2.2 - “全局捕获”和“捕获”不是一回事

7.1.2.3 - 修复简易拖拽bug实例：1、选中文字； 1 2、拖拽图片 2

7.1.2.4 - 封装拖拽函数：drag(obj) 1

7.1.2.5 - 实例：1、限制范围的拖拽； 1 2、磁性吸附的拖拽； 2 3、拖拽改变元素大小； 3

7.2 - 碰撞检测

7.2.1 - 碰撞检测原理：

7.2.1.1 - 九宫格（检测重叠、排除法） 1

7.2.1.2 - 半径检测（Math.abs）

7.2.2 - 实例：腾讯微云拖拽碰撞

7.2.3 - 实例：webQQ应用市场拖拽改变层大小

7.3 - 自定义滚动条

7.3.1 - 滚动条实现原理：

7.3.1.1 - 限制范围——范围的大小

7.3.1.2 - 计算比例——当前值/最大值

7.3.2 - 滚动条实现过程：

7.3.2.1 - 模拟滚动条雏形 1

7.3.2.2 - 11.模拟滚动条-限制范围 1

7.3.2.3 - 模拟滚动条控制其他元素的变化 1

7.3.2.4 - 模拟滚动条控制内容滚 1

7.3.3 - 滚动条实例：

7.3.3.1 - 实例：腾讯微云自定义滚动条

7.3.3.2 - 实例：官网关于妙味文字滚动

7.4 - 鼠标滚轮事件 1

7.4.1 - IE/chrome：onmousewheel

7.4.2 - firefox：DOMMouseScroll（必须用addEventListener绑定）

7.4.3 - 滚轮属性：IE/chrome：wheelDelta；firefox：detail（在event事件对象下）
滚动方向不同，该值不同，用于判断滚动方向。

7.4.4 - 两种绑定方式“默认行为”的阻止方法：

7.4.4.1 - attachEvent或（obj.on事件名称=fn ）：return false;

7.4.4.2 - addEventListener：event下的preventDefault();

7.4.5 - 实例：鼠标滚轮与自定义滚动条结合

7.4.6 - 实例：微云图片预览切换图片

7.5 - 第七章 课后练习

7.5.0 - 面向对象拼图实例 1 2

7.5.1 - 仿windows文件拖拽

7.5.2 - 可回放的拖拽效果

7.5.3 - 带方框的可取消拖拽

7.5.4 - 腾讯webQQ应用市场拖拽改变层大小

7.5.5 - 土豆视频列表自定义滚动条

7.5.6 - 腾讯微云目录拖拽合并

7.5.7 - 腾讯活着专题图片切换

7.5.8 - 腾讯中国人的一天专题图片切换

7.5.9 - 妙味课堂JQ专题全屏滚动效果

7.5.10 - cookie 模拟注册、登陆、退出

8

第八章：AJAX基础、XMLHttpRequest、数据格式、解析处理、同源策略

8.1 - 什么是Ajax

8.1.1 - Asynchronous JavaScript and XML（异步JavaScript和XML)

8.1.2 - 节省用户操作，时间，提高用户体验，减少数据请求

8.1.3 - 传输获取数据

8.2 - 使用Ajax

8.2.1 - 实例：使用ajax获取某一文本文件的内容 1

8.3 - 1、创建对象 1

8.3.1 - 创建对象XMLHttpRequest()

8.3.2 - ActiveXObject('Microsoft.XMLHTTP') [IE5和IE6]

8.3.3 - 异常处理 try{ }catch(e){ } 1

代码尝试执行try{}中的内容，如果有错误，则会执行catch{}，并且传入错误信息参数

8.4 - 2、Open()方法 例：xhr.open('get','1.php',true); 1

8.4.1 - open(method,url,async) 参数的含义

8.4.1.1 - method：请求的类型；GET 或 POST

8.4.1.2 - url：文件在服务器上的位置

8.4.1.3 - async：true（异步）或 false（同步）

8.5 - 3、send(string)方法 1

8.5.1 - 将请求发送到服务器，相当于Form的submit

8.5.2 - string：仅用于 POST 请求

8.6 - ajax中POST和GET的区别 1

8.6.1 - GET请求 1

8.6.1.1 - 有缓存——解决方法：在url？后面连接一个随机数，时间戳

8.6.1.2 - 中文乱码——对中文用encodeURI()进行编码

8.6.2 - POST请求 1

8.6.2.1 - 数据放在send()里面作为参数传递

8.6.2.2 - 需要用setRequestHeader()方法声明发送的数据类型

8.6.2.3 - 没有缓存问题

8.6.2.4 - setRequestHeader()方法已设置数据类型，所以无需再次编码

8.6.3 - 表单中POST和GET的区别1

8.7 - setRequestHeader()——向请求添加 HTTP 头

8.7.1 - 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

8.7.1.1 - 例：

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

8.7.2- setRequestHeader(header,value)

8.7.2.1 - header: 规定头的名称

8.7.2.2 - value: 规定头的值

8.9 - 4、服务器响应

8.9.1 - 服务器返回的[数据格式]

8.9.1.1 - responseXML：获得 XML 形式的响应数据

8.9.1.2 - responseText 获得字符串形式的响应数据（html类数组、类JSON）

8.9.2 - JSON数据解析处理（针对responseText） 1

8.9.2.1 - JSON.parse()：把字符串转成对应对象

8.9.2.2 - JSON.stringify()：把一个对象转成对应字符串

8.9.2.3 - JSON对象的以上两个方法不支持IE7及以下浏览器，需要下载对应js（json.org中JavaScript:->json2.js）加载到页面中才能使用。 1

8.9.2.4 - Eval解析JSON：eval('('+ data +')')

8.9.2.4.1 - eval函数解析不安全，原因是eval不但可以解析JSON字符串，还会执行其中的代码块（如果有的话）

8.9.3 - onreadystatechange事件—每当 readyState 属性改变时，就会调用该函数。 1

8.9.3.1 - readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

8.9.3.1.1 - 0: 请求未初始化

8.9.3.1.2 - 1: 服务器连接已建立

8.9.3.1.3 - 2: 请求已接收

8.9.3.1.4 - 3: 请求处理中

8.9.3.1.5 - 4: 请求已完成，且响应已就绪

8.9.3.2 - status

8.9.3.2.1 - 200: "OK"

8.9.3.2.2 - 404: 未找到页面

8.7 - 同源策略的影响，解决跨域问题的方法 1

8.7.1 - 1、JSONP：只支持GET请求，不支持POST请求。（jsonp是一种解决方案 不是一种技术）

8.7.2 - 2、代理：在本地写一个接口去拿另一个域的数据。（php不存在跨域问题）

8.7.3 - 3、PHP端修改header（XHR2方式）

header('Access-Control-Allow-Origin:*');//允许所有来源访问

header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

8.7.3.1 - 跨域请求的对象及IE8+兼容问题

8.7.3.1.1 - IE8开始，增加了XDomainRequest作为跨域请求的对象

8.7.3.1.2 - 而Firefox与Chrom则CORS直接实现在XMLHttpRequest对象中

8.7.3.1.2 - 不过IE10中，XMLHttpRequest对象也实现了CORS。

9

第九章：AJAX库封装、AJAX的子对象、新浪微博AJAX实例

9.1 - AJAX的封装：ajax(method, url, data, success) 1

9.1.1 - 参数

9.1.2 - 回调函数

9.1.3 - JSON格式的参数

9.2 - AJAX的封装2：Ajax 1

9.2.1 - Ajax.get(targetUrl, resultHandle)

9.2.2 - Ajax.post(targetUrl, sendString, resultHandle)

9.2.3 - 面向对象封装，并兼容性更好

9.3 - AJAX对象的子对象：upload

9.3.1 - 数据的异步无刷新上传与下载

9.4 - ajax实例开发

9.4.1 - 无刷新获取后台数据 1

9.5.2 - 留言本类瀑布流效果 1 下载

10

第十章：AJAX跨域问题解决方案之-JSONP、百度搜索提示、豆瓣接口应用

10.1 - 跨域请求：一个域名下的文件请求另外一个域名下的资源，就产生了跨域

10.2 - 跨域的问题和常用解决方式：Jsonp : json padding

10.3 - JSONP 的概念

10.3.1 - JSONP只支持GET请求，不支持POST请求。

10.3.2 - JSONP是一种解决方案，不是一种技术。

10.4 - <script>标签src的作用 ： 加载（包含指定的外部文件） 1

10.4.1 - 可以跨域包含

10.4.2 - 被包含的资源可以是任何类型的文件(可以是txt,php等)

10.4.3 - 他只关注被包含的文件的内容是否是合法的JS

10.5 - JSONP 的原理 1 1 1

10.5.1 - 定义函数

10.5.2 - 包含外部文件，在被包含的文件中执行调用定义好的函数

10.5.3 - 参数的（数据）的实现

10.5 - JSONP 的实际应用

10.5.1 - 百度/淘宝下拉提示 1

10.5.2 - 豆瓣应用 1

10.5.2.1 - 接口分析

10.5.2.2 - 书籍（或者电影）搜索

10.5.2.3 - 搜索数据（书籍）的展现

10.5.2.4 - 获取特定数据（书籍）的详细信息

11

第十一章：cookie、localstorage、本地存储、ajax与localStorage模拟网易新闻客户端

11.1 - cookie 1

11.1.1 - cookie的作用：保存数据到客户端浏览器

11.1.2 - cookie的存储范围：
1、不同的浏览器存放的cookie位置不一样，也是不能通用的；
2、cookie的存储是以域名形式进行区分的

11.1.3 - cookie的存储格式：document.cookie = '名字＝值';
内容最好编码存放,encodeURI：编码 decodeURI：解码

11.1.4 - cookie使用限制：

11.1.4.1 - 个数限制

11.1.4.2 - 大小限制

11.1.5 - cookie过期时间限制：document.cookie = '名称=值;expires=' + 字符串格式的时间; toUTCString();
由于目前UTC已经取代GMT作为新的世界时间标准，使用toGMTString()和toUTCString()两种方法返回字符串的格式和内容均相同。

11.1.6 - cookie读取：document.cookie; （'username=miaov; age=3'）

11.1.7 - cookie相关函数封装：

11.1.7.1 - setCookie();

11.1.7.2 - getCookie();

11.1.7.3 - delCookie();

11.1.8 - 实例：用cookie记录上一次拖拽的位置

11.1.9 - 实例：妙味论坛记录登陆状态

11.1.10 - 实例：.记录用户名 1

11.2 - 本地存储

11.2.1 - 本地存储——Storage sessionStorage localStorage

11.2.2 - 本地存储——Storage的特点存储量限制(5M)客户端完成，不会请求服务器处理

11.2.3 - 本地存储——sessionStorage数据是不共享、 localStorage共享

11.2.4 - Storage API——setItem() getItem() removeItem() clear()

11.2.5 - Storage API——存储事件 Key newValue oldValue storageArea

11.2.6 - 实例——保存注册信息 同步购物车

11.2.7 - applicationCache 离线应用 离线存储 搭建离线应用程序 检测离线状态

11.2.8 - 服务器设置头信息 : AddType text/cache-manifest .manifest

11.2.9 - navigator.onLine : 当前是否在线 onlineoffline:在线离线的两个事件

11.2.10 - applicationCache API——status(0,1,2,3,4,5): 缓存状态

11.2.11 - 事件——oncached onchecking ondownloading onupdateready

11.2.12 - 事件——onobsolete onerror onnoupdate onprogress

11.2.13 - 实例：ajax与localStorage模拟网易新闻客户端

12

第十二章：正则表达式、从此正式“落户火星户口”，玩转非人类符号的语言

0.1 - 复习字符串操作

0.1.1 - indexOf 查找

0.1.2 - substring 获取子字符串

0.1.3 - charAt 获取某个字符

0.1.4 - split 分割字符串，获得数组

0.2 - 找出字符串中的所有数字

0.2.1 - 用传统字符串操作完成 1

0.2.2 - 用正则表达式完成 1

12.1 - 什么是正则表达式 R

12.1.1 - 正则表达式是描述字符模式的对象。

12.1.2 - 用于对[字符串]模式匹配及检索替换，是对[字符串]执行模式匹配的强大工具。

12.2 - 正则的两种语法

12.2.1 - new RegExp('模式', '修饰符(可选)')

例：var r2 = new RegExp('test', 'g');

12.2.2 - /模式/修饰符(可选)

例：var patt = /runoob/i

12.3 - 修饰符：用于执行区分大小写和全局匹配

12.3.1 - i：执行对大小写不敏感的匹配。(ignore)

12.3.2 - g：执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。(global)

12.3.3 - m：执行多行匹配。

12.4 - 中括号（字符类）：用于查找某个范围内的字符。（只表示一个字符）

12.4.1 - [abc]：查找方括号之间的任何字符。（[]的整体代表一个字符） 1

实例：o[usb]t——obt、ost、out

12.4.2 - [^abc]：查找任何不在方括号之间的字符。（如果^写在[]里面的话，就代表排除的意思） 1

实例：o[^0-9]t——oat、o?t、o t

12.4.3 - [0-9]：查找任何从 0 至 9 的数字。

实例：id[0-9]——id0、id5

12.4.4 - [a-z]：查找任何从小写 a 到小写 z 的字符。

12.4.5 - [A-Z]：查找任何从大写 A 到大写 Z 的字符。

12.4.6 - [A-z]：查找任何从大写 A 到小写 z 的字符。

12.4.7 - [adgk]：查找给定集合内的任何字符。

12.4.8 - [^adgk]：查找给定集合外的任何字符。

12.4.9 - (red|blue|green)：查找任何指定的选项(|：或的意思)。 1

12.5 - 元字符：元字符（Metacharacter）是拥有特殊含义的字符

12.5.1 - .：查找单个[任意字符](除了换行和行结束符)。

12.5.1.1 - . ： 任意字符

12.5.1.2 - \. ： 真正的点

12.5.2 - \w：查找单词字符（字母、数字、下划线）。

12.5.3 - \W：查找非单词字符。

12.5.4 - \d：查找数字。

12.5.5 - \D：查找非数字字符。

12.5.6 - \s：查找空白字符。

12.5.7 - \S：查找非空白字符。

12.5.8 - \b：匹配单词边界。

12.5.9 - \B：匹配非单词边界。

12.5.10 - \0：查找 NULL 字符。

12.5.11 - \n：查找换行符。

12.5.12 - \f：查找换页符。

12.5.13 - \r：查找回车符。

12.5.14 - \t：查找制表符。

12.5.15 - \v：查找垂直制表符。

12.5.16 - \xxx：查找以八进制数 xxx 规定的字符。

12.5.17 - \xdd：查找以十六进制数 dd 规定的字符。

12.5.18 - \uxxxx：查找以十六进制数 xxxx 规定的 Unicode 字符。

12.6 - 量词

12.6.1 - n+：匹配任何包含【至少一个】 n 的字符串。

例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。

12.6.2 - n*：匹配任何包含【零个或多个】 n 的字符串。

例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。

12.6.3 - n?：匹配任何包含【零个或一个】 n 的字符串。

例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。

12.6.4 - n{X}：匹配包含 X 个 n 的序列的字符串。

例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。

12.6.5 - n{X,}：X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。

例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。

12.6.6 - n{X,Y}：X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。

例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。

12.6.7 - n$：匹配任何结尾为 n 的字符串。

12.6.8 - ^n：匹配任何开头为 n 的字符串。

12.6.9 - ?=n：匹配任何其后紧接指定字符串 n 的字符串。

12.6.10 - ?!n：匹配任何其后没有紧接指定字符串 n 的字符串。

12.6.11 - 小括号()：1、分组操作；2、匹配子项

12.6.11.1 - 匹配子项

12.6.11.1.1 - 把正则的整体叫做（母亲）

12.6.11.1.2 - 把左边第一个小括号里面的正则，叫做这个第一个子项(母亲的第一个孩子)

12.6.11.1.3 - 第二个小括号就是第二个孩子，如有多个依次类推

12.6.11.1.4 - 当match不加g的时候才可以获取到子项的集合 1

12.6.11.2 - 例 1

var str = '2013-6-7';
var re = /(\d+)(-)/g;
str = str.replace(re,function($0,$1,$2){
    //第一个参数：$0（母亲）
    //第二个参数 : $1(第一个孩子)
    //第三个参数 : $2(第二个孩子)
	return $0.substring(0,$0.length-1) + '.';
});
alert( str );   //2013.6.7

12.6.12 - 重复子项： \1 \2

12.6.12.1 - \1 代表和第一个子项一样的内容 \2 代表和第二个子项一样的内容

12.6.12.2 - 例：找重复项最多的字符和个数 1

12.7 - RegExp对象方法

12.7.1 - test 用于检测一个字符串是否匹配某个模式。 R

12.7.1.1 - 返回：真假

12.7.1.2 - 语法：正则.test(字符串)

12.7.1.3 - 实例：是否有不是数字的字符

12.7.2 - exec 检索字符串中指定的值。返回找到的值，否则返回 null。 R

12.7.2.1 - 返回：如果字符串中有匹配的值返回该匹配值，否则返回 null。

12.7.2.2 - 语法：正则.exec(字符串)

12.7.3 - compile 用于改变和重新编译正则表达式。 R

12.7.3.1 - 结果：修改原正式表达式

12.7.3.2 - 语法：正则.compile('模式', '修饰符(可选)')

12.8 - 支持正则表达式的 String 对象的方法

12.8.1 - search 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串 R

12.8.1.1 - 返回出现的位置，如果没有找到任何匹配的子串，则返回 -1。

12.8.1.2 - 语法：字符串.search(正则)

12.8.2 - match 找到一个或多个正则表达式的匹配。 R

12.8.2.1 - 返回一个数组，如果没有找到任何匹配的文本，则返回 null。

12.8.2.2 - 语法：字符串.match(正则)

12.8.2.3 - 这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。

12.8.3 - replace 替换与正则表达式匹配的子串。 R

12.8.3.1 - 返回一个替换后的新的字符串

12.8.3.2 - 语法：字符串.replace(正则/字符串，新字符串/回调函数)

12.8.3.3 - 注：该方法不会改变原始字符串。

12.8.3.4 - 例：敏感词过滤。 1

12.8.4 - split 把字符串分割为字符串数组。 R

12.8.4.1 - 返回一个字符串数组

12.8.4.2 - 语法：字符串.split(正则/字符串，返回的数组的最大长度[可选])

12.8.4.3 - 注：该方法不会改变原始字符串。

12.9 - 正则实例

12.9.1 - 是否带有小数

function  isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
} 

12.9.2 - 校验是否中文名称组成

function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

12.9.3 - 校验电话码格式

function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

12.9.4 - 校验邮件地址是否合法

function IsEmail(str) {
    var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
    return reg.test(str);
}

12.9.5 - 高级表单校验

匹配中文：[\u4e00-\u9fa5]
行首行尾空格：^\s*|\s*$
Email：^\w+@[a-z0-9]+(\.[a-z]+){1,3}$
网址：[a-zA-z]+://[^\s]*
QQ号：[1-9][0-9]{4,9}
邮政编码：[1-9]\d{5}
身份证：[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x

12.9.6 - 判断是不是QQ号 1

12.9.7 - 去掉前后空格 1

12.9.8 - 过滤HTML标签 1

12.9.9 - 获取class 1

13

第十三章：面向对象基础：构造函数、原型-prototype

13.1 - 什么是面向对象编程 1

13.1.1 - 用对象的思想去写代码，就是面向对象编程

13.1.2 - 编程写法

13.1.2.1 - 过程式写法

13.1.2.2 - 面向对象写法

13.2 - 面向对象编程(OOP)的特点

13.2.1 - 抽象：抓住核心问题（找出特点、核心）

13.2.2 - 封装：只能通过对象来访问方法

13.2.3 - 继承：从已有对象上继承出新的对象

13.2.4 - 多态：多对象的不同形态

13.3 - 对象的组成 1

13.3.1 - 属性（变量）：状态、静态的

13.3.2 - 方法（函数）：过程、动态的

13.4 - 对象的创建 1

13.4.1 - 字面形式 {}

13.4.2 - 构造形式 new Object()

13.4.3 - 工厂方式 1

13.4.3.1 - 面向对象中的封装函数

13.4.3.2 - New关键字在函数内（new Object()）

13.4.3.3 - 函数内的This指向Windows

13.4.4 - 构造函数 1

13.4.4.1 - 用来创建对象的函数，叫做构造函数

13.4.4.2 - New关键字在函数外（函数前，如：New Array()）

13.4.4.3 - This指向为新创建的对象

13.5 - 对象的引用（基本类型和对象类型的区别） 1

13.5.1 - 赋值时

13.5.1.1 - 基本类型 : 赋值的时候只是值的复制

13.5.1.2 - 对象类型 : 赋值不仅是值的复制，而且也是引用的传递

13.5.1.3 - 赋值的时候，会在内存中重新定义一个引用。

13.5.2 - 比较的时候

13.5.2.1 - 基本类型 : 值相同就可以

13.5.2.2 - N对象类型 : 值和引用都相同才行

13.5.3 - 每个对象的引用不同，对应的方法也不同，浪费内存。（解决方法：原型）

13.6 - 原型：prototype 1

13.6.1 - 概念

重写对象方法，让相同方法在内存中存在一份（提高性能）

13.6.2 - 如何理解(借助样式来理解) 1

13.6.2.1 - 普通方法 : 相当于CSS中的style

13.6.2.2 - 原型 : 相当于CSS中的class

13.6.2.3 - 原型可以所有对象共用，普通方法优先级更高 1

13.6.3 - 构造函数及原型的写法 1 1

function 构造函数(){
	this.属性
}

构造函数.原型.方法 = function(){};


var 对象1 = new 构造函数();
对象1.方法();

13.6.4 - 过程式写法改成面向对象写法的原则

13.6.4.1 - 先把普通方法变型 1

13.6.4.1.1 - 尽量不要出现函数嵌套函数

13.6.4.1.2 - 可以有全局变量

13.6.4.1.3 - 普通方法变型

13.6.4.1.4 - 把onload中不是赋值的语句放到单独函数中

13.6.4.2 - 再改成面向对象 1

13.6.4.2.1 - 全局变量就是属性

13.6.4.2.2 - 函数就是方法

13.6.4.2.3 - Onload中创建对象

13.6.4.2.4 - 改this指向问题 1

13.6 - 面向对象的实例

13.6.1 - 面向过程的选项卡 1

13.6.2 - 面向对象的选项卡 1

13.6.3 - 面向对象的拖拽 1

14

第十四章：高级面向对象：包装对象、原型链、继承

14.1 - 包装对象（基本类型）

14.1.1 - 在JS源码 : 系统对象也是基于原型的程序 1

14.1.2 - 包装对象 : 基本类型都有自己对应的包装对象(String Number Boolean) 1

14.1.3 - 使用基本类型时，基本类型会找到对应的包装对象类型，然后包装对象把所有的属性和方法给了基本类型，然后包装对象消失 1

14.2 - 原型链 1

14.2.1 - 实例对象与原型之间的连接，叫做原型链

14.2.2 - Object对象类型是原型链的最外层：Object.prototype

14.2.3 - __proto__( 隐式连接 )

14.3 - 面向对象的一些属性和方法

14.3.1 - hasOwnProperty()：判断是不是对象自身下面的属性 1

14.3.1.1 - 是对象私有的属性返回true

14.3.1.2 - 是原型中(共享)的属性返回false

14.3.2 - constructor ：查看对象的构造函数 1

14.3.2.1 - 每个原型都会自动添加constructor属性

14.3.2.2 - For in 的时候有些属性是找不到的(如：constructor)

14.3.2.3 - 避免修改construtor属性（使用json修改对象的prototype时会覆盖construtor属性，这时需要修正construtor指向）

14.3.2.4 - constructor属性还可以用来做类型判断

14.3.3 - instanceof：运算符，判断对象与构造函数在原型链上是否有关系 1

14.3.3.1 - 可用此做类型判断

14.3.4 - toString()：object上的方法 1

14.3.4.1 - 把对象转成字符串

var arr = [1,2,3];
alert( arr.toString() );  //'1,2,3'

14.3.4.2 - 进行转换：转成16进制

var num = 255;
alert( num.toString(16) );  //'ff'  进行转换：转成16进制

14.3.4.3 - 利用toString做类型的判断（最完美的类型判断方法，可以判断跨页面的类型）

var arr = [];
alert( Object.prototype.toString.call(arr) );  //'[object Array]'

14.3.4.3 - toString方法，系统对象下面都是自带的 , 自己写的对象都是通过原型链找object下面的

14.4 - 继承：子类可以继承父类的一些功能 ( 代码复用 )，同时子类不影响父类。

14.4.1 - 继承的形式

14.4.1.1 - 拷贝继承 1

14.4.1.1.1 - 属性的继承 : 调用父类的构造函数 call

例：

function CreatePerson(name,sex){   //父类
	this.name = name;
	this.sex = sex;
}
function CreateStar(name,sex,job){  //子类
	CreatePerson.call(this,name,sex);	
	this.job = job;
}

14.4.1.1.2 - 方法的继承 : for in : 拷贝继承 (jquery也是采用拷贝继承extend)

例：

            extend( CreateStar.prototype , CreatePerson.prototype );  //拷贝原型
            
            //封装的拷贝函数
            function extend(obj1,obj2){
	for(var attr in obj2){
		obj1[attr] = obj2[attr];
	}
}

14.4.1.2 - 类式继承 1

14.4.1.2.1 - 类 : JS是没有类的概念的 , 把JS中的构造函数看做的类

14.4.1.2.2 - 要做属性和方法继承的时候，要分开继承

14.4.1.2.3 - 属性继承

例：

function Aaa(){   //父类
	this.name = [1,2,3];
}	

function Bbb(){   //子类
	
	Aaa.call(this);
	
}

14.4.1.2.4 - 方法继承

例：

var F = function(){};
F.prototype = Aaa.prototype;
Bbb.prototype = new F();	//只继承了方法，没有继承属性
Bbb.prototype.constructor = Bbb; //修正指向问题

14.4.1.3 - 原型继承：借助原型来实现对象继承对象 1

例：

var a = {
	name : '小明'
};
var b = cloneObj(a);
b.name = '小强';

function cloneObj(obj){
	var F = function(){};
	F.prototype = obj;
	return new F();
}

14.4.2 - 三种继承的形式的区别

14.4.2.1 - 拷贝继承：通用型的 有new或无new的时候都可以

14.4.2.2 - 类型继承：new构造函数

14.4.2.3 - 原型继承：无new的对象

14

第十四章：面向对象、原型-prototype、构造函数&原型、封装、继承、多态

14.1 - 面向过程和面向对象的区别

14.2 - 编程思想的转变

14.3 - 对象的组成

14.3.1 - 事外观 ：特性的描述，属性 - 非函数

14.3.2 - 功能 ：方法 - 函数

14.4 - 对象的创建

14.4.1 - 字面形式 {}

14.4.2 - 构造形式 new Object()

14.4.3 - 用户对象的构造方式

14.4.4 - 引用类型 - 传值和传址

14.5 - 原型：prototype

14.5.1 - 函数的属性 prototype

14.5.2 - 对象的属性 __proto__( 隐式连接 )

14.5.3 - 对象原型链分析

14.5.4 - 面向对象编写方式之一 - 构造函数&原型

14.6 - 面向对象的实例

14.6.1 - 面向过程的选项卡

14.6.2 - 面向对象的选项卡

14.6.3 - 两种写法的分析和比较

14.7 - 面向对象、基于对象、面向过程的总结分析和比较

14.7.1 - 面向对象三大特性：封装、继承、多态

14.7.2 - 面向对象的选项卡

14.7.3 - 两种写法的分析和比较

15

第十五章：包装对象、面向对象属性及方法、对象继承call、类式继承、原型继承

15.1 - 包装对象

15.1.1 - JS基于原型的程序

15.1.2 - String Number Boolean

15.2 - 面向对象的一些属性和方法

15.2.1 - toString() : object上的方法

15.2.2 - hasOwnProperty() : 看是不是对象自身下面的属性

15.2.3 - constructor : 查看对象的构造函数

15.2.3.1 - 每个原型都会自动添加constructor属性

15.2.3.2 - For in 的时候有些属性是找不到的

15.2.3.3 - 避免修改construtor属性

15.2.4 - instanceof : 运算符

15.2.4.1 - 对象与构造函数在原型链上是否有关系

15.3 - 对象的继承

15.3.1 - 在原有对象的基础上，略作修改，得到一个新的对象

15.3.2 - 不影响原有对象的功能

15.4 - 继承的实现

15.4.1 - 属性：call

15.4.2 - 方法：for in

15.4.3 - 例子 : 继承的拖拽

15.5 - 实现继承的其他形式

15.5.1 - 类式继承

15.5.1.1 - 利用构造函数(类)继承的方式

15.5.2 - 原型继承

15.5.2.1 - 借助原型来实现对象继承对象

12

第十二章：JS运动框架（tween核心），轻松秒杀各种flash级交互特效

12.1 - JS中的运动原理

12.1.1 - 如何让元素在页面“运动”起来

12.2 - Tween介绍

12.2.1 - 一个来自flash的运动算法

12.2.2 - 运动形式的多样性

12.3 - Tween公式

12.3.1 - 4个参数:

12.3.1.1 - t：current time（当前时间）

12.3.1.2 - b：beginning value（初始值）

12.3.1.3 - c： change in value（变化量）

12.3.1.4 - d：duration（持续时间）

12.3.1.5 - return （目标点）

12.4 - 形成运动框架

12.4.1 - 如何获取当前时间

12.4.1.1 - ( new Date() ).getTime()

12.4.1.2 - 例子 : 循环轮播图

16

第十六章：JQuery使用、jQuery插件开发、闭包

16.1 - 选择器相关：属性选择器、基础选择器、基础过滤、子元素过滤、内容过滤等……

16.1.1 - 实例：JQ版选项卡

16.2 - DOM操作：class 属性、复制元素、DOM 插入、DOM 插入并包裹现有内容、DOM 插入现有元素内、DOM 插入现有元素外、DOM 移除、DOM 替换……

16.2.1 - 实例：JQ版弹窗

16.3 - 事件：浏览器事件、文档加载、绑定事件处理器、事件对象、表单事件、键盘事件、鼠标事件……

16.3.1 - 实例：JQ版拖拽

16.4 - 运动：基本特效、自定义、渐变、滑动……

16.4.1 - 实例：轮播图

16.5 - 插件：基于JQ实现的各种应用

16.5.1 - 闭包原理：什么是闭包、闭包的形成条件、闭包的优点、闭包的缺陷、如何解决闭包引发的内存泄漏

16.5.2 - 实例：拖拽（闭包应用）

17

第十七章：学无止境，课后学习视频系列之 - jQuery源码分析全套高清视频

18

第十八章：学无止境，课后学习视频系列之 - HTML5、CSS3全套高清视频

19

第十九章：学无止境，课后学习视频系列之 - 妙味2013年新官网揭秘视频

20

第二十章：学无止境，课后学习视频系列之 - 原生JS实现小蜜蜂游戏视频

21

第二十一章：学无止境，课后学习视频系列之 - seaJS模块化开发视频

22

第二十二章：学无止境，课后学习视频系列之 - css3实现3D旋转轮播图视频

23

第二十二章：学无止境，课后学习视频系列之 - css3打造3D翻转焦点图视频

24

第二十二章：学无止境，课后学习视频系列之 - HTML5拖拽购物车开发实例视频

25

第二十二章：学无止境，课后学习视频系列之 - canvas实现-简易版祖玛小游戏视频

26

第二十二章：学无止境，课后学习视频系列之 - HTML5打造自定义播放器视频

27

第二十二章：学无止境，课后学习视频系列之 - JS数学揭密之【三角函数】视频

28

第二十二章：学无止境，课后学习视频系列之 - JavaScript面试题系列视频

29

第二十二章：学无止境，课后学习视频系列之 - 初探backbone系列视频

30

第二十二章：学无止境，课后学习视频系列之 - 妙味课堂canvas系列视频

31

第二十二章：学无止境，课后学习视频系列之 - 妙味课堂-移动前端开发视频

32

第二十三章：学无止境，课后学习视频系列之 - 妙味课堂-vQuery迷你JQ库开发视频

33

JS实战项目开发 - RIA项目实战“微云”、“WebQQ”、“JS游戏开发”或“个人炫酷网站开发”

33.1 - svn的环境搭建

33.2 - 团队协作、svn的使用

33.3 - “微云 || WebQQ 项目”组件开发

33.4 - “微云 || WebQQ 项目”业务逻辑的实现

33.5 - “微云 || WebQQ 项目”优化方案

33.6 - “微云 || WebQQ 项目”测试、布署上线、妙味云平台发布

34

查看妙味往届毕业班学员作品（排名随机生成，不分先后）

34.1 - 学员作品：3D卡片式个人网站展示

34.2 - 学员作品：华丽版2048

34.3 - 学员作品：3D个人网站展示

34.4 - 学员作品：课后练习全程记录

34.5 - 学员作品：JS经典坦克大战游戏

34.6 - 学员作品：仿WEB-QQ桌面级应用

34.7 - 学员作品：视觉差网站

34.8 - 学员作品：仿百度图片瀑布流

34.9 - 学员作品：个人作品网站

34.10 - 学员作品：模拟Q+桌面RIA项目

34.11 - 学员作品：经典俄罗斯方块JS版游戏

34.12 - 学员作品：儿时经典（JS版）超级玛丽

34.13 - 学员作品：火爆一时的像素鸟（JS版）游戏

34.14 - 学员作品：windows经典游戏：扫雷

34.15 - 学员作品：仿超经典炸弹人

34.16 - 学员作品：视觉差效果展示

34.17 - 学员作品：JS版十滴水游戏

34.18 - >>点击访问更多妙味学员作品