前端DOM和js常用API
The Great Gatsby
*********************** 數據類型***************************
X代表可以放入任何
x.toFixed(2); 按照2位小數四捨五入
var str=x.toString(); 返回的是一個字元串
var str=String(x);可以把任何數據轉換成字元串
var num=Number(x); 轉換純數字;
var num=parseInt(str); 字元串轉數字,整數;
var num=parseFloat(str); 字元串轉數字，可取小數
Boolean(x);"" 0 NAN null undefined為false 其他都為true
m
m>>n讀作m右移n位，相當於: m/ 2的n次方
m>>>0取整
*********************** 數組API***************************
var arr=[ ];數組創建
var arr=new Array(n/*長度*/ 或 新元素);
arr[下標]；讀取(注意越界)
arr.length;長度
for(var key in arr)稀疏數組遍歷
.indexOf(查找數組元素值,start)元素查找返回下標 無為 -1
.lastIndexOf()
String(arr);每個元素值之間用逗號分隔
arr.toString()數組轉為逗號連接的字元串
arr.toLocaleString()轉換為本地字元串
arr.push(新值)末尾入棧,直接使用不用新變數接值
last=arr.pop(最後一值)末尾出棧,需要變數接住值
arr.unshift(新值)開頭入棧
first=arr.shift(第一個值)開頭出棧
.[下標]元素訪問
.join("連接符");無縫拼接 ("")
.reverse()反轉數組序列;
.sort()數組排序function(a,b)
.concat() 拼接兩個或更多的數組，並返回結果
.slice(起始,結束)返回現在數組的一個子數組,截取
.splice(起始下標，刪除個數，新值)從數組中刪除一部分元素，在添加值
ECMA5
.forEach(function(){})遍歷計算
.map(function(x))調用數組返回遍歷 新值
.filter(function(x))返回符合判斷的子集元素
.every(function(x))數組集元素判斷返回布爾false/true
.some(function(x))
.reduce(function(x,y))數組求和...
.isArray()判斷數組
*******************************String字元串************************************
new String(字元串值)創建
.length獲取長度
.charAt(下標)取字元
.charCodeAt(下標)取字元Unicode編碼
編碼: var code=encodeURI("原文")
解碼: var 原文=decodeURI("code")
encodeURIComponent代替encodeURI
decodeURIComponent代替decodeURI
.concat(初始值/新值)字元串鏈接
.fromCharCode(Unicode編碼...)編碼創建字元
.indexOf(查找值,起始位置)返回下標
.lastIndexOf()
.match(regexp)正則匹配結果p831
.replace(替換對象,新值)替換正則匹配子串
.replace(reg,function(match))高級替換方法
.search(regexp)正則查找字元 無 -1
.trim()開頭結尾去空格
.slice(起始索引，結束)截取
.split(切分參照值,返回數組長度)字元串切分重組成數組p835
.substr(起始下標,長度)截取 返回子集
.substring(起始下標,結束下標)返回子串(獲取)
.toLocaleLowerCase()轉為小寫
.toLowerCase()
.toLocaleUpperCase()轉為大寫
.toUpperCase()
u4e00-u9fa5漢字
*******************************RegExp對象*****************************************
var reg=new RegExp("正則",[,"ig"])創建方法,如果包含/ " " 都要用轉義
var arr=reg.exec(str)在str中查找符合reg規則的第一個敏感詞;返回數組
********************************Math API*********************************************
num.toFixed(n)指定小數位置
Math.ceil(x)上取整 -1.99 = -1
Math.floor(x)下取整 -1.01 = -2.0
Math.max(x,y,z)返回XYZ最大的一個數 不支持數組
Math.min(x,y,z)返回最小的一個數 不支持數組
* 解決：Math.max.apply(Math,arr)*
Math.round(x)四捨五入取整
Math.abs(x)取絕對值;
Math.pow(10,2)10的2次方;
Math.sqrt(num)開平方
取隨機數
Math.random()返回0-1之間隨機取一個小數,能取到0 取不到1;
parseInt(Math.random()*(max+1));取0-max 的整數
parseInt(Math.random()*(max-min+1)+min);
***************************************Number*****************************************************
NaN Infinity isNaN() !isNaN
new Number()
常量
Number.MAX_VALUE可表示的最大的數
.MIN_VALUE可表示的最小的數
.NaN非數字類
.NEGATIVE_INFINITY負無窮大，溢出時返回該值。
.POSITIVE_INFINITY正無窮大，溢出時返回該值。
方法
.toString()把數字轉換為字元串，使用指定的基數。
.toFixed(小數位數)把數字轉換為字元串，結果的小數點後有指定位數的數字。
.valueOf()返回一個 Number 對象的基本數字值。
.toLocaleString()把數字轉換為字元串，使用本地數字格式順序。
.toExponential()把對象的值轉換為指數計數法。
.toPrecision()把數字格式化為指定的長度。
*****************************時間對象**********************************
var date=new Date();獲得客戶端當前時間;
var date=new Date("2016/05/05 10:35:05")自定義時間;
get（獲取）set（設置）
.getFullYear();年
.getDay();星期/日 0-6
.getMonth();月份 0-11
.getHours();時 0-23
.getMinutes();分 0-59
.getSeconds();秒返回0-59;
.getDate();返回日期1-31;
.getTime();返回1970.1.1.0點到至今的毫秒數
date.set[年月日分](date.get[年月日分]()+n);簡寫
var days=parseInt((now-birth)/1000/60/60/24);
var endDate=new Date(stertDate/*.getTime()*/);
時間格式轉換
XXXDate.toLocaleString()返回日期+時間;
.toLocaleDateString();返回日期部分
.toLocaleTimeString();返回時間部分
.parse()返回1970年1月1日午夜到指定日期（字元串）的毫秒數。
.toSource()返回該對象的源代碼。
.toString()把 Date 對象轉換為字元串。
.toTimeString()把 Date 對象的時間部分轉換為字元串。
.toDateString()把 Date 對象的日期部分轉換為字元串。
**************************************定時器*********************************************
窗口大小
完整窗口大小：window.outerHeight/outerWidth;
文檔顯示區大小：window.innerHeight/innerWidth;
整窗口大小
1.在打開窗口時：
Var config = 「top=?,left=?,height=?,width=?,resizable=no」;
Window.open(「url」,」name」,」config」);
2.在窗口打開後，調整大小：
Window.resizeTo(寬，高);
Window.resizeBy(寬的增量，高的增量)
窗口定位：
窗口位置：
窗口左上角相對於屏幕左上角的坐標
Top：window.screenTop|screenY;
Left：window.screenLeft|screenX;
移動窗口位置：
Window.moveTo(x,y): 將窗口左上角移動到x，y的位置
Window.moveBy(x的增量，y的增量);
屏幕的寬和高：
1.完整分辨路的寬高：screen.width/height;
2.去掉任務欄後的剩餘寬高：screen.availWidth/availHeight;
在事件發生時，獲得滑鼠位置：
e.screenX/screenY//滑鼠事件時滑鼠的的坐標
一次性定時器
1.任務函數：
Function task(){…}
任務函數的結尾要考慮: *何時啟動下一次*
2.啟動一次性定時器：
Timer = setTimeout(task,wait);
wait:等待時間毫秒數
3.停止一次性定時器：停止等待，不再執行任務
clearTimeout(timer);
周期性定時器
1.任務函數：定時器每次執行的任務
Function task(){…}
任務函數通常都要考慮:*何時停止*定時器的臨界值
2.將任務函數放入定時器，定時函數：
Timer = setInterval(task,interval)
interval:間隔的毫秒數
timer:全局變數，保存當前定時器的序號
序號是內存中唯一標示一項任務的編號
原理：首先將task函數對象和interval時間間隔記錄在定時器對象中；
再返回當前任務的序號；然後，定時器會按照指定時間間隔；
將task函數定時加入回調隊列(callback queue)中。
備註：只有ECS中沒有正在執行的函數時；才將callbackqueue中的函數加入ECS中執行
3.停止定時器:
clearInterval(timer);
calle aplay // 馬上執行
**************************************Event*********************************************
HTML 事件
onabort圖像載入被中斷
onblur元素失去焦點
onchange用戶改變域的內容
onclick滑鼠點擊某個對象
ondblclick滑鼠雙擊某個對象
onerror當載入文檔或圖像時發生某個錯誤
onfocus元素獲得焦點
onkeydown某個鍵盤的鍵被按下
onkeypress某個鍵盤的鍵被按下或按住
onkeyup某個鍵盤的鍵被鬆開
onload某個頁面或圖像被完成載入
onmousedown某個滑鼠按鍵被按下
onmousemove滑鼠被移動
onmouseout滑鼠從某元素移開
onmouseover滑鼠被移到某元素之上
onmouseup某個滑鼠按鍵被鬆開
onreset重置按鈕被點擊
onresize窗口或框架被調整尺寸
onselect文本被選定
onsubmit提交按鈕被點擊
onunload用戶退出頁面
DOM
elem.addEventListener(「事件名(click/mouseover)」,函數對象,捕獲/*默認為false, true捕獲從外向內*/)
btn.addEventListener(「click」,function(){})
IE8：elem.attachEvent(「事件處理函數名」,函數對象)
封裝事件對象：
兼容IE8：if(e.stopPropagation/*判斷是否有意義*/)else{ e.cancelBubble = true;}
獲得目標元素
兼容：var targer = e.targer || e.srcElement;
取消事件：
DOM e.preventDefault()
兼容：if(e.preventDefault){ e.preventDefault()}else{ e.returnValue = false;}
滑鼠坐標
1.相對於屏幕的坐標：e.screenX/screenY
2.相對於頁面左上角：e.pageX/page.Y
3.相對於當前文檔顯示區左上角：e.clientX/x e.clientY/y
4.相對於當前元素左上角：e.offsetX/offsetY;
******************************自定義異常****************************************
throw new Error("消息內容");
語法錯誤: SyntaxError
引用錯誤: ReferenceError
類型錯誤: TypeError
範圍錯誤: RangeError
EvalError，URIError
********************************bind*******************************************
創建一個新函數,借用舊函數並提前綁定this和參數值
何時使用:在創建方法時,就需要提前綁定this對象和參數值時;
fun.bind(obj[,參數1,參數2.....])
****************************function對象**************************************
1.聲明方式:function 函數名(參數列表) 只有聲明方式才能被提前;
2.函數直接量:var 函數名=function(參數列表)
3.new創建:var 函數名=new Function("參數1","參數2",.......,"函數體"),無論參數是什麼類型都要用""包裹!!
頂層函數(全局函數)
.decodeURI()解碼某個編碼的 URI。
decodeURIComponent()解碼一個編碼的 URI 組件。
encodeURI()把字元串編碼為 URI。
encodeURIComponent()把字元串編碼為 URI 組件。
escape()對字元串進行編碼。
eval()計算 JavaScript 字元串，並把它作為腳本代碼來執行。
getClass()返回一個 JavaObject 的 JavaClass。
isFinite()檢查某個值是否為有窮大的數。
isNaN()檢查某個值是否是數字。
Number()把對象的值轉換為數字。
parseFloat()解析一個字元串並返回一個浮點數。
parseInt()解析一個字元串並返回一個整數。
String()把對象的值轉換為字元串。
unescape()對由 escape() 編碼的字元串進行解碼。
頂層屬性（全局屬性)
Infinity代表正的無窮大的數值。
java代表 java.* 包層級的一個 JavaPackage。
NaN指示某個值是不是數字值。
Packages根 JavaPackage 對象。
undefined指示未定義的值。
全局對象描述
step1.全局對象是預定義的對象，作為 JavaScript 的全局函數和全局屬性的佔位符。通過使用
全局對象，可以訪問所有其他所有預定義的對象、函數和屬性。全局對象不是任何對象
的屬性，所以它沒有名稱。
step2.在頂層 JavaScript 代碼中，可以用關鍵字 this 引用全局對象。但通常不必用這種方式引
用全局對象，因為全局對象是作用域鏈的頭，這意味著所有非限定性的變數和函數名都會
作為該對象的屬性來查詢。例如，當JavaScript 代碼引用 parseInt() 函數時，它引用的是
全局對象的 parseInt 屬性。全局對象是作用域鏈的頭，還意味著在頂層 JavaScript 代碼
中聲明的所有變數都將成為全局對象的屬性。
step3.全局對象只是一個對象，而不是類。既沒有構造函數，也無法實例化一個新的全局對象。
step4.在 JavaScript 代碼嵌入一個特殊環境中時，全局對象通常具有環境特定的屬性。實際上
ECMAScript 標準沒有規定全局對象的類型，JavaScript 的實現或嵌入的 JavaScript 都
可以把任意類型的對象作為全局對象，只要該對象定義了這裡列出的基本屬性和函數。
例如，在允許通過 LiveConnect 或相關的技術來腳本化 Java 的 JavaScript 實現中，全
局對象被賦予了這裡列出的 java 和 Package 屬性以及 getClass() 方法。而在客戶端
JavaScript 中，全局對象就是 Window 對象，表示允許 JavaScript 代碼的 Web 瀏覽器窗口。
step5.在 JavaScript 核心語言中，全局對象的預定義屬性都是不可枚舉的，所有可以用
for/in 循環列出所有隱式或顯式聲明的全局變數.
var 全局對象的預定義屬性集合= ""; for (var name in this)
console.log(全局對象的預定義屬性集合);
document.write(variables);
***************************重載(overload)************************************
arguments 只能在函數體內使用,可以下標訪問每個元素,都有length屬性記錄參數個數;
模擬重載:function add(){
for(var i=0,sum=0;i
sum+=arguments[i];
}
return sum;
}
console.log(add(3,5,8));
console.log(add(12,14,16,18));
console.log(add(1,2,3,4,5));
********************************匿名函數都只能用一次*********************************
1.自調方式：
( function(參數列表) ) ();
2.回調方式：
arr.sort(function (a,b)); return返回函數結果
************************************閉包***********************************
1.判斷閉包，找到受保護的變數,確定其值;
2.外層函數調用了幾次，就創建了幾個閉包 受保護的變數就有幾個副本;
3.同一次外層函數調用,返回的內部函數,都適用同一個受保護的變數;
***********************************面向對象*********************************
封裝:將一個事物的屬性和功能集中定義在一個對象中;
現實中一個事物的屬性,會成為對象的屬性,而一個事物的功能,會成為對象的方法;
***js中一切都是對象，一切對象就是hash數組
3種方式創建：
1.對象直接量 : 僅適合創建一個單獨的對象
var obj={
"屬性名":"屬性值",
........
"方法名":function(參數列表);
};
如何訪問屬性和方法:
obj.屬性名___用法同普通函數一樣;
obj.方法名();______用法同普通函數一樣;
特殊:1 訪問到不存在的屬性,返回undefined;
2 隨時可添加不存在屬性
2.使用new關鍵字創建:
var obj=new Object();
obj.屬性名=值;
........
obj.方法名=function(){}
3.使用構造函數反覆創建多個相同結構的對象:
****構造函數:專門定義一類對象統一結構的函數
function 類型名(屬性參數列表){
this.屬性名=屬性參數值;
..................
this.方法名=function(){};
}
如何調用:var obj
**************************************this********************************************
在當前對象的方法內,引用正在調用自己的對象;
*************************************繼承******************************************
obj.hasOwnProperty("屬性名");判斷自有還是共有屬性;
obj.屬性名=新值修改自有屬性
delete obj.屬性名刪除自有屬性
obj.共有屬性=新值結果:在obj本地添加同名的自有屬性,覆蓋父對象的共有屬性
obj._proto_查看原型
***********************************借用函數********************************************
函數名.cell()使用另一個對象，臨時調用指定的函數
apply()要求將參數放入數組統一傳入
Array.isArray(obj)檢查任意類型對象是否是數組類型
**********************************實現自定義繼承****************************************
1.子對象._proto_=父對象
Object.setPrototypeOf(子對象,父對象)讓子對象繼承父對象
************************************獲取新特性**********************************************
Object.getOwnPropertyDescriptor(obj,"屬性名");獲取方式, 直接量訪問默認都是ture;
Object.defineProperty(obj,"屬性名",{
value:值,
writable:true默認, 改為false則不能修改值,
enumerable:true默認,改為false則不能用for in 遍歷到,
configurable:true默認,改為false則不能刪除
})
*****************************************嚴格模式***********************************
"use strict"在js開始 使用嚴格模式
Object.isExtensible(obj);獲取對象是否可擴展
Object.preventExtensions(obj);修改Extensible為false,一旦修改為false 就不可能再改為true
Object.isSealed(obj);判斷obj是否為密封對象
Object.seal(obj)修改obj對象的內部屬性和屬性的特性使其密封
Object.isFrozen(obj);判斷obj是否被凍結;
Object.freeze(obj)凍結obj對象
******************************************DOM****************************************
節點對象的公共屬性：所有節點父類型都是Node
nodeType判斷節點類型時使用
nodeName描述節點的名稱,判斷節點名稱時使用
nodeValue節點的內容值
節點間關係：包含所有節點對象的樹結構
parentNode()獲取父節點
childNodes()獲取子節點集合
遍歷：for(var i=0, len=parent.childeNodes.length; i
註：遍歷動態集合，都要提前存儲集合的length,然後再和存儲的length比較
childNodes:返回動態集合[ ];
動態集合：不保存完整的節點屬性，只保存節點的位置、 只要訪問動態集合，都會導致
firstChild()獲取第一個子節點
lastChild()獲取最後一個子節點
previousSibling()獲取上一個兄弟節點
nextSibling()獲取下一個兄弟節點
*******************************查找***********************************************
var elem=document.getElementById("id");ID查找
var elems=parent.getElementByTagName("element");標籤名查找;返回元素的集合
var slems=parent.getElementsByName("name");name屬性查找
var elems=parent.getElementsByClassName("class");class屬性查找
var elem=parent.querySelector("任意選擇器");
var elem=parent.querySelectorAll("… …");
*******************************修改**************************************************
elem.innerHTML:獲取或設置元素開始標籤到結束標籤之間的HTML代碼內容
elem.textContent:獲取或設置元素開始標籤到結束標籤之間的純文本的正文
elem.innerText智障IE8專用介面
elem.setAttribute(「屬性名」,」值」);設置屬性
Elem.removeAttribute(「屬性名」)移除指定屬性
elem.setAttribute("屬性名","屬性值")核心DOM 設置元素的屬性
Elem.hasAttribute(「屬性名」)判斷元素是否包含指定屬性
elem.屬性名 = 「值」;HTML DOM中，寫為.className
elem.屬性名=""相當於移除
elem.屬性名==""判斷有沒有屬性
Var style = getComputedStyle(elem); Var value = style.屬性名;
var style=elem.currentStyle智障IE8
******************************************添加元素**************************************************
var elem=document.createElement("標籤名");相當於
elem.屬性名=」值」;elem.innerTHML = 「內容」;
追加：parent.appendChild(elem);
插入：parent.inserBefore(elem,已有元素);
替換：parent.replaceChild(elem,已有元素);
刪除：parent.removeChild(子元素);
文檔片段: 內存中臨時存儲一個DOM子樹的臨時父節點
Step1: 創建文檔片段對象：var frag=document.createDocumentFragment();
Step2: 將平級子元素，追加到文檔片段中：frag.appendChild(elem);
Step3: 將文檔片段掛到DOM樹上指定父節點下：parent.appendChild(frag);
實例：frag.appendChild(new Option("-請選擇-",-1));
Select對象：指代下一個select元素
屬性：options包含一個select下所有option元素對象的集合
selectedIndex: 獲得當前選中項的下標
方法：add(opt): 將opt元素對象追加到當前sel下
remove(i): 移除sel下下標為i的option元素對象
事件：onchange：
實例：sel.add(new Option(cts[i].name , cts[i].id));
Option對象：指代select元素下一個option元素
簡寫：創建，設置，追加optionsel.add(new Option(innerHTML,value));
Table對象：指代一個table元素
創建：createTHead/TBody/TFoot
刪除：deleteTHead/TBody/TFoot
獲取：. tHead/ tFoot . tBodies[ i ]
添加：.insertRow(i),如果省略i，表示在最後一行追加。如果i在中間，就在i位置插入，原i 位置插入，原 i 位置的行向後瞬移
刪除：. deleteRow(i)，如果省略 i ，表示刪除第一行
獲取：.rows[ i ]
添加：insertCell(i)，省略 i 表示末尾追加
刪除：deleteCell(i)，省略 i 刪除第一個
獲取：.cells[ i ]
下標：rowIndex 獲取當前tr在整個table中的下標
From對象：專門指代一個from元素
獲取form對象：var form = document.forms[i/"id"/"name"]
獲取form元素下的表單控制項： Var elem = form. elements[i/"id"/"name"]
簡寫：form.id/name
方法：form.submit()://手動提交表單
不希望自動提交時，可使用自定義按鈕調用form的submit方法,手動提交
elem.focus(); elem.blur();
***********************************Window*****************************************************
/*兩個角色*/代替ES標準中的Global，充當全局對象；封裝了瀏覽器軟體以及窗口的信息；
window.open("url" , "name");
name屬性時內存中窗口的名稱，在打開窗口時才賦值；
值：name的默認值: _self _top _blank；可自定義name屬性
規定: 相同name屬性的窗口只能打開一個,後打開的會替代先打開的
/*窗口大小*/
完整窗口大小：window.outerHeight/outerWidth;
文檔顯示區大小：window.innerHeight/innerWidth;
/*調整窗口大小*/
1.在打開窗口時：
Var config = 「top=?,left=?,height=?,width=?,resizable=no」;
Window.open(「url」,」name」,」config」);
2.在窗口打開後，調整大小：
Window.resizeTo(寬，高);
Window.resizeBy(寬的增量，高的增量)
/*窗口定位*/
/*窗口位置*/
窗口左上角相對於屏幕左上角的坐標
Top：window.screenTop|screenY;
Left：window.screenLeft|screenX;
/*移動窗口位置*/
Window.moveTo(x,y): 將窗口左上角移動到x，y的位置
Window.moveBy(x的增量，y的增量);
/*屏幕的寬和高*/
1.完整分辨路的寬高：screen.width/height;
2.去掉任務欄後的剩餘寬高：screen.availWidth/availHeight;
在事件發生時，獲得滑鼠位置：
e.screenX/screenY//滑鼠事件時滑鼠的的坐標
/*定時器*/
TAG:生氣的小饅頭 |