课程回顾

1. 表单校验涉及知识点：
2. 失去焦点事件onblur 表单提交事件onsubmit
3. 隐藏元素：
   1. display：none 脱离文档流
   2. visibility：hidden 不脱离文档流
4. 事件取消： 在事件中执行return false;
5. 确认框： confirm
6. 自定义对象
7. 两种方式：
   1. 声明方法的方式 function Person(name,age){ this.name=name; this.age=age; this.run = function(){} } var p = new Person('aaa',20);
   2. 声明变量的方式 var p = { "name":"xxx", "age":28, "run":function(){} }
8. DHTML动态的html html+css+js
9. 包含BOM和DOM
10. BOM：浏览器对象模型
11. window里面的常用方法：alert() confirm() prompt() parseInt/Float isNaN()
12. window里面常用的属性
    1. location位置： href获取和设置浏览器访问的地址 reload()刷新页面
    2. history历史：length历史页面数量 back()返回 forward（）前进 go(num) 负值返回 正值前进 0刷新
    3. screen屏幕：获得屏幕的分辨率 width/height availWidth/Height
    4. navigator导航/帮助：userAgent 得到浏览器的版本信息
    5. document 包含和页面相关的内容 DOM
13. window的相关事件：
    1. 页面加载完成事件 onload
    2. 页面点击事件 onclick
    3. 页面失去焦点事件 onblur
    4. 页面获取焦点事件 onfocus
14. eval() 可以将字符串以js代码形式执行

通过js代码给元素添加样式

div.style.样式名称="值";

图片移动练习

创建demo02.html 在页面中添加一张图片 在页面加载完成的时候通过js代码修改图片的尺寸为50*50 当点击屏幕时让图片往右侧移动5个像素

轮播图练习步骤：

1. 通过css调整图片和div的大小
2. 把图片修改成绝对定位 位置相对于div
3. 添加script标签 在页面加载完成时 获取所有图片并遍历设置每一个图片的left值分别为0w 1w 2w
4. 开启定时器一秒执行100次，每次执行的时候获取所有的图片，然后遍历得到图片之前的left值 然后-4 再赋值回去 ，在赋值回去之前判断如果新的left值<=-200把新的left值改成400，同时把定时器停止
5. 把移动一张图片的代码放到一个方法中，然后再开启定时器每隔2秒调用一次这个方法
6. 给div添加鼠标移入和移出事件，在事件中对应的这关闭定时器 和重新开启定时器

定时器

1. 开启重复执行的定时器 var t = setInterval(function(){},时间间隔)
2. 停止定时器
   clearInterval(t);
3. 开启只执行一次的定时器 setTimeout(function(){},时间间隔);

DOM

• DOM 文档对象模型，学习DOM主要是学习如果对页面中的元素进行增删改查操作

查找页面中的元素

1. 通过id查找 var div = document.getElementById("id");
2. 通过标签名 var arr = document.getElementsByTagName("标签名");
3. 通过name查找 var arr = document.getElementsByName("name");
4. 通过class查找 var arr = document.getElementsByClassName("class");

创建元素

var d = document.createElement("div");
d.innerText = "哈哈哈";

添加元素

• 格式： 父元素.appendChild(d); document.body.appendChild(d);

插入元素

• 格式：父元素.insertBefore(新元素,弟弟元素);

删除元素

• 格式：父元素.removeChild(被删除的元素);

代码介绍

1. demo01 测试js代码添加样式
2. demo02 通过添加样式移动图片练习
3. demo03 假轮播图
4. demo04 高级点的轮播图
5. demo05 时间练习
6. demo06 执行一次的定时器 和通过name查找元素 通过class查找元素
7. demo07 增删插入 练习