一.JS 简史

什么是DOM（文档对象模型）？

DOM概念1

DOM概念2

JS 版本进化        

1995年------Netscape公司与Sun公司合作开发------Netscape  Navigator2 浏览器-------JS1.0版本；

             ------微软公司发布VBScript------IE3浏览器------同时以JScript为名发布了JS的一个版本；

面对微软的竞争，那俩公司联合ECMA（欧洲计算机制造商协会）对JS语言进行了标准化；

1996年------JS，ECMAScript，JScript都稳了，Netscape和微软在各自第三版浏览器中都不同程度地支持------JS1.1版本

脚本语言JS

1997年6月------Netscape  Navigator4发布

           10月------IE4发布

浏览器战争，版本改进，DOM扩展，使JS发挥发挥空间变大，新名词产生：DHTML（动态HTML）。

DHTML

不幸的是，那俩浏览器制造商虽然目标一样，但是实现方法完全不一样（我们不一样），即两种不兼容的DOM。

浏览器之间的战争

DOM标准制定

DOM与API

微软由于windows系统自带IE战胜Netscape公司

战争结束新起点开始

二.JS语法复习

1.准备工作

解释型和编译型

2.JS语句

语句

3.注释

单行注释：//

多行注释：/*  */

注意：在HTML中有一种注释方式是<!--  -->,这个在JS中只适用于单行。

<!---   --->注释方式

4.变量

最有效率的声明变量方式

变量名规范

5.数据类型

1.字符串------字符串之中的特殊符号要用\\来转义（String）；

2.数值------可以是浮点数（Number）；

3.布尔值（Boolean），

曾经学过的数电知识好像（自动化专业学生）

4.数组（Array），

标量及数组

关联数组及其本质

5.对象（Object），

属性名和属性值

6.操作

1.算术操作符

=------切记是赋值操作；

+------可以做加法运算，也可以 拼接  字符串；

+=------快捷操作，完成加法和赋值；

2.条件语句

if语句基本语法

另一种写法

比较操作符：>,<,>=,<=,

不等于

逻辑操作符：&&  ，||    ，！；

逻辑非

3.循环语句

本质

while循环

本质解答

do...while循环

在希望我们代码至少执行一次的时候用这个

for 循环

与while循环比较

7.函数

函数定义

函数用法1

函数用法2

命名习惯

变量的作用域

变量作用域隐患

8.对象

函数？方法？

实例概念

JS提供了很多预先定义的对象，这些可以拿来就用的对象称为内建对象。

宿主对象

三.DOM

D------document（文档）

D

O------Object

window对象是宿主对象，document对象也是

M------Model，Map

M

节点树------元素节点，文本节点，属性节点

节点概念

元素节点

元素节点

文本节点

文本节点

属性节点

属性节点

获取元素------DOM  API提供三种方法，分别是通过元素ID，标签名字和类名字来获取。

1.getElementById()

返回的是对象

2.getElementsByTagName()

返回数组，数组中的每一个值都是一个对象

通配符也适用

3.getElementsByClassName()

这个常用的居然是H5新增的

返回数组

可以这样使用

阶段小结

小结

获取和设置属性

1.getAttribute()

这是个函数，不是对象

2.setAttribute()

也是个函数

威力！！！

四.案例研究：JS图片库

知识点：事件处理函数

事件处理函数

事件处理函数工作机制

遇到问题：当把函数写在window.onload=function（）{ }中时，由于作用域的问题，事件处理函数没有识别到函数，会报错；假如在 onload中绑定点击事件，便可以识别，这都是由于JS中作用域的问题。

childNodes属性

获取节点所有直接子元素的方法，返回的是数组，空格也被当做子元素返回

nodeType属性

节点类型

nodeValue

改变文本节点的值

firstChild和lastChild

数组的属性

小结

小结

五.最佳实践

开头语：什么是最佳实践！

新概念：伪协议

伪协议

最佳实践方案：分离JS------对象检测

使用之前先检测

------浏览器嗅探技术（不怎么样，被淘汰）

性能考虑

1.尽量减少访问DOM和尽量减少标记；

2.合并和放置脚本，减少加载页面时发送的请求数量；

3.压缩脚本（包括修改局部变量名长度，去除没有必要的空格和注释）。

小结

六.案例研究：图片库改进版

态度鸡汤

小知识1

三元操作符

DOM Core和HTML-DOM

这些并不是JS

优化小结

实用的代码片段

有意思

七.动态创建标记

根本思维理解

createElement方法------只能创建元素节点

文档碎片---新概念

appendChild方法

以上两个方法是创建元素节点并把它接到DOM树上

createTextNode------创建文本节点，和createElement用法一样

insertBefore（）------在已有元素前插入一个新元素

insertBefore使用方法

实用代码片段：insertAfter（）------在已有元素的后面插入一个元素

小技巧

AJAX

概念

技术核心

AJAX技术核心

第七章小结

看到此处，AJAX及XMLHttpReuqest对象仍然不是很明白，此时此刻我百度了下，所有BOM和DOM都是宿主对象，日后在说！

八.充实文档的内容

知识点

本章小结，主要是用JS和DOM技术去处理文档

九.CSS—DOM

前面没提到的DOM

原来是这样

DOM只能读取内敛样式的值

可贵的编程思想

小结

本章讲的只要是用DOM方法去改变CSS样式，重点是在这种方法中体会其中的编程思想。

十.用JS实现动画效果

是否是JQ实现动画的逻辑？

JS允许自创属性

读完本章，明白了实现动画的基本思路，也知道了一点开发框架的思路。

十一.HTML5

H5的冰山一角，凭兴趣去研究

文中提到在目前兼容还不是很好的情况下并不适合全部使用H5。

十二.综合示例

把之前学习的所有的东西再综合运用下

看来对JQ研究还不够，竟然不知道

罪过罪过

菜死了菜死了

至此，看完了

看完此书，更明白了一些库在实现一些功能背后的原理，本书属于基础书，很好。