目录
一、缓动动画
匀速改变元素的样式，就是匀速动画。非匀速的改变元素css样式的动画效果就是缓动动画
设定值=当前+（目标值-当前）*百分比
例如：目标是让div的高度为800 div.atyle.height=当前h+（800-当前h）*0.5【（800-当前h）*0.5就代表每次加剩余的百分之50】
二、让窗口滚动到指定位置
1.滚到指定坐标,
前提是页面够长 要能滚
window.scrollTo(0,600) window.scroll(0,600) scrollBy(0,50);
前两个方法功能类似，用法都是将x,y坐标传入，实现滚动到指定位置。一般x=0
而scrollBy()会在之前的数据基础上做累加。
2.滚动到指定元素可见
调用元素的底部会尽量与视口的顶部齐平,也不一定 主要是能不能滚 能滚多远
el.scrollIntoView(true) 默认为true，将元素和视口的上边缘对齐;body的顶部
如果传递参数false，则将元素的下边缘和视口的下边缘对齐；body的底部
三、页面滚动的距离
window.pageXOffset / window.pageYOffset //bom操作，IE8及IE8以下不兼容 document.body.scro ll Left/scrollTop
document.documentElement.scrollLeft / scrollTop
兼容做法:
let sY=window.pageYOffset||document.body.scrollTop || document.documentElement.scrollTop
let sX=window.pageYOffset||document.body.scrollLeft || document.documentElement.scrollLeft
四、窗口的可视区域尺寸
查看视口的尺寸(会受窗口缩放影响)
window.innerWidth / window.innerHeight // bom操作，IE8及IE8以下不兼容
document.documentElement.clientWidth / clientHeight //标准模式下(<!DOCTYPE html>，渲染模式)，任意浏览器都兼容
document.body.clientWidth / clientHeight //适用于怪异/混杂模式下的浏览器
document.compatMode //可区分标准模式与否。 (BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启)
判断是否是IE浏览器：console.log(window.navigator.appVersion.toLocaleLowerCase().indexOf("msie")
兼容做法:
let cWidth,cHeight;
if (document.compatMode == "BackCompat") {
cWidth = window.innerWidth||document.body.clientWidth;
cHeight =window.innerHeight||document.body.clientHeight;
} else {
//document.compatMode == "CSS1Compat"
cWidth = window.innerWidth||document.documentElement.clientWidth;
cHeight = window.innerHeight||document.documentElement.clientHeight;
}五、元素的几何尺寸
元素隐藏状态下获取不到相关信息
1.获取元素的几何尺寸
el.getBoundingClientRect(); 该方法返回一个对象，
对象里边有 left,top,right,bottom,height,width属性。
el.getBoundingClientRect().top="20px"是错误的，因为对象里面没有单位。所以这个只能获取，不能设置。要设置用styleleft和 top代表该元素左上角的 X和 Y坐标，right和 bottom代表元素右下角的 X和 Y坐标 返回的对象里边还有属性x,y，表示的是元素左顶点相对于页面body左顶点的距离 height和 width属性老版本 IE并未实现
2.获取视觉高宽
可完全替代getBoundingClientRect()方法 el.offsetWidth (width+paddingLeft+paddingRight+boderLeft+boderRight) el.offsetHeight
六、表单操作
1.获取表单和表单元素
//返回页面中所有表单元素；
document.forms
//表单和表单元素也可以用标准的节点获取方式来获取；
//获取id是myform表单下所有的复选按钮
document.querySelector('#myform input[type="checkbox"]');
//获取id是myform表单下所有的name是newsid的复选按钮
document.querySelector('#myform input[type="checkbox"][name="newsid"]');
2.表单和表单类元素的属性和方法
//表单提交 表单.submit() //表单重置； 表单.reset()： //可读可写,表单元素类型； 元素.type //只读，包含该元素的form表单对象，不存在返回null； 元素.form //可读可写，元素的名称； 元素.name //可读可写，简单理解就是输入框的值； 元素.value //ps:post提交数据时查看浏览器控制台数据,在network中header中的formdata中查看
3.开关按钮的选中
el.checked=false/true 单选按钮和复选框定义了checked属性，可读可写； 选中时为true，你也可以用js把他设置为true表示选中；
4.表单和元素的事件处理程序
表单.onsubmit：监听表单提交事件，表单提交到服务器前，先执行该事件； //该事件由 input_submit/button_submit按钮触发,多用于数据提交前的验证 //如果事件处理程序返回false，则表单提交取消，数据不会提交到服务器处理； //需要注意，表单.submit()方法不会触发onsubmit事件； 表单.onreset：监听表单重置事件，处理过程和onsubmit大致相似； // 表单.reset ()方法可以触发onreset事件，多用于获取用户确认confirm
七、媒体和图形编程
去百度 音频视频操作 //H5给提供了两个标签 还提供了一些js的API 来操作视频和音频 canvas图形绘制 //金融 医疗 教育 游戏等等 svg矢量图编程
524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
