《Javascript DOM编程艺术》阅读笔记二

2022-11-03 10:23:16

本篇笔记是对于《Javascript DOM编程艺术第2版》的笔记！第二版哦~
第二版在第一版的基础上经过了扩展，涵盖了HTML5、Ajax和JavaScript库(尤其是jQuery)；且这一版以介绍库的附录代替了上一版介绍DOM方法的附录。（由Jerrymy Keith写的序得知）
编写代码时，切记“渐进增强，平稳退化”
《Javascript DOM编程艺术》阅读笔记一

第八章_充实文档的内容笔记

引用Body标签
- DOM Core方法
- HTML_DOM方法
缩略语列表
文献来源链接
快捷键清单(accessibility)

疑惑，145页中的函数代码清单中写了“遍历链接保存访问键得到akeys数组，而后遍历访问键”这里为什么要再写一个for去遍历访问键呢？直接写在上面遍历链接的for不可以吗？不美观？不易阅读？还是不能这样写？

第九章_CSS-DOM笔记

结构层 HTML/XHTML(搭建文档的结构)
表示层 CSS(设置文档的呈现效果)
行为层 JavaScript + DOM(实现文档的行为)

element.style.property;//property为style对象的属性，注意⚠️当CSS属性包含连字符（-）时需转换为驼峰命名法
// style属性只能返回内嵌样式
// style对象的各个属性都是可读写的
// style对象的属性值永远是一个字符串

一.CSS声明样式方法集合

标签元素

p{
	font-size: 1em
}

有特定class属性的所有元素

.classname{
	font-size: .8em
}

有独一无二id属性的元素

#id{
	font-size:1.2em
}

类似属性的多个元素

input[type*="text"]{
	font-size:1.2em;
}

根据元素位置

p:first-of-type{
	font-size:2em;
	font-weight:bold;
}

二.通用方法之获取下一个元素节点

function getNextElement(node){
	if(node.nodeType ==1){
		return node;
	}
	if(node.nextSibling){
		return getNextElement(node.nextSibling);
	}
	return null;
}

三.响应事件

CSS	DOM
:hover(连接< a >样式比较支持，且只有部分浏览器有效果)	onmouseover

四.class属性值追加(可用于通过javascript代码更新元素class属性直接改变某个元素的样式)

function addClass(element,value){
	if(!element.className){
		element.className=value;
	}else{
		let newClassName = element.className;
		newClassName+=" ";
		newClassName+=value;
		element.className = newClassName;
	}
}

javaScript特别擅长处理重复性任务！！！
对函数进行抽象

第十章_用JavaScript实现动画效果笔记

let variable = setTimeout("function",interval);// 延时执行
clearTimeout(variable);// 清除指定延时

parseInt(string);// 字符串转数值（整数）
parseFloat(string);// 字符串转浮点数

element.property = value;// 对element元素创建property属性，且对该属性赋值为value

Math.ceil(number);// 返回不小于number的值的最小整数
Math.floor(number);// 返回不大于number的值的值大整数
Math.round(number);// 四舍五入，取整数

添加安全检查
减少硬编码

第十一章_HTML5笔记

结构层超文本标记语言(HTML)
样式层层叠样式表(CSS)
行为层 JavaScript和文档对象模型(DOM)
HTML5新标记规范原文->HTML5新标记规范简体中文
 Modernizr工具
Canvas
音频和视频，参考链接，参考链接2

这章觉得挺受用的～可以看书，笔记就不过多记录

码农公寓