js大纲（流程控制语句对象，函数，数组等）

一、运算符

1、逻辑运算符：！ 非运算 、 && 与运算(像爱情) 、 || 或运算(像亲情)
2、赋值运算符：= 、+=、-=、*=、/=
3、关系运算符: >、 >=、 < 、<=
非数值比较时先转换为数字再比较；
比较字符串中字符的Unicode编码。
4、相等运算符：== 、 ！= 、===
5、条件运算符也叫三元运算符：语法：条件表达式？语句1：语句

二、 流程控制语句的

• 流程控制语句
  JS中的程序是从上到下一行一行执行的
  通过流程控制语句可以控制程序来执行流程
  使程序可以根据一定的条件来执行
• 语句的分类：
  一、条件判断语句：if
  二、条件分支语句: switch
  三、循环语句: while , do…while , for

1、条件判断语句if ， if…else ， if…else if …else

使用条件判断语句可以在执行 某个语句之前进行判断，如果条件成立才会执行语句，条件不成立则语句不执行

1. if 语句 语法一：
if（条件表达式）{
	语句
}

2. if语句语法二：
if（条件表达式）{
 	语句...
}else{
	语句
}

3. if语句语法三：
if(条件表达式){
	语句...
}else if（条件表达式）{
	语句...
}else if（条件表达式）{
	语句...
}else{
	语句...
}

2、 条件分支语句(也叫switch语句):

• 语法：

switch（条件表达式）{
case 表达式：
语句...
break;
case 表达式：
语句...
break;
default:
语句...
break;
}

• 执行流程：switch…case…语句

在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较

如果比较结果为true,则从当前case处开始执行代码 .当前的case后的所有代码都会执行，可以在case后 边跟一 个break，这样可以保证只会执行当前case后的语句，而不会执行其他的case.
如果比较 结果为false，则继续向下比较.
如果所有的比较结果都为false，则只执行default后的语句.
switch语句和if语句的功能实际上有重复的，根据个人习惯使用.

• demo1

根据num的值，输出对应的中文

var num = 1;
num = "1";
num = "abc";
//不加break就会一直往下执行到叁
//使用break可以用来退出switch语句
switch(num){
case 1:
     console.log("壹");
break;
case 2:
    console.log("贰");
case 3:
    console.log("叁");
default:
    console.log("非法数字~~")
} 

• demo2

对于成绩大于60分的，输出’合格’。低于60分的，输出’不合格’
分析：
6x 表示六十几
7x 表示七十几，以此类推
6x / 10 = 6
7x / 10 = 7
100 /10 = 10
比如61 / 10 = 6 余1
比如62 / 10 = 6 余2

var score = 61;
//法一
//parseInt取整
switch(parseInt(score/10)){
    case 10:
    case 9:
    case 8:
    case 7:
    case 6:
      console.log("合格");
      break;
    default:
      console.log("不合格");
      break;
}

//法二:把case score >= 60和true做比较
switch(true){
    case score >= 60:
     console.log("合格");
      break;
    default:
      console.log("不合格");
      break;
}

3、循环语句while , do…while , for

• 循环语句：
  通过循环语句可以反复执行一段代码多次

• 死循环

像这种把条件写死的循环，叫做死循环
该循环不会停止，除非浏览器关闭，死循环在开发中慎用
千万不要打开控制台保存死循环，实在忘了，办法1：去文本打开它注释掉 办法2：点击web浏览器x同时按回车键（要快）

var n = 1;                 
//可以使用break，来终止循环
while(true){
       alert(n++);
       //判断n是否是3
       if(n == 3){
             //退出循环
     break;
       }                       
 }                                  

3-1.while循环

• 语法：

while(条件表达式){
语句...
}

• 执行流程：

while语句在执行时，先对条件表达式进行求值判断，
如果结果为true，则执行循环体，
循环体执行完毕后，继续对表达式进行判断
结果为true，则继续执行循环体，以此类推
如果值为false，则终止循环

• 向页面中输出连续的数字

var n = 1；
document.write(n++ +"<br />";)

• 创建一个循环，往往需要三个步骤

//1.创建一个初始化的变量
var i = 0;                 
//2.在循环中设置一个条件表达式
/*while(i < 5){
    alert(i);
    //3.定义一个更新表达式，每次更新初始化变量
    i++;
}*/                  
//2.在循环中设置一个条件表达式
while(i < 3){
    //3.定义一个更新表达式，每次更新初始化变量
    document.write(i++ + "<br/>")
}                                   

3-2.do…while循环

• 语法：

do{
语句...
}while（条件表达式）

• 执行流程：

do…while语句在执行时，会先执行循环体，
循环体执行完毕后，再对while后的条件表达式进行判断，
如果结果为 true，则继续执行循环体，执行完毕继续以此类推
如果结果为false，则终止循环

区别：

1. 实际上着两个语句功能类似，不同的是while是先判断后执行，
   而do…while会先执行后判断。

2. do…while能保证循环体至少保证执行一次，
   而while不能。

          do{
                    document.write(i++ + "<br/>");
              }while(i <= 10);
   

while练习

练习1：假如投资的年利率为5%，试求从1000块增长到5000块，需要花费多少年
1000 1000*1.05 第一年的钱数money = 1.05;
1050 10501.05 第二年的钱数money *= 1.05;

//定义一个变量，表示当前的钱数
var money = 1000;               
//定义一个计算器:其实就是定义一个变量，专门用来表示代码执行的次数。
//while里面count每循环一次（使它自增），count就增长一次
var count = 0;                  
//定义一个while循环来计算每年的钱数
while(money < 5000){
    money *= 1.05;
     //使count自增
     count++;
}                  
//console.log(money);//只是计算钱数
console.log("一共需要"+count+"年"); 

3-3.for语句

for语句，也是一个循环语句，也称为for循环
在for循环中，提供了专门的位置用来放三个表达式：
1.初始表达式2.条件表达式3.更新表达式

• for循环的语法 ：

for(①初始化表达式 ;②条件表达式； ④更新表达式){
③语句...
}

• for循环的执行流程：

①执行初始化表达式，初始化变量
②执行条件表达式，判断是否执行循环，
如果为true，则执行循环 ③语句
如果为false，则终止循环
④执行更新表达式，更新表达式完毕后继续执行②

• 一般写法：

 for( var i = 0 ; i < 10 ; i++ ) {
       alert( i );
   }

• 注意：

for循环中的三个部分都可以省略，也可以写在外部
如果在for循环中不写任何的表达式，只写两个；
此时循环是个死循环会一直执行下去，慎用

 //写法二:
   var i = 0;
        for( ; i<10 ; ) {
              alert( i++ );
        }
        //写法三：变成死循环
      for( ; ; ){
              alert("hello");
        }

三、对象

• 对象分类：
  1、内建对象（ES标准）
  2、宿主对象(BOM DOM)
  3、自定义对象(自己创建)

创建对象：

1.使用new关键字调用的函数，是构造函数constructor

//记住Object 的开头O是大写
var obj = new Object();
obj.name = "tom";
delete obj.name;//已经删了
obj["123"] = 789;//如果要使用特殊的属性名--对象["属性名"]

2.使用对象字面量创建对象：

var obj = {属性名：属性值，属性名：属性值…}

var obj2 = {
 name:"猪八戒",
   age:28,
   gender:"男",
   //test值对应了一个对象
   test:{name:"沙和尚"}
 };

JS对象的属性值，可以是任意的数据类型 ，甚至可以是一个对象
in 运算符 - 可以检查一个对象中是否含有指定的属性
语法： “属性名” in 对象

四、对象及其方法

1、Date对象

getDate()几日
getDay()

var day = d2.getDay();
console.log("day = "+day);//day = 6  表示周六

getMonth() 月份
getFullYear()年份
getTime()时间戳(格林威治标准时间的1970年 1月1日，0时0分0秒)

2、Math对象

Math.PI 表示圆周率
Math.ceil()向上取整，小数点只要有值就自动进1
Math.floor()向下取整，小数部分会被舍掉
Math.random()可以用来生成一个0-1之间的随机数
生成一个x-y之间的随机数:
Math.round(Math.random()*(y-x)+x)
max()最大值
min() 最小值
Math.pow(x,y)返回x的y次幂
Math.sqrt()用于对一个数进行开方运算

五、函数

1、创建函数

1-1.函数声明来创建

function 函数名([形参1，形参2…形参N]){语句}

function fun2(){
alert("按顺序出来");
}  //这是声明一个函数，结束不用加分号
fun();

1-2.函数表达式来创建

var 函数名 = function([形参1，形参2…形参N]){语句}

var fun3 = function(){
console.log("我是函数中封装的代码");
};
fun3();

2、函数的参数

多个形参之间使用逗号，隔开，声明形参就相当于在函数内部声明了对应的变量(var a;var b;)
但是并不赋值
如果实参的数量少于形参的数量，则没有对应实参的形参将会是undefined

3、函数的返回值

1.return后的值将会作为函数的执行结果返回，
可以定义一个变量来接收该结果
在函数中return后的语句都不会执行
如果return语句后不跟任何值就相当于一个undefined，
如果函数中不写return，则会返回一个undefined
2.返回值可以是任意的数据类型，也可以是个对象，也可以是一个函数

 return obj;
 return {name:"沙和尚"};

• 对比break，continue，return

  function fun(){
        alert("函数要执行了");
        for(var i=0; i<5;i++){
        if(i == 2){
        //使用break可以退出 当前的循环 
        //break;//函数要执行了   0 1   函数执行完了
        //使用continue用于跳过当次循环 
        //continue;//函数要执行了 0 1  3 4     函数执行完了
        //使用return可以结束整个函数
        return;//函数要执行了   0 1
                }
        console.log(i);
            }
        alert("函数执行完了");
     } 
   fun();

4、立即执行函数

想用一次这个函数然后不再用了
函数定义完，立即被调用.
调用函数方法 ：(函数对象());

(function(a,b){
console.log("a = "+a);
console.log("b = "+b);
})(123,456);

5、如果一个函数作为一个对象的属性保存

调用这个函数就说调用这个对象的方法,
但是它只是名称上的区别没有其他区别

var obj = {
name:"猪八戒",
age:18,
sayName:function(){
      console.log(obj.name);
  }
}
//调方法
obj.sayName();
//调函数
//fun();

6、枚举对象中的属性

• 语法：

for(var 变量 in 对象){ }      

7、变量的声明提前

函数声明创建的函数，（声明）会被提前创建

8、作用域

作用域指一个变量的作用的范围
在JS中一共有两种作用域：

• 1.全局作用域：
  直接编写在script 标签中的JS代码 ，都会在全局作用域
  在全局作用域中：
  创建的变量都会作为window对象的属性保存
  创造的函数都会作为window对象的方法保存(所谓函数就是window的方法)
  全局作用域的变量都是全局变量 ，
  在页面中的任意部分都可以访问到
• 2.函数作用域
  调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁
  每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
  在函数作用域中可以访问到全局作用域的变量,在全局作用域中无法访问到函数作用域的变量
  当在函数作用下操作一个变量时 ，它会先在自身作用域中寻找，如果有就直接用
  如果没有则向上一级作用域中寻找

• 注意点：
  1.在函数中，不使用var声明的变量都会成为全局变量 。
  2.在函数中声明变量：var声明或者定义形参
  3.函数有形参：定义形参就相当于在函数作用域中声明了变量。
  4.函数无形参：
  在函数中，没有形参，不使用var声明的变量都会成为全局变量。注意：如果不调用函数是用不了函数里的全局变量。

9、this

根据函数的调用方式的不同(和创建方式无关)，this会指向不同的对象
以函数的形式调用时,this永远都是window
以方法的形式调用时，this就是调用方法的那个对象
3.当以构造函数的形式调用时，this就是新创建的那个 对象

10、使用工厂方法创建对象

使用工厂方法创建对象，可以大批量的创建对象

function createPerson(name,age,gender){
      //创建一个新的对象(局部的obj)
        var obj = new Object();                   
        //向对象中添加属性
       obj.name = name;
        obj.age = age;
       obj.gender = gender;
        obj.sayName = function(){
              alert(this.name);
        };                      
        //将新的对象返回
        return obj;                   
  }
  
var obj2 = createPerson("孙悟空",18,"男");
var obj3 = createPerson("猪八戒",18,"男");
  //console.log(obj2);//"[object Object]"
 obj3.sayName();//弹出猪八戒

六、函数的方法call()和apply()

function fun(){
  alert("我是fun函数");
}
//重点：fun();是函数的返回值，fun是函数对象
//call()和apply()这两个方法都是函数对象的方法，需要通过函数对象来调用
//调用时三个效果一样
fun.call();
fun.apply();
fun();
call()和apply()

这两个方法都是函数对象的方法，需要通过函数对象来调用
当对函数调用call()和apply()都会调用函数执行
在调用call()和apply()可以将一个对象指定为第一个参数
此时这个对象会成为函数执行时的this
call()方法可以将实参在对象之后依次传递
apply()方法需要将实参封装到一个数组中统一传递
使用call()和apply()调用时，this是指定的那个对象

function fun(){
    alert(this.name);
}
var obj = {name:"obj"};
var obj2 = {name:"obj2"};
//调用函数里的第一个参数是谁，函数里的this就是谁（如下）
fun.call(obj);//弹出obj
fun.apply(obj2);//弹出obj2  
//fun();弹出空
function fun(a,b){
      console.log("a = "+a);
      console.log("b = "+b);
    }
var obj = {
      name:"obj",
      sayName:function(){
            alert(this.name);
         }
      };
var obj2 = {
      name:"obj2"
      };
// fun.call(obj);//a =undefined  b =undefined
//call()方法可以将实参在对象之后依次传递
fun.call(obj,2,3);//a=2  b= 3
//apply()方法需要将实参封装到一个数组中统一传递
fun.apply(obj2,[4,5]);//a=4 ,b=5

参数 arguments

在调用函数时，浏览器都会传递进两个隐含的参数，
1.函数的上下文对象this
2.封装实参的对象 arguments
arguments是一个类数组对象
在调用函数时，我们所传递的实参都会在arguments中保存
arguments.length可以用来获取实参的长度
我们即使不定义形参，也可以通过arguments来使用实参，
只不过比较麻烦
arguments[0] 表示第一个实参
arguments[1] 表示第二个实参
它里边有个属性叫做callee，
这个属性对应一个函数对象，就是当前正在指向的函数的对象

 function fun(){
   console.log(arguments);//[object Arguments]
   }
 fun();
//我们即使不定义形参，也可以通过arguments来使用实参
function fun(a,b){
//console.log(arguments.length);//2
//在调用函数时，我们所传递的实参都会在arguments中保存,所以下面能通过索引看出实参的值
console.log(arguments[0]);//hello
//callee这个属性对应一个函数对象，就是当前正在指向的函数的对象
console.log(arguments.callee);
console.log(arguments.callee == fun);//true
}
 fun("hello",true);

七、数组Array

不同的是普通对象是使用字符串 作为属性名的，
而数组(对象)是使用数字作为索引操作元素

获取到数组的长度（元素的个数）： arr.length
修改length： arr.length = 10;

• 向数组的最后一个位置添加元素： arr[arr.length] = 20;
  使用字面量来创建数组 语法:[ ]
  var arr = [];
  数组中的元素也可以是一个函数
  arr = [function(){alert(1);},function(){alert(2);}];
  //调用
  arr0;//弹出1

数组的方法

push()末尾添加
pop() 删除最后一位
unshift() 开头添加
shift()删除第一个
slice(开始索引，结束索引(可负值从后）) 从数组中提取指定元素
splice(开始索引，删除数量)用于删除数组中的指定元素
concat()连接
join(一个字符串作为参数连接) 方法将数组转换为一个字符串(如果不指定连接符，则默认使用逗号作为连接符,如果逗号也不想要，就使用空串)
以下方法会影响原数组:
reverse() 方法用来反转数组
sort()方法对数组进行排序，自己来指定排序的规则，可以在sort()添加一个回调函数

数组的遍历

(百度:所谓遍历(Traversal)，是指沿着某条搜索路线，依次对树（或图）中每个节点均做一次访问)
所谓的遍历，就是将数组中所有的元素都取出来
遍历数组for循环
遍历数组forEach()方法(不支持IE8）
forEach()方法需要一个函数作为参数
像这种函数，由我们创建但是不由我们调用的(浏览器自己调的)，我们称为回调函数
浏览器会在回调函数中传递三个参数:
第一个参数，就是当前正在遍历的元素
第二个参数，就是当前正在遍历的元素的索引
第三个参数，就是正在遍历的数组

//创建一个数组
 var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];          
  /*arr.forEach(function(){
        console.log("hello");//现在有5个元素，执行5次hello
  });*/
  arr.forEach( function(value, index, obj ){
        console.log("value = " +value);
        console.log("index = " +index);
        console.log("obj = " +obj);
 });

八、字符串的相关方法

在底层字符串是以字符数组的形式保存的
[“H”,“e”,“l”]
从字符串中：
length属性 可以用来获取字符串的长度
charAt()根据索引获取指定的字符
charCodeAt 获取指定位置字符的字符编码
String.formCharCode( ) 可以根据字符编码去获取字符
concat()连接
indexof()该方法可以检索一个字符串中是否含有指定内容
lastIndexOf()是从后往前找
slice(开始位置,结束位置(可负值从后）) (切下)截取指定的内容
substring(开始位置,结束位置)
substr(索引,长度)截取字符串
split(根据什么拆，就指定什么)(拆分)将一个字符串拆分为一个数组
toUpperCase( )转换为大写
toLowerCase( )转换为小写

九、正则表达式

正则表达式用于定义一些字符串的规则，
获取字符串中符合规则的内容提取出来

1、创建正则表达式的对象

-语法：var 变量 = new RegExp(“正则表达式”,“匹配模式”)

var reg = new RegExp("a");
console.log(reg);//  /a/   

这个正则表达式可以来检查一个字符串中是否含有a
i 忽略大小写
g 全局匹配模式

正则表达式的方法：test( )检查一个字符串是否符合正则表达式的规则

var result = reg.test(str);
console.log(result);//true
console.log(reg.test("babc"));//true

2、使用字面量来创建正则表达式

• 语法： var 变量 = /正则表达式/匹配模式

var reg = new RegExp("a" ,"i");
reg = /a/i;
console.log(reg.test("abc"));//true

正则语法

[ ]里的内容也是或的关系

[ab] == a | b

[a-z]任意小写字母

[A-Z]任意大写字母

[A-z]任意大小写字母
reg = /[A-Z]/;

字符串和正则相关的方法:

split(一个正则表达式作为参数)可以将一个字符串拆分为一个数组,全都拆分
search(一个正则表达式作为参数)搜索字符串中是否含有指定内容,只会查找第一个
match()从一个字符串中将符合条件的内容提取出来

 var str = "1a2b3c4d5e6f7A8B9C";
result = str.match(/[A-z]/g);//a,b,c,d,e,f
replace(被替,新的)将字符串中指定内容替换为新的内容, 默认只会替换第一个

量词

通过量词可以设置一个内容出现的次数
量词只对它前边的一个内容起作用

{n} 正好出现n次
{m,n}出现m-n次
{m,}m次以上
+ 至少一个，相当于{1,}
* 0个或多个，相当于{0,}
? 0个或1个，相当于{0,1}
^表示开头
$表示结尾
转义字符
检查一个字符串中是否含有.
. 表示任意字符
在正则表达式中使用\作为转义字符
. 来表示 .
\ 来表示
注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，
如果要使用\则需要使用 \ \ 代替
\w - 任意字母、数字、_    相当于[A-z0-9_]

\W-除了字母、数字、_    相当于[^A-z0-9_]

\d- 任意的数字[0-9]

\D- 除了数字[^0-9]

\s- 空格(只要有一个空格)

\S- 除了空格(除了纯空格)

\b- 单词边界

\B- 除了单词边界

十、DOM

Document Object Model文档对象模型，通过DOM可以来任意来修改网页中各个内容

• 文档

文档指的是网页，一个网页就是一个文档

-对象

对象指将网页中的每一个节点都转换为对象
转换完对象以后，就可以以一种纯面向对象的形式来操作网页了

• 模型

模型用来表示节点和节点之间的关系，方便操作页面

• 节点（Node）

节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
虽然都是节点，但是节点的类型却是不同的

• 常用的节点

文档节点 （Document），代表整个网页
元素节点（Element），代表网页中的标签
属性节点（Attribute），代表标签中的属性
文本节点（Text），代表网页中的文本内容

-文档的加载：

将js代码编写到window.onload = function(){}中
window.onload 对应的回调函数会在整个页面加载完毕以后才执行，所以可以确保代码执行时，DOM对象已经加载完毕了

• 文档节点对象

浏览器已经为我们提供了文档节点对象，这个对象是window属性
可以在页面中直接使用，文档节点代表的是整个网页

<button id="btn">我是一个按钮</button> 
<script type="text/javascript">
	console.log(document);//[object HTMLDocument]
	//获取到button对象
	var btn = document.getElementById("btn");
	console.log(btn.innerHTML);//我是一个按钮
	 //理解：找到对象，搞对象(给对象加属性？)
	 //修改按钮的文字
	 btn.innerHTML = "I'm Button";
 </script>

• 事件

事件，就是用户与浏览器之间的交互行为， 比如：点击按钮，鼠标移动，关闭窗口。。
推荐使用方法：
可以为按钮btn的对应事件绑定处理函数的形式来响应事件
这样当事件被触发时，其对应的函数将会被调用

  <body>
     <script type="text/javascript">         
     //获取按钮对象
        var btn = document.getElementById("btn");                     
       //绑定一个单击onclick事件
        //像这种为单击事件 绑定的函数，我们称为单击响应函数
        btn.onclick = function(){
              alert("你还点~");
        }
       </script>
   </body>

dom查询

在网页中浏览器已经为我们提供了document对象，
它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。

元素的属性：

读取元素的属性：
语法：元素.属性名
例子：ele.name
ele.id
ele.value
ele.className

修改元素的属性：

语法：元素.属性名 = 属性值
innerHTML 使用该属性可以获取或设置元素内部的HTML代码

document查询方法：

1.DOM查询

DOM查询:通过具体的元素节点来查询

元素.getElementsByTagName() 通过标签名查询当前元素的指定后代元素

元素.childNodes 获取当前元素的所有子节点，会获取到空白的文本子节点

元素.children，获取当前元素的所有子元素

元素.firstChild，获取当前元素的第一个子节点

元素.lastChild,获取当前元素的最后一个子节点

元素.parentNode 获取当前元素的父元素

元素.previousSibling获取当前元素的前一个兄弟节点

元素.nextSibling获取当前元素的后一个兄弟节点

innerHTML和innerText
这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性
两个属性作用类似，都可以获取到标签内部的内容，
不同是innerHTML会获取到html标签，而innerText会自动去除标签
如果使用这两个属性来设置标签内部的内容时，没有任何区别的
读取标签内部的文本内容

元素.firstChild.nodeValue
document对象的其他的属性和方法
document.all
获取页面中的所有元素，相当于document.getElementsByTagName(“*”);
document.documentElement

获取页面中html根元素
document.body

获取页面中的body元素
document.getElementsByClassName()

根据元素的class属性值查询一组元素节点对象
这个方法不支持IE8及以下的浏览器
document.querySelector()

根据CSS选择器去页面中查询一个元素
如果匹配到的元素有多个，则它会返回查询到的第一个元素
document.querySelectorAll()
根据CSS选择器去页面中查询一组元素
会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个

2.DOM修改

• document.createElement()

可以根据标签名创建一个元素节点对象
document.createTextNode()

可以根据文本内容创建一个文本节点对象
父节点.appendChild(子节点)

向父节点中添加指定的子节点
父节点.insertBefore(新节点,旧节点)

将一个新的节点插入到旧节点的前边
父节点.replaceChild(新节点,旧节点)

使用一个新的节点去替换旧节点
父节点.removeChild(子节点)

• 删除指定的子节点

推荐方式：子节点.parentNode.removeChild(子节点)
事件(绑定、拖拽、冒泡)
定时器
clientWidth clientHeight 这两个属性可以获取元素的可见宽度和高度 - 这些属性 都是不带px的，返回都是一个数字，

• 定位

offsetParent- 可以用来获取当前元素的定位父元素
offsetLeft - 当前元素相对于其定位父元素的水平偏移量
offsetTop - 当前元素相对于其定位父元素的垂直偏移量
scrollWidth
scrollHeight
onmousemove 可以获取元素整个滚动区域的宽度和高度

事件对象

该事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，
在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 ，键盘哪个按键被按下，鼠标滚轮滚动的方向
clientX 和 clientY
用于获取鼠标在当前的可见窗口的坐标
div的偏移量，现在是相对于整个页面的
pageX和pageY可以获取鼠标相对于当前页面的坐标,但是这两个属性不支持IE8浏览器
target - event中的target表示的触发事件的对象
(译为：增加事件监听器)
addEventListener() - 通过这个方法也可以为元素绑定响应函数
btn01.addEventListener(“click”,function(){
alert(1);
},false);
attachEvent()- 在 IE8中可以使用attachEvent()来绑定事件

• 参数：

1.事件的字符串，要on
2.回调函数
btn01.attachEvent(“onclick”,function(){
alert(1);
});
判断IE浏览器的信息：ActiveXObject
setInterval(); - 定时调用
clearInterval() -可以用来关闭一个定时器
onkeydown既控制方向又控制速度，会有卡顿效果，现在仅用它控制方向，用其它来控制速度
延时调用，setTimeout
开启自动切换 autoChange();