一、BOM
1、基础知识
浏览器中的顶级对象：window ；
页面中的的顶级对象：document ；
页面中的对象都是 浏览器的，页面的内容也都是 window 的 ；
2、系统对话框
alter () 确定对话框；
prompt （） 输入对话框 ；
confirm（） 确定取消对话框；
工作中的对话框 都是自己制作的。
3、onload 事件
如下方式书写，可以将 js 逻辑写在 head 标签内
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
onload = function () {
document.getElementById("btn").onclick = function () {
alert("上层调用")
}
}
</script>
</head>
4、onunload 事件---页面关闭之后的事件
<script>
onunload = function () {
document.getElementById("btn").onclick = function () {
alert("上层调用")
}
}
</script>
5、onbeforeunload 事件 ---页面打开前事件
<script>
onbeforeunload = function () {
// document.getElementById("btn").onclick = function () {
alert("上层调用")
// }
}
</script>
6、location 对象
location . href= "链接地址" ； //属性 可以加载 引号内的链接
location . assign("链接地址") ; //方法 可以加载引号内的链接
以上两个的实现效果一样
location . reload () ; //刷新界面
location . replace("链接地址"); //对当前界面进行替换，没有返回键
7、history 对象
window . history . back(); //后退
window . history.forward(); //前进
window . history .go() ; //go（）函数内的参数为 负值 是后退，为 正值 则是前进；
8、navigator
window . navigator . platform ; // 获取浏览器所在的系统平台类型 ；
9、定时器
创建定时器
<script>
setInterval(function () {
alert("计算器")
}, 2000);
</script>
每隔两秒 弹出一次弹窗。
停止定时器
<script>
var timeId = setInterval(function () {
alert("计算器")
}, 2000);
//点击按钮关闭定时器
document.getElementById("btn").onclick = function () {
window.clearInterval(timeId);
}
</script>
10、一次性的定时器
<script>
//开启一个定时器
var timeId = setTimeout(function () {
alert("弹窗测试")
}, 2000);
//关闭定时器
getView$("btn").onclick = function () {
clearTimeout(timeId);
}
</script>
虽然是一次性 ，但是需要进行清理 ，否则会占用内存。
案例
定时器效果
<body>
<label for="text">
</label>
<textarea name="textarea" id="text" cols="30" rows="10">
你注册呀
</textarea>
<input type="button" id="btn" value="请阅读协议(5)" disabled="disabled">
<script src="JsDemoOne.js"></script>
<script>
var time = 5;
var btn = getView$("btn");
var timeId = setInterval(function () {
time--;
btn.value = "请阅读协议(" + time + ")";
if (time === 0) {
btn.value = "同意";
f1();
}
}, 1000);
function f1() {
clearInterval(timeId);
btn.disabled = false;
}
btn.onclick = function () {
alert("您已经同意协议，请接受霸王条款")
};
</script>
11、div 渐变
<body>
<div id="dv"></div>
<input type="button" id="btn" value="开始">
<script src="JsDemoOne.js"></script>
<script>
var op = 10;
getView$("btn").onclick = function () {
var timeId = setInterval(function () {
op--;
getView$("dv").style.opacity = op / 10;
if (op === 0) {
clearInterval(timeId);
}
console.log(op);
}, 1000);
}
</script>
</body>
二、练习--轮播图
轮播图效果
轮播图源码
三、offset 系列
1、获取元素即控件的尺寸
获取结果为 number 类型；
获取宽：offsetWidth
获取高：offsetHeight
获取距离上浏览器边界距离：offsetTop
获取距离左浏览器边界距离：offsetLeft
2、注意
1）、当控件在文档流内时：自己的位置是，自己相当于 浏览器的绝对位置的距离 即：父级控件位置+父级控件margin+父级控件padding+自己margin；
2）、控件脱离文档流时：自己位置是 自己相对于父级控件的位置 即：自己的位置（left、top什么的）+自己的 margin；
3、获取系统指定标签
1）、获取 body
document.body;
2)、获取 title
document.title;
3)、获取 html
document.documElement;
四、scroll 系列
scrollWidth：元素中内容的实际宽（没有边框），如果没有内容就是元素的宽；
scrollHeight：元素中内容的实际高(没有边框)，如果没有内容就是元素的高；
scrollTop：元素向上卷曲的距离；
scrollLeft：元素向左卷曲的距离；
封装浏览器页面向上滑动距离和向左滑动距离函数
/**
* 获取浏览器页面滑动距离
* @returns {{top: number, left: number}} top为向上滑动距离，left为向左滑动距离
*/
function getScroll() {
return {
top: window.pageYOffset || document.documentElement.offsetTop
|| document.body.offsetTop || 0,
left: window.pageXOffset || document.documentElement.offsetLeft
|| document.body.offsetLeft || 0
};
}
五、获取任意元素任意样式属性的值
/**
*获取任意属性的值
* @param element 元素对象
* @param attr 属性
* @returns {any} 所需值
*/
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] :
element.currentStyle[attr];
}
六、 改变任意元素的任意属性
/**
*改变任意元素的任意属性动画
* @param element 元素对象
* @param json json类型的属性 例如 {"width": 900, "height": 400}
*/
function animation(element, json) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var flag = true;
for (var attr in json) {
var current = parseInt(getStyle(element, attr));
var target = json[attr];
//变换数值
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style[attr] = current + "px";
if (current !== target) {
flag = false;
}
}
//到达指定数值
if (flag) {
clearInterval(element.timeId);
}
console.log("目标：" + target + "，当前：" + current + "，变化的数据：" + step);
}, 20)
}
/**
*获取任意属性的值
* @param element 元素对象
* @param attr 属性
* @returns {any} 所需值
*/
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] :
element.currentStyle[attr];
}
七、改变任意元素任意属性 ，并添加回调函数，实现持续动画
/**
*改变任意元素的任意属性动画
* @param element 元素对象
* @param json json类型的属性 例如 {"width": 900, "height": 400}
*/
function animation(element, json, fn) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var flag = true;
for (var attr in json) {
var current = parseInt(getStyle(element, attr));
var target = json[attr];
//变换数值
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style[attr] = current + "px";
if (current !== target) {
flag = false;
}
}
//到达指定数值
if (flag) {
clearInterval(element.timeId);
if (fn) {
fn();
}
}
console.log("目标：" + target + "，当前：" + current + "，变化的数据：" + step);
}, 20)
}
/**
*获取任意属性的值
* @param element 元素对象
* @param attr 属性
* @returns {any} 所需值
*/
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] :
element.currentStyle[attr];
}
//展示效果
getId$("btn").onclick = function () {
var json1 = {"width": 900, "height": 400};
animation(getId$("dv"), json1, function () {
var json2 = {"width": 90, "height": 40};
animation(getId$("dv"), json2, function () {
animation(getId$("dv"), json1, function () {
animation(getId$("dv"), json2, function () {
})
})
})
})
};
实现效果
实现效果
八、client 系列 表示 可视区域
clientWidth：可视区域宽度 没有边框 边框内部的区域；
clientHeight：可视区域高度 没有边框 边框内部区域；
clientLeft：左边边框的宽度
九、小知识点
1、获取浏览器可是界面任意坐标点
/**
* 获取浏览器任意界面的 点坐标
*
* ev = window.event || ev; 用于适配ie 8
*
* @param ev 针对于google浏览器和 火狐浏览器的参数
*
*/
document.onmouseover = function (ev) {
ev = window.event || ev;
getId$("ts").style.left = ev.clientX + "px";
getId$("ts").style.top = ev.clientY + "px";
console.log(ev)
}
2、任何浏览器获取 鼠标位置
/**
* 获取任意浏览器的 鼠标任意位置坐标
* @type {{getEvent: (function(*): Event | *), getPageY: (function(*=): any), getScrollTop: (function(): number), getPageX: (function(*=): any), getEventY: (function(*=): number), getScrollLeft: (function(): number), getEventX: (function(*=): number)}}
*/
var evt = {
getEvent: function (e) {
return window.event || e;
},
//可视区域 横坐标 位置
getEventX: function (e) {
return this.getEvent(e).clientX;
},
//可视区域 纵坐标 位置
getEventY: function (e) {
return this.getEvent(e).clientY;
},
//页面向左卷曲的横坐标
getScrollLeft: function () {
return window.pageXOffset || document.body.scrollLeft
|| document.documentElement.offsetLeft || 0;
},
//页面向上卷曲的纵坐标
getScrollTop: function () {
return window.pageYOffset || document.body.scrollTop
|| document.documentElement.offsetTop || 0;
},
//相对于页面的横坐标
getPageX: function (e) {
return this.getEvent(e).pageX ? this.getEvent(e).pageX :
this.getEventX(e) + this.getScrollLeft();
},
//相对于界面的纵坐标
getPageY: function (e) {
return this.getEvent(e).pageY ? this.getEvent(e).pageY :
this.getEventY(e) + this.getScrollTop();
}
};
//使用样例
getId$("div").onmouseover=function(ev){
getId$("div").style.left = evt.getPageX(ev);
}
3、阻止浏览器默认事件
ie 8 使用 return false；进行阻止，
谷歌和火狐使用 e.preventDefault(); 进行阻止。
4、阻止事件冒泡
ie8 使用 window.event.cancleBubble=true；
谷歌和火狐使用 e.stopPropagation();
5、元素隐藏的方式
（1）、元素.style.display="none";隐藏不占位
（2）、元素.style.visibility="hidden";隐藏占位
（3）、元素.style.opacity=0;隐藏占位
（4）、元素.style.height="0px";
元素.style.border="0px solid color"； 隐藏占位
欢迎关注.jpg
