/*

渐进增强

平稳退化

网页

    结构层(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. BootLoader的一些知识

    在嵌入式操作系统中,BootLoader是在操作系统内核运行之前运行.可以初始化硬件设备.建立内存空间映射图,从而将系统的软硬件环境带到一个合适状态,以便为最终调用操作系统内核准备好正确的环境.在嵌入 ...

  2. 2014ACM-ICPC 北京赛区总结

    万万没想到,拿金了.区域赛的金是一直想拿但是一直觉得自己可能拿不到的,最后居然拿到了,开心之余感触颇深. 还记得西安打铁之后的那个晚上,心里想着铁都打了,可能就没有第二场了,但后来冼老师问我们原本我们 ...

  3. ef core 2.1 利用Query Type查询视图

    ef core新加入的功能“Query Type”可以让我们很方便的查询视图而不需要做任何特殊处理.不过在代码上和普通的查询有些不同. 先贴文档:https://docs.microsoft.com/ ...

  4. 牛客网 牛客小白月赛1 J.おみやげをまらいました

    J.おみやげをまらいました   链接:https://www.nowcoder.com/acm/contest/85/J来源:牛客网     随便写写.   代码: 1 #include<ios ...

  5. Codeforces 429D Tricky Function（平面最近点对）

    题目链接  Tricky Function $f(i, j) = (i - j)^{2} + (s[i] - s[j])^{2}$ 把$(i, s[i])$塞到平面直角坐标系里,于是转化成了平面最近点 ...

  6. ATOM入坑必备插件

    Atom作为Javascript/CSS/HTML等前端编辑器利器,其强大功能依靠各种插件,以下是笔者在入坑阶段,精挑细选总结出的必不可少的插件,熟悉运用这些插件,一定成吨提高生产效率.安装这些插件只 ...

  7. luogu P2285 [HNOI2004]打鼹鼠

    题目描述 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿牛编写了一个打鼹鼠的游戏:在一个n*n的网格中,在某些时刻鼹鼠会在某一个网格探出头来透透气. ...

  8. android 内存泄漏出现的情况

    非静态内部类的静态实例由于内部类默认持有外部类的引用,而静态实例属于类.所以,当外部类被销毁时,内部类仍然持有外部类的引用,致使外部类无法被GC回收.因此造成内存泄露. 类的静态变量持有大数据对象静态 ...

  9. Ajax方式实现注册验证代码

    经常用到的经典Ajax代码,记录备用: function CreateAjax() { var XMLHttp; try { XMLHttp = new ActiveXObject("Mic ...

  10. ADO.NET访问Access(文本数据库)数据操作(CRUD)

    1,ADO.NET访问Access(文本数据库)数据操作(CRUD) 2,DatabaseDesign 文本数据库Northwind.mdb 3,/App_Code 3.1,/App_Code/DBC ...