一、昨日内容回顾
1.绝对定位的盒子居中
left：50%；
margin-left：负的盒子宽度的一半
2.固定位置
脱离标准文档流
作用:返回顶部，广告，滚动监听栏、固定导航栏（body{margin-top:100px或padding-top:100px;}）。
二、今日内容总结
1.javascript的介绍和作用
DOM:Document Object Model
BOM:Browe Object Modle
2. js三大部分
1）、ECMAScript基础语法
javascript语法标准。包括变量、表达式、运算符、函数、if语句、for语句等
（1） 初识js
<script type="text/javascript"> <script>
alert('xxx')
console.log('xxx')# 控制台输出
console.dir("xxx")
var a = prompt('xxx')
单行注释// 多行注释/* */
语法规则：JavaScript对换行、缩进、空格不敏感，语句末尾加分号，单行注释// 多行注释/* */
（2）直接量：数字99和字符串“99”
（3） 变量：定义 赋值 命名规范
a.变量的定义提升
b.x = a++ 和 x= ++a 的区别
（4） 变量的类型（typeof 变量）
number
string
undfined # 布尔值为false
null # 布尔值为false
NaN number # 布尔值为false
infinity 无限大 # 布尔值为true
连字符和加号
（5）变量的转换
parseInt（）
（1）带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。例如：
（2）自动带有截断小数的功能：取整，不四舍五入。
parseFloat()
parseString()
(2) 基础数据类型
# number
# string
# boolean
# null
# undefined
引用数据类型：
-
-
-
-
- Function
- Object
- Arrray
- String
- Date
-
-
-
（3）运算符
# 赋值运算符： = 、+=、-=、%=、*=、/=
# 算数运算符： +、-、*、/、%、++、--
# 比较运算符：==、===、！==、！===、>、<、>=、<=
特殊情况：字符串拼接和es6模板字符串（·hh·）
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> //方法一： var firstName = '小'; var lastName = '马哥'; var name = '伊拉克'; var am = '美军'; // 字符串拼接 var str = "2003年3月20日,"+name+"战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，"+am+"又一次取得的大规模压倒性军事胜利。" var fullStr = str; console.log(fullStr) var fullName = firstName +" "+ lastName; console.log(fullName) // 方法二： var str = `2003年3月20日 ${name}战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，${am}又一次取得的大规模压倒性军事胜利。` console.log(str) </script> </body> </html>
（4） 数据类型转换
# 数字转字符串
a. 隐式转换 1+‘2’ 输出‘12‘
b.强制转换 string() 、 tostring()
# 字符串转数字
parseInt()、parseFloat()
# 任何数据类型转成boolean（）
( 5 ) 流程控制
# if(){} else{}
# if() {} else if() {} else{}
# while(){}
# do{} while()
# for(var i=0,i<10,i++){}
# switch(变量) {
case ‘1’：
XXXX
break # 如果没有break 它就会一直执行，直至遇到下一个break 这个叫case穿透。
case ‘2’：
XXXX
break
。。。。
default:
console.log('很遗憾')
}
（6） 常用内置对象
# 数组Array
# 字符串String
# Date
# math对象
http://www.cnblogs.com/majj/p/9095590.html
（7） 函数
# 定义：
function 函数名（参数）{}
# 函数的调用：
函数名（）
# 函数的返回值
（8）为数组arguments
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> function add(a,b,c){ console.log(add.length) //形参个数 console.log(arguments.length) //实参个数 console.log(arguments) //实参 return a+b+c } add(1,2) var z = add(1,2,3) console.log(z) </script> </body> </html>
之所以说arguments是伪数组，是因为：arguments可以修改元素，但不能改变数组的长短。举例：
清空数组的三种方式：
var a1 = [1,2,3,4]
// a1.splice(0)
// a1 = []
a1.length=0
console.log(a1)
2）、DOM
操作网页上元素的API。比如盒子移动、变色、轮播图等
1.事件源、事件、事件驱动程序
2.获取文档元素节点、属性节点、文本节点
# 获取文档元素节点、增加、删除等
document //文档
document.documentElement //html
document.body//body
var oBtn = document.getElementById('')
var oBtn = document.getElementsByTagName('')
var oBtn = document.getElementsByClassName('')
# 获取文档属性节点
oBtn.src oBtn.classname
oBtn["src"]
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p> <div></div> </body> </html>
3）、BOM
操作浏览器部分功能的API。比如让浏览器自动滚动。
三、扩展和预习
1 transition:属性 过渡时间 过渡函数效果 延迟时间
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box1{
visibility: hidden;
200px;
height: 200px;
background-color: #333;
transition: all 2s ease-in 0.2s;
}
.box2{
position: absolute;
200px;
height: 200px;
background-color: red;
}
.box2:hover .box1{
visibility: visible;
300px;
}
</style>
</head>
<body>
<div class="box2"><div class="box1"></div></div>
</body>
</html>
2. transform # div旋转
<!DOCTYPE html> <html> <head> <style> .box1 { margin:30px; width:200px; height:100px; background-color:yellow; /* Rotate div */ transform:rotate(20deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(30deg); /* Safari 和 Chrome */ -o-transform:rotate(9deg); /* Opera */ } </style> </head> <body> <div class="box1">Hello World</div> <div style="height: 300px;background-color: red;"> </div> </body> </html>
3.animation # 移动效果关联
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p> <div></div> </body> </html>