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';

        }

    }

}
巴特西

JavaScript -- JavaScript DOM 编程艺术(第2版)

最新文章

热门文章
