一、js基础
1.js引入方式
js是脚本语言，可以在浏览器中执行。js文件是以.js为结尾的，引入html文件中时使用script标签，这时script需要添加一个属性src，src中写js文件的路径；但是js还可以直接写在html当中，在html中需要使用<script></script>标签中写js代码
js是脚本语言，可以在浏览器中执行。js文件是以.js为结尾的，引入html文件中时使用script标签，这时script需要添加一个属性src，src中写js文件的路径；但是js还可以直接写在html当中，在html中需要使用<script></script>标签中写js代码
在html内部写js时，script标签可以放在head中，可以放在body中，还可以放在body后
2.js基本语法
js执行顺序，默认是顺序结构，是从上到下，从左到右执行
js一般一行放一条语句，语句后结束标识是 ";" ,但是结束标识不强制写
js中换行要求：没有换行要求，最标准的缩进是一个tab。
js中 if选择/for循环/函数function 后面的语句块都是由 {} 包裹的
js执行顺序，默认是顺序结构，是从上到下，从左到右执行
js一般一行放一条语句，语句后结束标识是 ";" ,但是结束标识不强制写
js中换行要求：没有换行要求，最标准的缩进是一个tab。
js中 if选择/for循环/函数function 后面的语句块都是由 {} 包裹的
3.变量和常量
定义变量：var 变量名
let 变量名
定义常量：const 常量名
变量名的命名规范：
1.组成：字母、数字、下划线、$
2.首字符不能是数字
3.不能使用关键字
4.建议使用驼峰命名法
定义变量：var 变量名
let 变量名
定义常量：const 常量名
变量名的命名规范：
1.组成：字母、数字、下划线、$
2.首字符不能是数字
3.不能使用关键字
4.建议使用驼峰命名法
使用变量或常量：
1.直接访问：变量名或常量名
2.重新赋值：常量不能被重新赋值。变量可以重新赋值，变量中只会保存最后一次赋值。
1.直接访问：变量名或常量名
2.重新赋值：常量不能被重新赋值。变量可以重新赋值，变量中只会保存最后一次赋值。
4.注释：
第一种：单行注释： // 注释内容
第二种：多行注释： /* 中间注释内容 */
第三种：多行文本注释： /** 注释内容 */
第一种：单行注释： // 注释内容
第二种：多行注释： /* 中间注释内容 */
第三种：多行文本注释： /** 注释内容 */
5.基本数据类型
1.数字类型(int float) : 1,2,3 3.14
2.字符串类型(string) : 单引号或双引号引起来的字符，单引号双引号作用一样，没区别
3.布尔类型(bealoon): true(1) 表示真 false(0) 表示假
4.undefined类型(undefined)： 变量或对象的属性没有赋值时，默认值就是undefined
5.null类型(null):表示空
6.对象类型：
数组(array): 类似python中的List，定义方式 [1,'a',true]，通过下标访问元素
对象(object):类似python中的dict ，定义{"username":"小明","age":18}，通过键名访问
正则表达式:同python
检查数据类型方法：typeof
注意：typeof 检测对象类型时，不管是数组还是对象，返回的都是Object
6.输出方式：
alert()：小括号中写变量或语句，窗口弹出
console.log():在控制台输出 F12->console
7.运算符：
1.算数运算： + - * / %
除法： 会运算到小数位 ，没有 // 求整
取余： 运算到该加小数点时的余数
2.关系运算： > >= < <= == === != !==
===和==区别:
==是不判断数据类型： 1 == '1' 返回值 true
===判断数据类型： 1 === '1' 返回值 false
3.逻辑运算： &&(逻辑与) ||(逻辑或) !(逻辑非)
没有and / or
逻辑与、逻辑或都会存在短路运算：
逻辑与 左边为false，右边不判断直接返回false，左边为true，返回值是右边
逻辑或 左边为true，右边不判断直接返回 true，左边为false，返回值是右边
4.赋值运算： = += -= *= /= %= ++(自增) --(自建)
++ 、 --：
用法1： 变量名++ ： 本次不改变，下次使用时改变
用法2： ++变量名 ： 先改变后使用，当次生效
++ 、 --：
用法1： 变量名++ ： 本次不改变，下次使用时改变
用法2： ++变量名 ： 先改变后使用，当次生效
8.parseInt() parseFloat()
parseInt() ： 取小括号中整数部分
parseFloat() : 取小括号中整数+小数部分
parseInt() ： 取小括号中整数部分
parseFloat() : 取小括号中整数+小数部分
2.流程控制语句
1.选择结构
if
单分支：if(表达式){}
双分支：if(表达式){语句} else{语句}
多分支：if(表达式1){} else if(表达式2){} else{}
1.选择结构
if
单分支：if(表达式){}
双分支：if(表达式){语句} else{语句}
多分支：if(表达式1){} else if(表达式2){} else{}
switch
switch(表达式){
case 值: 语句块 ;break;
case 值2: 语句块； break；
default:语句
}
2.循环结构
for
普通for循环：
for(表达式1;表达式2;表达式3){循环体}
表达式1：循环条件的初始值
表达式2：循环条件的终止值
表达式3：循环条件的步长
switch(表达式){
case 值: 语句块 ;break;
case 值2: 语句块； break；
default:语句
}
2.循环结构
for
普通for循环：
for(表达式1;表达式2;表达式3){循环体}
表达式1：循环条件的初始值
表达式2：循环条件的终止值
表达式3：循环条件的步长
for(let i=0; i<3 ; i+=1){
}
for-in循环：
for(let i in [1,2,3]){
for(let i in [1,2,3]){
}
while
表达式1
while(表达式2){
循环体;
表达式3
}
while
表达式1
while(表达式2){
循环体;
表达式3
}
3.数学方法：
Math.random() [0,1)
4.获取字符串或数组的长度：
通过.length 属性获取
'abcd'.length
[1,2,'a','b'].length
3.js选择器
选择器作用：找页面中的标签
选择器类型：id选择器
document.getElementById('id名')
返回值：1个具体的标签元素
class选择器
document.getElementsByClassName('class名');
返回值：所有具有指定class名称的元素，是多个，以类数组形式存在，使用某一个元素时通过下标来获取
标签选择器
document.getElmentsByTagName('标签名');
返回值：所有指定标签的集合
选择器作用：找页面中的标签
选择器类型：id选择器
document.getElementById('id名')
返回值：1个具体的标签元素
class选择器
document.getElementsByClassName('class名');
返回值：所有具有指定class名称的元素，是多个，以类数组形式存在，使用某一个元素时通过下标来获取
标签选择器
document.getElmentsByTagName('标签名');
返回值：所有指定标签的集合
4.操作基本dom
1.获取标签中值
第一类：获取双标签中的值(div,span,p)
.innerHTML 来获取
1.获取标签中值
第一类：获取双标签中的值(div,span,p)
.innerHTML 来获取
第二类：获取input标签中的值()
.value 来获取
特殊的一个标签：
textarea 文本域：是双标签，但是获取他的值时使用.value属性
设置值使用 .innerHTML
.value 来获取
特殊的一个标签：
textarea 文本域：是双标签，但是获取他的值时使用.value属性
设置值使用 .innerHTML
2.添加点击事件
事件：是一个具有某些功能的函数
点击事件：鼠标点击某个元素的时候触发的功能
添加点击事件方法：
1.找到元素
2.元素.onclick = function(){}
事件：是一个具有某些功能的函数
点击事件：鼠标点击某个元素的时候触发的功能
添加点击事件方法：
1.找到元素
2.元素.onclick = function(){}
3.设置值
第一类：设置双标签的值
元素.innerHTML = '新值'
第二类：设置input标签的值
元素.value = '新值'
4.获取属性和修改属性值
属性有：id , class , name , src ,href , style
1.获取属性
元素.getAttribute('属性名')
2.设置属性值
元素.setAttribute('属性名','值')
属性有：id , class , name , src ,href , style
1.获取属性
元素.getAttribute('属性名')
2.设置属性值
元素.setAttribute('属性名','值')
5.获取和修改css样式
1.获取css样式
第一类 行内样式： 元素.style.样式名称
第二类 内部、外部样式： window.getComputedStyle(元素)['样式名称']
2.设置css样式
元素.style.样式名 = 新值
元素.style.样式名 = 新值
注意：获取或设置 font-size 类型的样式时，需要变成驼峰命名法(fontSize)
体质指数（BMI）= 体重（kg）÷ 身高^2（m）
当BMI指数为18.5～23.9时属正常
js对象和函数
1.字符串对象
var str = 'abcd;edf;'
属性：
长度属性：length
方法：
indexOf('字符',start) : 检测指定字符在字符串中是否存在，如果存在返回下标，如果不存在返回-1(不是python中的反向找下标，这的意思就是没有找到)，第二个参数：指定从哪个下标开始向后查询
var str = 'abcd;edf;'
属性：
长度属性：length
方法：
indexOf('字符',start) : 检测指定字符在字符串中是否存在，如果存在返回下标，如果不存在返回-1(不是python中的反向找下标，这的意思就是没有找到)，第二个参数：指定从哪个下标开始向后查询
slice(start,end) 、substr(start,length) 、substring(start,end):字符串截取，返回新字符串，不改变原字符串
split('分割规则') : 字符串分割,分割后返回数组(列表)
replace(old,new) : 字符串替换
match('字符') : 字符串匹配,返回数组
trim() : 去除字符串左右空白
toLowerCase() : 把字符串转成小写
toUpperCase() : 把字符串转成大写
2.数组对象(列表)
属性：
长度属性：length
方法：
头部添加：unshift() 返回值是数组的新长度，改变原数组
尾部添加：push() 返回值是数组的新长度，改变原数组
头部删除：shift() 返回值是被删除的元素,改变原数组
尾部删除：pop() 返回值是被删除的元素,改变原数组
修改： splice(start,len,el,el...) 执行时分两步，第一步删除(会删除从指定位置开始的指定长度)，第二步添加功能(len后的el是添加的元素，每个元素之间用逗号隔开)
截取： slice(start,end) 返回新数组，不会改变原数组
把数组按某种规则转成字符串：join('规则')
检测指定字符在字符串中是否存在：indexOf()
2.数组对象(列表)
属性：
长度属性：length
方法：
头部添加：unshift() 返回值是数组的新长度，改变原数组
尾部添加：push() 返回值是数组的新长度，改变原数组
头部删除：shift() 返回值是被删除的元素,改变原数组
尾部删除：pop() 返回值是被删除的元素,改变原数组
修改： splice(start,len,el,el...) 执行时分两步，第一步删除(会删除从指定位置开始的指定长度)，第二步添加功能(len后的el是添加的元素，每个元素之间用逗号隔开)
截取： slice(start,end) 返回新数组，不会改变原数组
把数组按某种规则转成字符串：join('规则')
检测指定字符在字符串中是否存在：indexOf()
数组遍历：
1.普通for循环
for(var i=0; i<arr.length; i++){
i 对应下标
arr[i] 对应数组中的元素
}
2.for-in
for(var i in arr){
i 对应下标
arr[i] 对应元素
}
1.普通for循环
for(var i=0; i<arr.length; i++){
i 对应下标
arr[i] 对应数组中的元素
}
2.for-in
for(var i in arr){
i 对应下标
arr[i] 对应元素
}
3.对象(字典)
定义对象： var obj = {}
对象中的数据形式：
{
key:value,
key:value
}
对象中的key具有唯一性，如果给已经存在的key赋值，这时是更新功能;如果对象中没有这个key，这时对象中新添加一个key:value键值对
定义对象： var obj = {}
对象中的数据形式：
{
key:value,
key:value
}
对象中的key具有唯一性，如果给已经存在的key赋值，这时是更新功能;如果对象中没有这个key，这时对象中新添加一个key:value键值对
key一定要是不可变元素
value可以是任意数据类型
常用属性：
长度：Object.keys(对象).length
访问数据：
1.访问某一个：对象.key 或者 对象['key']
如果存在key，同时又对应的值，返回值
如果不存在key，返回undefined
2.遍历:for-in
长度：Object.keys(对象).length
访问数据：
1.访问某一个：对象.key 或者 对象['key']
如果存在key，同时又对应的值，返回值
如果不存在key，返回undefined
2.遍历:for-in
4.函数
定义函数：
1. function 函数名(形参列表){
功能体
return 可以有，也可以没有
}
2. var 变量名 = function(){
功能体
}
调用函数：
函数名(实参列表)
定义函数：
1. function 函数名(形参列表){
功能体
return 可以有，也可以没有
}
2. var 变量名 = function(){
功能体
}
调用函数：
函数名(实参列表)
和python中不一样的：
形参和实参个数要求：在python中少传参数报错，在js中少传参数没问题(没有参数的地方自动接收undefined)
形参和实参个数要求：在python中少传参数报错，在js中少传参数没问题(没有参数的地方自动接收undefined)
js中只有简单的传参，python中的高级传参方式都没有；
js中可以给形参默认值
js函数中有一个特殊的关键字，作用是获取函数调用时传入的所有实参 arguments
js中可以给形参默认值
js函数中有一个特殊的关键字，作用是获取函数调用时传入的所有实参 arguments
js定时器和DOM
1.Math数学方法
js中数学方法都被封装在Math对象中，使用时调用Math.方法名称即可
常用的方法：
Math.random() 随机数 [0,1) ,没参数
Math.floor() 向下取整 ，没有参数
Math.ceil() 向上取整 ，没有参数
Math.round() 四舍五入
Math.max() 最大值 ，可以接收多个参数，然后判断出最大值
Math.min() 最小值 ，可以接收多个参数，然后判断出最小值
Math.PI() π ，没参数
js中数学方法都被封装在Math对象中，使用时调用Math.方法名称即可
常用的方法：
Math.random() 随机数 [0,1) ,没参数
Math.floor() 向下取整 ，没有参数
Math.ceil() 向上取整 ，没有参数
Math.round() 四舍五入
Math.max() 最大值 ，可以接收多个参数，然后判断出最大值
Math.min() 最小值 ，可以接收多个参数，然后判断出最小值
Math.PI() π ，没参数
2.时间
js时间是由 Date() 构造函数生成的，使用时需要通过 new 关键字创建
new Date() 当前时间
可以通过它的方法取到里面的每一个独立项
获取年份：new Date().getFullYear()
获取月份：getMonth() 0~11
获取日期：getDate() 1~31
获取星期：getDay() 0~6
获取小时：getHours() 0~23
获取分钟：getMunites() 0~59
获取秒数：getSeconds() 0~59
时间戳：getTime() 毫秒数
js时间是由 Date() 构造函数生成的，使用时需要通过 new 关键字创建
new Date() 当前时间
可以通过它的方法取到里面的每一个独立项
获取年份：new Date().getFullYear()
获取月份：getMonth() 0~11
获取日期：getDate() 1~31
获取星期：getDay() 0~6
获取小时：getHours() 0~23
获取分钟：getMunites() 0~59
获取秒数：getSeconds() 0~59
时间戳：getTime() 毫秒数
世界时：toGMTString() /toUTCString()
转换本地时间：toLocalString()
3.定时器
定时器的时间是毫秒单位
1.间隔定时器
每隔一段时间就执行定时器的功能
var time1 = setInterval(funciton,time)
转换本地时间：toLocalString()
3.定时器
定时器的时间是毫秒单位
1.间隔定时器
每隔一段时间就执行定时器的功能
var time1 = setInterval(funciton,time)
关闭间隔定时器：
clearInterval(time1)
2.延时定时器
等待指定的时间，然后执行唯一一次功能
var time2 = setTimeout(function,time)
clearInterval(time1)
2.延时定时器
等待指定的时间，然后执行唯一一次功能
var time2 = setTimeout(function,time)
关闭延时定时器：
clearTimeout(time2)
4.DOM增删改查
DOM ： document object model ,主要操作的就是页面结构，DOM把页面当成一个结构树(tree)，结构树是由节点(标签)组成的
clearTimeout(time2)
4.DOM增删改查
DOM ： document object model ,主要操作的就是页面结构，DOM把页面当成一个结构树(tree)，结构树是由节点(标签)组成的
DOM树的根： document->document type + html
|
head + body
| |
title+meta+link+script div+div+div+div
操作DOM就是对DOM树中的节点(标签)进行操作
|
head + body
| |
title+meta+link+script div+div+div+div
操作DOM就是对DOM树中的节点(标签)进行操作
已经学过：操作单个DOM的 内容的获取和设置 ， 属性的获取和设置 ，样式的获取和设置
内容的获取和设置 ：
获取：
1.双标签(div) ： innerHTML
2.input : value
设置：
1.双标签 :innerHTML = 新值
2.input ：value = 新值
属性的获取和设置：
获取：
getAttribute('属性名称')
设置：
setAttribute('属性名称','新值');
样式的获取和设置：
获取：
行内：元素.style.属性名
内部、外部样式： window.getComputedStyle('元素')['属性名']
设置：
元素.style.属性名 =新值
内容的获取和设置 ：
获取：
1.双标签(div) ： innerHTML
2.input : value
设置：
1.双标签 :innerHTML = 新值
2.input ：value = 新值
属性的获取和设置：
获取：
getAttribute('属性名称')
设置：
setAttribute('属性名称','新值');
样式的获取和设置：
获取：
行内：元素.style.属性名
内部、外部样式： window.getComputedStyle('元素')['属性名']
设置：
元素.style.属性名 =新值
DOM节点的增删改查
增加：向DOM中添加新的标签
第一步：创建新标签
1.标签节点：document.createElement('标签名')
2.内容节点：document.createTextNode('内容')
第二步：添加到页面
1.添加到指定父级的最后： 父级.appendChild('新标签')
2.添加到指定父级的指定位置: 父级.insertBefore('新标签','要插入到这个标签前')
增加：向DOM中添加新的标签
第一步：创建新标签
1.标签节点：document.createElement('标签名')
2.内容节点：document.createTextNode('内容')
第二步：添加到页面
1.添加到指定父级的最后： 父级.appendChild('新标签')
2.添加到指定父级的指定位置: 父级.insertBefore('新标签','要插入到这个标签前')
新创建的标签是一个完整的DOM，所以可以给新创建的标签进行属性和样式、内容操作
新创建标签操作：
内容操作：双标签的.innerHTML
input.value
属性操作：标签.属性名=属性值
样式操作：标签.style.样式名称 = 值
新创建标签操作：
内容操作：双标签的.innerHTML
input.value
属性操作：标签.属性名=属性值
样式操作：标签.style.样式名称 = 值
增加的另外一种方案：
字符串方法：具体某个元素中要添加的内容，使用innerHTML形式，添加指定字符串。
字符串方法和创建标签法的区别：
1.创建标签法创建的是DOM元素 ;字符串方式创建的是普通字符串,不具备DOM操作功能
2.创建标签可以决定标签添加到那个位置，不删除原来的元素; 字符串方式把父级标签中所有元素删除，然后再添加字符串
字符串方法：具体某个元素中要添加的内容，使用innerHTML形式，添加指定字符串。
字符串方法和创建标签法的区别：
1.创建标签法创建的是DOM元素 ;字符串方式创建的是普通字符串,不具备DOM操作功能
2.创建标签可以决定标签添加到那个位置，不删除原来的元素; 字符串方式把父级标签中所有元素删除，然后再添加字符串
删除:
从DOM中删除某一个节点
元素.removeChild('要删除的节点')
从DOM中删除某一个节点
元素.removeChild('要删除的节点')
修改(替换):
把原来的节点换成新节点
元素.replaceChild('新节点','旧节点')
把原来的节点换成新节点
元素.replaceChild('新节点','旧节点')
查询：
前面学过id选择器、class选择器、标签选择器：他们的作用是查找到某一个或某一类标签元素
今天学习几个快速查询节点的方式：
查询第一个子节点：元素.firstChild
查询最后一个子节点：元素.lastChild
查询当前元素的下一个节点：元素.nextSibling
查询当前元素的上一个节点：元素.previousSibling
查询当前元素的父节点：元素.parentNode
查询所有子级节点：元素.children
查询当前元素是否有子节点：元素.hasChildNodes()
前面学过id选择器、class选择器、标签选择器：他们的作用是查找到某一个或某一类标签元素
今天学习几个快速查询节点的方式：
查询第一个子节点：元素.firstChild
查询最后一个子节点：元素.lastChild
查询当前元素的下一个节点：元素.nextSibling
查询当前元素的上一个节点：元素.previousSibling
查询当前元素的父节点：元素.parentNode
查询所有子级节点：元素.children
查询当前元素是否有子节点：元素.hasChildNodes()
js事件响应
1.事件类型
1.鼠标事件：
单击事件：click
双击事件：dblclick
鼠标经过事件： mouseover 会事件冒泡
鼠标离开事件： mouseout (会事件冒泡) / mouseleave (不会事件冒泡)
鼠标进入事件： mouseenter 不会事件冒泡
hover事件：有两个过程，鼠标进入时执行鼠标进入事件，鼠标离开时执行鼠标离开事件
鼠标移动事件： mousemove
鼠标按下事件： mousedown
鼠标抬起事件： mouseup
1.鼠标事件：
单击事件：click
双击事件：dblclick
鼠标经过事件： mouseover 会事件冒泡
鼠标离开事件： mouseout (会事件冒泡) / mouseleave (不会事件冒泡)
鼠标进入事件： mouseenter 不会事件冒泡
hover事件：有两个过程，鼠标进入时执行鼠标进入事件，鼠标离开时执行鼠标离开事件
鼠标移动事件： mousemove
鼠标按下事件： mousedown
鼠标抬起事件： mouseup
2.键盘事件：
键盘按下事件： keydown
键盘抬起事件： keyup
键盘长按事件： keypress
键盘按下事件： keydown
键盘抬起事件： keyup
键盘长按事件： keypress
可以获取按下的案件的keyCode值
回车键 13
空格键 32
回车键 13
空格键 32
3.表单事件
获取焦点事件： focus
元素.onfocus = function(){} 元素获取到焦点后执行的功能
元素.focus() 让元素获取焦点
失去焦点事件： blur
提交事件： submit
获取焦点事件： focus
元素.onfocus = function(){} 元素获取到焦点后执行的功能
元素.focus() 让元素获取焦点
失去焦点事件： blur
提交事件： submit
4.事件冒泡
事件冒泡：从当前触发元素开始，向上级触发具有相同事件类型的事件，直到document，的过程
事件冒泡：从当前触发元素开始，向上级触发具有相同事件类型的事件，直到document，的过程
2.绑定事件的方法
1.DOM0级
绑定事件：元素.on+事件类型 = function(){}
取消事件：元素.on+事件类型 = null
1.DOM0级
绑定事件：元素.on+事件类型 = function(){}
取消事件：元素.on+事件类型 = null
DOM0级给同一个元素绑定相同的事件，只会执行后面定义事件的功能函数
2.DOM2级
绑定事件： 元素.addEventListener('事件类型',fn)
取消事件： 元素.removeEventListener('事件类型',fn)
2.DOM2级
绑定事件： 元素.addEventListener('事件类型',fn)
取消事件： 元素.removeEventListener('事件类型',fn)
DOM2级绑定事件：同一个元素可以绑定多个相同的事件，多个事件的功能函数都会执行
取消绑定时需要指定取消的功能函数，要求函数是具名函数
3.事件对象
事件在被触发时，都会生成一个事件对象，这个事件对象中保存所有和当前事件有关的信息
event 事件对象
事件对象经常在事件触发函数中当形参传递到函数内部
取消绑定时需要指定取消的功能函数，要求函数是具名函数
3.事件对象
事件在被触发时，都会生成一个事件对象，这个事件对象中保存所有和当前事件有关的信息
event 事件对象
事件对象经常在事件触发函数中当形参传递到函数内部
比较常用的几个信息：
target:触发元素
type: 什么类型的触发
keyCode: 键盘事件下的按键keyCode值
x,y坐标信息：
offsetX , offsetY : 相对于当前容器左上角的x,y坐标
clientX , clientY : 相对于可视窗口左上角的x,y坐标
target:触发元素
type: 什么类型的触发
keyCode: 键盘事件下的按键keyCode值
x,y坐标信息：
offsetX , offsetY : 相对于当前容器左上角的x,y坐标
clientX , clientY : 相对于可视窗口左上角的x,y坐标
4.事件委托
事件委托是把事件定义在它父级或祖先级元素上，真正触发这个事件执行是我们原来想定义事件的元素。
事件委托是把事件定义在它父级或祖先级元素上，真正触发这个事件执行是我们原来想定义事件的元素。
使用事件委托的场景：页面中通过js新创建的元素，可以使用事件委托绑定事件
5.滚动事件 scroll
1）作用整个页面
当页面发生上下滚动时，浏览器会触发一个滚动事件,发生滚动事件时可以获取到滚动高度和距离左边的滚动距离
滚动高度： scrollTop
滚动距左边距离： scrollLeft
这两个属性是可以读取可以设置
window.onscroll = function(){
//获取页面滚动高度
document.documentElement.scrollTop
document.body.scrollTop
1）作用整个页面
当页面发生上下滚动时，浏览器会触发一个滚动事件,发生滚动事件时可以获取到滚动高度和距离左边的滚动距离
滚动高度： scrollTop
滚动距左边距离： scrollLeft
这两个属性是可以读取可以设置
window.onscroll = function(){
//获取页面滚动高度
document.documentElement.scrollTop
document.body.scrollTop
var sTop = document.documentElement.scrollTop || document.body.scrollTop
}
}
2）作用于某一个具体的元素
这个元素必须设置属性 overflow:scroll，才能出现滚动条
获取滚动距离:
元素.scrollTop
元素.scrollLeft
这个元素必须设置属性 overflow:scroll，才能出现滚动条
获取滚动距离:
元素.scrollTop
元素.scrollLeft