JS前端知識(shí)點(diǎn)總結(jié)之頁面加載事件，數(shù)組操作，DOM節(jié)點(diǎn)操作，循環(huán)和分支
本文實(shí)例講述了JS前端知識(shí)點(diǎn)總結(jié)之頁面加載事件，數(shù)組操作，DOM節(jié)點(diǎn)操作，循環(huán)和分支。分享給大家供大家參考，具體如下：
頁面加載事件的比較
- window.onload
- jquery 中的 document.ready
document.ready = function (callback) {
// 兼容FF,Google
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
callback();
}, false)
}
// 兼容IE
else if (document.attachEvent) {
document.attachEvent('onreadystatechange', function () {
if (document.readyState == "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}
})
}
else if (document.lastChild == document.body) {
callback();
}
}
window.onload = function () {
alert('onload'); // 后執(zhí)行
};
document.ready(function () {
alert('ready'); // 先執(zhí)行
});
- 內(nèi)部實(shí)現(xiàn)細(xì)節(jié)如上
數(shù)組的常用操作方法
- push 從后面追加一個(gè)或多個(gè)，返回新數(shù)組的長(zhǎng)度
- unshift 從前面追加一個(gè)或多個(gè)，返回新數(shù)組的長(zhǎng)度
- pop 刪除最后一個(gè)元素，返回被刪除的元素
- shift 刪除第一個(gè)元素，返回第一個(gè)被刪除的元素
- concat 連接數(shù)組，返回新的數(shù)組
- join 將數(shù)組轉(zhuǎn)字符串，參數(shù)是分隔符，默認(rèn)是分隔符是逗號(hào)”,”
- split 將字符串轉(zhuǎn)換為數(shù)組，默認(rèn)分割符是逗號(hào) stringObject.split(separator,howmany), howmany 參數(shù)可指定返回的數(shù)組的最大長(zhǎng)度
js 的構(gòu)成
- ECMAScript 描述了js語法和基本對(duì)象
- DOM (文檔對(duì)象模型) 提供了文檔結(jié)構(gòu)化表示，并定義了如何通過腳本來訪問文檔結(jié)構(gòu)
- BOM (瀏覽器對(duì)象模型) 提供與瀏覽器交互的方法和接口
dom 節(jié)點(diǎn)
- 標(biāo)簽節(jié)點(diǎn)
- 文字節(jié)點(diǎn)
- 屬性節(jié)點(diǎn)
- 注釋節(jié)點(diǎn)
獲取節(jié)點(diǎn)的方式
document.getElementById(“id”) document.getElementByTagName(“div”) document.getElementsByClassName(“classname”) ie 678 不支持 document.querySelector(); // 返回第一個(gè)匹配的dom元素 document.querySelectorAll(); // 返回所有dom元素匹配的集合
獲取瀏覽器是否支持的寫法如下
if(document.querySelector){
// do your business
}
節(jié)點(diǎn)的訪問
父節(jié)點(diǎn)(唯一):
dom.parentNode
兄弟節(jié)點(diǎn) (兼容寫法):
// nextSibling 和 previousSibling 是IE的寫法 var next = (dom.nextElementSibling) || (dom.nextSibling); var pre = (dom.previousElementSibling) || (dom.previousSibling);
孩子節(jié)點(diǎn) (兼容寫法):
// firstChild, lastChild 是IE的寫法 var first = father.firstElementChild || father.firstChild; var last = father.lastElementChild || father.lastChild;
孩子們節(jié)點(diǎn)：childNodes 和 children
// childNodes 是w3c推薦使用， 但谷歌等瀏覽器把換行也看成一個(gè)節(jié)點(diǎn)
// 用下面的方式實(shí)現(xiàn)，比較麻煩
var demo = document.getElementById("demo");
var nodes = demo.childNodes;
for(var i=0;i<nodes.length;i++) {
if(nodes[i].nodeType == 1) {
nodes[i].style.display = "none";
}
}
// children 在ie678里面包含注釋節(jié)點(diǎn)， 注意在編碼時(shí)避開使用注釋
var demo = document.getElementById("demo");
var child = demo.children;
child[0].style.backgroundColor = "red"; // 第一個(gè)孩子
child[child.length-1].style.backgroundColor = "red"; // 最后一個(gè)孩子
dom 節(jié)點(diǎn)操作
創(chuàng)建節(jié)點(diǎn)：
var dom = document.createElement(“div”);
添加節(jié)點(diǎn)：
// appendChild 將dom追加到dom1的最后面 dom1.appendChild(dom) ; // insertBefore 將newDom 插入到 ReferencedDom 的前面, 返回值為新插入的值, dom1 為父節(jié)點(diǎn) dom1.insertBefore(newDom, ReferencedDom)
刪除節(jié)點(diǎn)：
removeChild() eg: domA.removeChild(domB); // 刪除domA里面的孩子節(jié)點(diǎn)domB
克隆節(jié)點(diǎn)： cloneNode 復(fù)制節(jié)點(diǎn)，接受一個(gè)布爾值，true表示深復(fù)制(復(fù)制節(jié)點(diǎn)及其內(nèi)部所有節(jié)點(diǎn))， false 表示淺復(fù)制
// 深復(fù)制 demo.cloneNode(true); // 淺復(fù)制 demo.cloneNode(false);
屬性設(shè)定
非兼容ie6,7的寫法
- 獲取：dom.getAttribute(“屬性”);
- 設(shè)置：dom.setAttribute(“屬性”,”值”);
- 刪除：dom.removeAttribute(“屬性”);
兼容寫法舉例：
- 獲?。簐ar cn = dom.className
- 設(shè)置：dom.className = “dcl”
- 刪除：dom.className = null;
特殊樣式屬性
cssText 用于更改多個(gè)樣式屬性設(shè)置
dom.style.cssText = "width:30px;height:10px;"
常用的循環(huán)
- for
- while
- do while
switch 多分支語句
var str = "abc";
switch(str) {
case "a"
// ...
break;
case "b"
// ...
break;
case "c"
// ...
break;
case "abc"
// ...
break;
default:
// ...
}
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
今天看了javascript 高級(jí)程序設(shè)計(jì) 談到了字符串連接的性能問題2008-11-11
分享50個(gè)超級(jí)有用的JavaScript單行代碼(推薦!)
JavaScript實(shí)現(xiàn)日期格式化詳細(xì)實(shí)例
JavaScript實(shí)現(xiàn)獲取遠(yuǎn)程的html到當(dāng)前頁面中
package.json與package-lock.json的區(qū)別及詳細(xì)解釋
基于前端實(shí)現(xiàn)版本更新自動(dòng)檢測(cè)的流程步驟
List all the Databases on a SQL Server