《JavaScript DOM 编程艺术 》 笔记
一:这本书由几个案列带入知识点,通俗易懂。最大的收获莫过于作者多次提到的逐渐增强和平稳退化。
"渐进增强"指的是给所用用户同等的基本使用体验,再根据用户终端的级别给予更高级的用户更为高效轻松的用户体验。"平稳退化"同样是给所有用户同等的一个基准,但其方向却是与渐进增强相反,此方法是剥夺低级用户的一些体验。
二:解决部分浏览器不兼容html5、css3 的问题
使用modernizr解决
https://modernizr.com/download?setclasses
三:方法
加载函数,复杂的代码用此方法更加方便
//加载函数的方法,如addLoadEvent(functionName),等同于window.onload
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function loadEvents() {
// home
prepareSlideshow();
// about
prepareInternalnav();
// photos
preparePlaceholder();
prepareGallery();
// live
stripeTables();
highlightRows();
displayAbbreviations();
// contact
focusLabels();
prepareForms();
}
// Load events
addLoadEvent(highlightPage);
addLoadEvent(loadEvents);
h5中不存在insertAfter()方法
//在某个元素节点前插入
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
追加class
//追加class 的方法
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
通过className获取元素
function getElementByClassName(node, classname) {
if (node.getElementByClassName) {
// 使用现有方法
return node.getElementByClassName(classname);
} else {
var results = new Array();
var elems = node.getElementsByTagName("*");
for (var i = 0; i < elems.length; i++) {
if (elems[i].className.indexOf(className) != -1) {
results[results.length] = elems[i];
}
}
}
}
《JavaScript DOM 编程艺术 》 笔记的更多相关文章
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- CSS笔记--选择器
CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...
- HTML+CSS笔记 CSS中级 一些小技巧
水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...
- HTML+CSS笔记 CSS中级 颜色&长度值
颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...
- HTML+CSS笔记 CSS中级 缩写入门
盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...
- HTML+CSS笔记 CSS进阶再续
CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...
- HTML+CSS笔记 CSS进阶续集
元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...
- HTML+CSS笔记 CSS进阶
文字排版 字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果 ...
- HTML+CSS笔记 CSS入门续集
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p> ...
- HTML+CSS笔记 CSS入门
简介: </span>年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的<span>脚本解释程序</span>,作为ABC语言的一种继承. & ...
随机推荐
- Android开发之FileProvider
最近做项目时,都需要用到FileProvider.于是就研究了下,现总结如下: 官方路径:http://developer.android.com/intl/zh-cn/training/secure ...
- javascript中最常用的方法
平时在工作中时常需要一些方法,下面列举几个最常用的几个方法. 1. indexOf(searchvalue,fromindex) 该方法用于查找一个字符串是否包含了另一个字符串 indexOf() 方 ...
- Yii -- framework 目录结构说明
base 底层的类库文件 caching 所有缓存方法 cli 项目生成脚本 collecions 用PHP语言构造传统OO语言的数据存储单元.如队列,栈,哈希等等 console yii控制台 db ...
- iOS开发——Reachability和AFNetworking判断网络连接状态
一.Reachability // 监听网络状态改变的通知 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selec ...
- LPC2478的外部中断使用
LPC2478外部中断 2478的外部中断模型如下 也就是说,port0和2支持外部中断,EINT0-2是三个独立管脚的中断,而EINT3则是port0和2的所有中断共同拥有的向量 对于port0和2 ...
- jstree使用小结(三)
操作节点的这几个事件都比较简单: 如下 var $tree=$('#tree1'); $tree.jstree({...}); //选中节点 $tree.on('select_node.jstree' ...
- 设置git账号并生成新的ssh(切换电脑用户之后)
1.设置账号 2.设置邮箱 3.检查确认 4. 5.check-----成功~
- Python collections.defaultdict() 与 dict的使用和区别
看样子这个文档是难以看懂了.直接看示例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 import collections s = [('yellow', ...
- Twisted源码分析系列01-reactor
转载自:http://www.jianshu.com/p/26ae331b09b0 简介 Twisted是用Python实现的事件驱动的网络框架. 如果想看教程的话,我觉得写得最好的就是Twisted ...
- idea 15破解方法记录
So easy! Only one step. 注册时选择 License server ,填 http://idea.lanyus.com 对于Clion等同样适用.