一、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
