/*

渐进增强

平稳退化

网页

    结构层(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. 介绍一个牛X的样式counter

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---27

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  3. /* Dr黄的技术博客开通啦 */

    以前懒得写技术日志, 现在终于发现重要性.. mark一下这个里程碑.

  4. LeetCode OJ--Merge Intervals @

    https://oj.leetcode.com/problems/merge-intervals/ 合并区间 //排序 sort(intervals.begin(),intervals.end(),C ...

  5. springBoot 定时器

    程序入口类中加入注解 @EnableScheduling 配置定时任务为并行 @Slf4j @Configuration public class ScheduledConfig implements ...

  6. go 函数回调

  7. [Python Cookbook] Numpy Array Slicing and Indexing

    1-D Array Indexing Use bracket notation [ ] to get the value at a specific index. Remember that inde ...

  8. zabbix-agent安装报错

    最近接触了zabbix,觉得挺好用的,再一次安装agent的过程中,报了如下错误: [root@11005499 ~]# yum install zabbix-agent -y ... groupad ...

  9. tomcat 登录时用户名和密码问题

    在编程的时候我们经常在myeclipes中直接部署web程序,大多数情况下不会登陆tomcat,这样时间长了我们就忘记了tomcat的登陆用户名和密码,下面就说一下怎么找到tomcat的用户名和密码吧 ...

  10. linux df -h卡成狗

    linux执行df -h命令,直接卡在,很久没有任何动静 strace df -h跟踪命令执行,查看卡在那里 还有可能就是重做系统吧,检测下内存条是不是坏了等 http://blog.51cto.co ...