正文
JavaScript -- JavaScript DOM 编程艺术(第2版)
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
/*
渐进增强
平稳退化网页
结构层(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';
}
}
}
