码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2018-03-11 00:19:32      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:lock   append   ajax   ddl   body   hidden   child   没有   parent   

/*
渐进增强
平稳退化

网页
    结构层(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版)

标签:lock   append   ajax   ddl   body   hidden   child   没有   parent   

原文地址:https://www.cnblogs.com/yarightok/p/8542042.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!