/*

渐进增强

平稳退化

网页

    结构层(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版)的更多相关文章

  1. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. Javascript DOM 编程艺术（第二版）读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  3. 《JavaScript DOM编程艺术（第二版）》读书总结

    这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了. 1.DOM即document object model的缩写,文档对象模型,Jav ...

  4. 【读书笔记】读《JavaScript DOM 编程艺术-第2版》

    1.DHTML DHTML曾被认为是HTML/XHTML.CSS和JavaScript相结合的产物,就像今天的HTML5那样,但把这些东西真正凝聚在一起的是DOM.如果真的需要来描述这一过程的话,“D ...

  5. Javascript DOM 编程艺术（第二版）读书笔记——DOM基础

    1.DOM是什么 D=document(文档) O=object(对象) M=Model(模型) DOM又称节点树 一些术语: parent(父)   child(子)   sibling(兄弟)   ...

  6. 《JavaScript DOM 编程艺术 第 2 版》

    第 5 章 最佳实践 平稳退化:现在基本所有带交互的网站都使用 Ajax,SAP 也火起来了,平稳退化真是很难实现了(看到第七章发现我之前的观点是错了) 分离 JS 向下兼容 性能考虑 第 6 章 案 ...

  7. JavaScript DOM编程艺术读后感（1）—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  8. JavaScript DOM编程艺术（第2版）的简单总结

    介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...

  9. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

随机推荐

  1. 基于Socket创建Web服务

    基于Socket创建Web服务 为什么要使用Socket呢,我们来看下图

  2. win10下怎么配置以KDiff3作为merge tool和diff tool

    系统环境: OS: Windows 10 Git 2.6.1.windows.1 KDiff3 0.9.98 (64 bit) 具体代码如下: git config --global --add me ...

  3. 【转载】ASP.NET 生成验证码

    直接上code using System; using System.Collections.Generic; using System.Linq; using System.Web; using S ...

  4. .NET下XML文件的读写

    一．前言: XML是微软.Net战略的一个重要组成部分,而且它可谓是XML Web服务的基石,所以掌握.Net框架下的XML技术自然显得非常重要了.本文将指导大家如何运用C#语言完成.Net框架下的X ...

  5. Android Studio 项目代码运行正常,但是代码爆红处理记录

    系统上运行Android项目时,编译正常但是代码爆红,很烦.处理方法记录: clean 项目,执行build. 运行invalidate cache / restart 重启项目. 找到项目.idea ...

  6. WKWebView携带不上cookie的问题处理

    自从WKWebView推出后Apple官方及众多开发者都推荐使用它代替UIWebView,确实通过加载速度.占用内存方面的对比都要好上几个档次,索性就把项目中的浏览器控件换成了WKWebView,一开 ...

  7. Ansible之Playbook详解

    1.Playbook详解 playbook是一个非常简单的配置管理和多主机部署系统,可以定制配置,可以按照指定的操作步骤有序执行,支持同步和异步方式. 核心元素 Hosts:主机 Tasks:任务,由 ...

  8. Java多线程总结之由synchronized说开去

    更新完毕,结贴,以后有新的想法再开新帖 这几天不断添加新内容,给个大概的提纲吧,方面朋友们阅读,各部分是用分割线隔开了的: synchronized与wait()/notify() JMM与synch ...

  9. unsupported Scan, storing driver.Value type []uint8 into type *time.Time 解决方案

    数据库取数据的字段为created_at,数据库中类型是TIMESTAMP,允许NULL,此时在取数据的时候就会出现这种报错. 解决方案:在数据库连接的字符串中添加:&parseTime=Tr ...

  10. [Js]删除数组指定元素

    写在前面 在最近的项目中,有用到js对数组的操作,之前自己几乎没有用到这种方法,这里就记录一下,算是对学到的东西的一种总结吧. 数组对象splice方法 splice() 方法向/从数组中添加/删除项 ...