JavaScript -- JavaScript DOM 編程藝術(第2版)
阿新 • • 發佈：2018-03-11
mouseout 服務器 read scripts UC public send pro after
/*
漸進增強
平穩退化
網頁
結構層(structural layer): HTML
表示層(presentation layer): CSS <link rel="stylesheet" href="style.css" media="screen"/>
行為層(behavior layer): JavaScript <script src="scripts.js"></script>
1、使用有意義的標記來構建頁面的結構；
2、把表現性的信息都分離到CSS樣式表中；
3、負責任地使用不唐突的JavaScript來應用行為增強，同時確保平穩退化。
CSS Or JavaScript
1、這個問題最簡單的解決方案是什麽；
2、哪種解決方案會得到更多的瀏覽器的支持；
3、如果想改變某個元素的呈現效果，使用CSS；如果想改變某個元素的行為，使用DOM；
如果你想根據某個元素的行為去改變它的呈現效果，請運用你的智慧，在這個問題上沒有放之四海而皆準的答案；
node
nodeName, nodeType, nodeValue, childNodes, firstChild, lastChild, parentNode, nextSibling, previousSibling,
getAttribute(), setAttribute(), appendChild(), insertBefore(),
onclick, onkeypress, onmouseover, onmouseout,
window
open,
onload,
document
DOM
getElementById(), getElementsByTagName(), getElementsByClassName(), createElement(), createTextNode(),
HTML-DOM
innerHTML, body, className, form,
write(),
CSS-DOM
style(fontWeight, fontSize, backgroundColor, ),
HTML
a: href, accesskey,
abbr: title,
blockquote: cite,
dl:
dt:
dd:
sup:
文檔類型
html5 <!DOCTYPE html>
html 4.01 嚴格型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
CSS
overflow(visible, hidden, scroll, auto),
ajax (Hijax: 漸進增強(progressive enhancement)地使用ajax)
XMLHttpRequest
readyState(0：未初始化；1：正在加載；2：加載完畢；3：正在交互；4：完成。), responseText, responseXML,
status(0, 200, 404, 500...), statusText,
open(), send(),
onreadystatechange,
Math
ceil(), floor(), round(),
資源
HTML5規範 https://www.w3c.org/TR/html5
Modernizr 特性檢測 http://www.modernizr.com
<canvas>元素規範 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
<video>元素規範 http://www.whatwg.org/spec/web-apps/current-work/multipage/video.html#video
localStorage/seseeionStorage 客戶端本地存儲 http://dev.w3.org/html5/webstorage(https://html.spec.whatwg.org/multipage/webstorage.html)
WebSocket 與服務器端雙向通信 httP://dev.w3.org/html5/websockets/
標準化的拖放實現 http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dnd
瀏覽器地理位置服務 http://www.w3.org/TR/geolocation-API/
W3C HTML5 Working Draft http://www.w3.org/TR/html5
WHATWG HTML5 http://www.whatwg.org/spec/web-apps/current-work
HTML5交互演示 http://html5demos.com/
HTML5相關PPT、代碼、示例及教程 http://www.html5rocks.com/
*/
//綁定在頁面加載完成後需要執行的函數
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload !== ‘function‘) {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
//在指定節點之後新增一個節點
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild === targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
//生成ajax請求對象
function getHttpObject() {
if (typeof XMLHttpRequest === ‘undefined‘) {
XMLHttpRequest = function() {
try {
return new ActiveXObject("Msxml2.XMLHTTP.6.0");
} catch (e) {
}
try {
return new ActiveXObject("Msxml2.XMLHTTP.3.0");
} catch (e) {
}
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
}
return false;
}
}
return new XMLHttpRequest();
}
//進行ajax請求的一般步驟
function getNewContent() {
var request = getHttpObject();
if (request) {
request.open(‘GET‘, ‘example.txt‘, true);
request.onreadystatechange = function() {
if (request.readyState === 4) {
alert(request.responseText);
}
}
request.send(null);
} else {
alert(‘Sorry your browser doesn\‘t support XMLHttpRequest‘);
}
}
//獲取指定節點的下一個元素節點
function getNextElement(node) {
if (node.nodeType === 1) {
return node;
}
if (node.nextSibling) {
return getNextElement(node.nextSibling);
}
return null;
}
//給指定元素添加class屬性
function addClass(element, value) {
if (!element.className) {
element.className = value;
//element.setAttribute(‘class‘, value);
} else {
var newClassName = element.className;
newClassName += ‘ ‘ + value;
element.className = newClassName;
}
}
//給指定tag的nextSibling添加class
function styleElementSiblings(tag, theclass) {
if (!document.getElementsByTagName) return false;
var elems = document.getElementsByTagName(tag);
var elem;
for (var i = 0; i < elems.length; i++) {
elem = getNextElement(elems[i].nextSibling);
addClass(elem, theclass);
}
}
//表格行的顏色奇偶交錯
function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName(‘table‘);
var odd;
var rows;
for (var i = 0; i < tables.length; i++) {
odd = false;
rows = tables[i].getElementsByTagName(‘tr‘);
for (var j = 0; j < rows.length; j++) {
if (odd) {
//rows[j].style.backgroundColor = ‘#ffc‘;
addClass(rows[i], ‘odd‘);
odd = false;
} else {
odd = true;
}
}
}
}
//鼠標懸浮某一行時高亮
function highlightRows() {
if (!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName(‘tr‘);
for (var i = 0; i < rows.length; i++) {
rows[i].onmouseover = function() {
this.style.fontWeight = ‘bold‘;
}
rows[i].onmouseout = function() {
this.style.fontWeight = ‘normal‘;
}
}
}
JavaScript -- JavaScript DOM 編程藝術(第2版)