js中的定時器和麵向物件
阿新 • • 發佈：2019-01-06
1. 定時器的使用
1. 定時器：用以指定在一段特定的時間後執行某段程式。 1.1.倒計定時器：timename=setTimeout("function();",delaytime); // 只執行一次 1.2.迴圈定時器：timename=setInterval("function();",delaytime); // 無線迴圈倒計時定時器是在指定時間到達後觸發事件，而迴圈定時器就是在間隔時間到來時反覆觸發事件，兩者的區別在於：前者只是作用一次，而後者則不停地作用。 1.3. clearInterval(物件)： 清除已設定的setInterval物件 2. （1.） offset這個單詞本身是--偏移，補償，位移的意思。 o f f s e t W i d t h和offsetHight （檢測盒子自身寬高+padding+border）這兩個屬性，他們繫結在了所有的節點元素上。獲取之後，只要呼叫這兩個屬性，我們就能夠獲取元素節點的寬和高。 offset寬/高 = 盒子自身的寬/高 + padding +border； offsetWidth = width+padding+border； offsetHeight = Height+padding+border；
2.(2) offsetLeft和offsetTop（檢測距離父盒子有定位的左/上面的距離）返回距離上級盒子（帶有定位）左邊s的位置如果父級都沒有定位則以body為準offsetLeft 從父親的padding 開始算,父親的border 不算。在父盒子有定位的情況下，offsetLeft ==style.left(去掉px)。
無縫滾動例項：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 3.什麼是DOM？
文件物件模型。賦予js操作節點的能力。當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document ObjectModel）。
3.1. 節點分為兩種：文字節點和元素節點
獲取子節點：childNodes nodeType 和 children
獲取子節點例子：
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById('ul');
var aLi=oUl.getElementsByTagName('li');// 通過id名獲取標籤
for(var i=0;aLi.length;i++){ // 設定迴圈
console.log(oUl.children.length); //檢驗ul裡面裡的標籤個數
}
}
</script>
</head>
<body>
<ul id="ul">
<li></li>
<li></li>
<li></li>
</ul>
</body> 3.2. 獲取父節點：parentNode
例：點選刪除，隱藏li
獲取子節點例子：
<script type="text/javascript">
window.onload = function() {
var oList = document.getElementById('list');
var aLi = oList.getElementsByTagName('li');
var aA = oList.getElementsByTagName('a');
// chlidren 父節點，子節點
//console.log(oList.children.lengtht);
//nodeType==3 -> 文字節點
//nodeType==1 -> 元素節點
for(var i = 0; i < aLi.length; i++) {
aA[i].onclick = function() {
this.parentNode.style.display = 'none'; //this.parentNode 指當前標籤裡面的父節點
}
}
}
</script>
</head>
<body>
<ul id="list">
<li>社會<a href="javascript:;">刪除</a></li>
</ul>
</body> 3.3.首尾子節點，有相容性問題
firstElementChild //一般拿來判斷相容的問題
firstChild // 首節點 只在IE下面相容
firstElementChild // 在非IE下面相容
lastChild 、 // 尾節點
lastElementChild
3.4.兄弟節點 ，有相容性問題
nextSibling、// 本身節點的下一個節點 只在IE下面相容
nextElementSibling
previousSibling、
reviousElementSibling // 本身節點的上一個節點
3.4. DOM方式操作元素屬性：
獲取：getAttribute(名稱)
設定：setAttribute(名稱, 值)
刪除：removeAttribute(名稱)
3.5. DOM的增刪改查：
例子：
<body>
<ul id="ul">
<li id="apple">1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script type="text/javascript">
var oUl=document.getElementById('ul');
var oAp=document.getElementById('apple');
var oXi=document.createElement('li');// 建立節點
oXi.innerHTML='4'; //插入內容
oUl.appendChild(oXi); //插入節點
var oYt=document.createElement('li'); // 建立節點
oYt.innerHTML='0'; //插入內容
oUl.insertBefore(oYt,oAp) //在第一個節點前面插入節點
</script>4.面向物件：
4. 1.什麼是面向物件：物件是一個整體，對外提供一些操作。
2. 什麼是面向物件：使用物件時，只關注物件提供的功能，不關注其內部細節比如JQuery 面向物件是一種通用思想，並非只有程式設計中能用，任何事情都可以用。
4.2、js中的面向物件
面向物件程式設計(OOP)的特點
抽象：抓住核心問題
封裝：不考慮內部實現，只考慮功能使用
繼承：從已有物件上，繼承出新的物件
多重繼承
多型
物件的組成：
方法——函式：過程、動態的
屬性——變數：狀態、靜態的
4.3、寫一個面向物件程式
為物件新增方法和屬性
this詳解，事件處理中this的本質
windowthis——函式屬於誰
不能在系統物件中隨意附加方法、屬性，否則會覆蓋已有方法、屬性 object物件
4.4.工廠方式：用建構函式建立一個類。
4.5.6、原型——prototype
什麼是原型：原型是class，修改他可以影響一類元素
在已有物件中加入自己的屬性、方法
原型修改對已有物件的影響為Array新增sum方法
給物件新增方法，類似於行間樣式
給原型新增方法，類似於class
原型的小缺陷
無法限制覆蓋