/*

渐进增强

平稳退化

网页

    结构层(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. poj 1637 Sightseeing tour 混合图欧拉回路 最大流 建图

    题目链接 题意 给定一个混合图,里面既有有向边也有无向边.问该图中是否存在一条路径,经过每条边恰好一次. 思路 从欧拉回路说起 首先回顾有向图欧拉回路的充要条件:\(\forall v\in G, d ...

  2. hdu 2521 反素数(打表)

    反素数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  3. python对象的复制问题，按值传递？引用传递？

    这部分这篇博文说的很明白,转了过来 作者:winterTTr (转载请注明)http://blog.csdn.net/winterttr/article/details/2590741#0-tsina ...

  4. LOJ N！在不同进制的位数

    lightoj1045 - Digits of Factorial (N!不同进制的位数) 对于一个B进制的数,只需要对其取以B的对数就可以得到他在B进制情况下的位数(取了对数之后可能为小数,所以还需 ...

  5. 【WEB基础】HTML & CSS 基础入门（8）表单

    前面 前面我们已经熟悉了网页上一些常见的元素,如在网页上显示一段文字.一张图片.一个列表.一张表格等等.这些东西都是事先编辑好显示在页面上只提供给用户看的,实际上,我们可以把这样的页面称之为静态页面. ...

  6. 站点部署，IIS配置优化指南

    目录 一. 二. 三. 四. 五. 六. 七.       安全性 八.       多服务器IIS集中化管理web 通常把站点发布到IIS上运行正常后,很少会去考虑IIS提供的各种参数,如何配置才是 ...

  7. Fresco对Listview等快速滑动时停止加载

    Fresco中在listview之类的快速滑动时停止加载,滑动停止后恢复加载: 1.设置图片请求是否开启 // 暂停图片请求 public static void imagePause() { Fre ...

  8. js 日期计算星座 根据生日的月份和日期，一行代码计算星座的js小函数（转）

    本博客根据 开源中国作者清风徐不来 的文章 根据生日的月份和日期,一行代码计算星座的js小函数(转) 原文出自CSDN 无心的专栏 的文章,知识产权归原文作者所有! 点击查看原文:js 日期计算星座

  9. memcache 开机启动

    一. 通常:启动Memcache的服务器端的命令为:# /usr/local/bin/memcached -d -m 10 -u root -l 127.0.0.1 -p 11211 -c 256 - ...

  10. Android 使用内置的Camera应用程序捕获图像

    本Demo的实现效果是调用手机上已安装的照相机来实现拍照的功能,拍好的照片以ImageView形式展示. 目的:学习手机调用安装的相机照相,对大的图片处理有所认识,这里主要用到BitmapFactor ...