《JavaScript DOM编程艺术(第二版)》读书总结
这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了。
1.DOM即document object model的缩写,文档对象模型,JavaScript做的就是对DOM的操作,或者说对节点(node)的操作。
2.js中DOM、this这是都是对象,有属性有方法。
3.document对象有body属性,所以可以直接写成document.body,无需再获取body元素(document.getElementsByTagName("body")[0]),createElement创建出来的节点也是一个对象。
4.取得当前页面的URL,window.location.href。
5.循环、判断不会形成作用域,只有函数才会形成,比如说下面这个代码:
function fn(){
if(1==1){
alert(1)
return false
alert(2)
}
alert(3)
}
fn()
以前认为1和3都会弹出,其实不是,这里只会弹出1,虽然if语句中有大括号{ },但它不会有形成作用域的作用,只有函数才会形成,所以在函数fn里return false后面的代码都不会被执行。
6.书中四个比较有用的原生js函数。
①我们都知道如果在body元素前加入script标签引入js,那么就必须写上:
window.onload= function (){
}
意思是等文档结构加载完毕再加载这个函数里面的代码,不然就无法获取DOM元素。书中给了另外一种不写这个函数的方法,将要执行的函数当做addLoadEvent函数的参数即可 :
//onload事件共享函数
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload !="function"){
window.onload=func;
}else{
window.onload = function (){
oldonload();
func();
}
}
}
②原生js没有提供insertAfter方法,只有insertBefore方法,封装insertAfter函数,参数是DOM对象:
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
③动画函数
//动画函数
function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false;
var elem=document.getElementById(elementID);
if(elem.movement){
clearTimeout(elem.movement);
}
if(!elem.style.top){
elem.style.top = "0px"
}
if(!elem.style.left){
elem.style.left = "0px"
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
var dist = 0;
if(xpos == final_x && ypos == final_y){
return true;
}
if(xpos < final_x){
dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if(xpos > final_x){
dist = Math.ceil((final_x - xpos)/10);
xpos = xpos - dist;
}
if(ypos < final_y){
dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if(ypos > final_y){
dist = Math.ceil((final_y - ypos)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
用法如: moveElement("div",300,300,20),第一个参数元素id,第二个第三个参数是元素最终的位置,第四个参数是时间间距。
④给一个元素添加类名的函数
//添加类名addClass函数
function addClass(element,value){
if(!element.className){
element.className = value;
}else{
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
一同事看我读这本书,总是对我讲“看书没有用,你还是会忘记的”,我其实听他说这话好几次挺烦的,我没有反驳他,我觉得这种话题真的不值得我去反驳。
《JavaScript DOM编程艺术(第二版)》读书总结的更多相关文章
- 高性能MySQL --- 读书笔记(1) - 2016/8/2
此书不但帮助MySQL初学者提高使用技巧,更为有经验的MySQL DBA指出了开发高性能MySQL应用的途径.全书包括14章,内容覆盖MySQL系统架构.设计应用技巧.SQL语句优化.服务器性能调优. ...
- 高性能MySQL --- 读书笔记(2) - 2016/8/2
第1章 MySQL架构 MySQL架构与其他数据库服务器大不相同,这使它能够适应广泛的应用.MySQL足够灵活,能适应高要求架构.例如Web应用,同时还适用于嵌入式应用.数据仓库.内容索引和分发软件. ...
- 高性能mysql读书笔记(一):Schema与数据类型优化
4.5 加快ALTER TABLE 操作的速度 原理: MySQL 的ALTER TABLE 操作的性能对大表来说是个大问题. MySQL 执行大部分修改表结构操作的方法是用新的结构创建一个空表,从旧 ...
- 《高性能MySQL》读书笔记--锁、事务、隔离级别 转
1.锁 为什么需要锁?因为数据库要解决并发控制问题.在同一时刻,可能会有多个客户端对表中同一行记录进行操作,比如有的在读取该行数据,其他的尝试去删除它.为了保证数据的一致性,数据库就要对这种并发操作进 ...
- 【高性能Mysql 】读书笔记(三)
第5章 创建高性能的索引 本文为<高性能Mysql 第三版>第四章读书笔记,Mysql版本为5.5 索引基础 索引的重要性:找一本800面的书的某一段内容,没有目录也没有页码(页码也可类比 ...
- 【高性能Mysql 】读书笔记(二)
第4章 Schema 与数据类型优化 本文为<高性能Mysql 第三版>第四章读书笔记,Mysql版本为5.5 选择优化的数据类型 选择合适数据类型的三个原则 更小的通常更好 - 速度更快 ...
- 《高性能MySQL》 读书总结
目录: 第一章.MySQL架构与历史 第二章.MySQL基准测试 第三章.服务器性能剖析 第四章.Schema与数据类型优化 第五章.创建高性能的索引 第六章.查询性能优化 第七章.MySQL高级特性 ...
- 【高性能Mysql 】读书笔记(一)
第1章 Mysql架构与历史 MYSQL最重要.最与众不同的特性是它的存储引擎架构,这种架构的设计将查询处理( Query Processing)及其他系统任务( Server Task)和数据的存储 ...
- 1121高性能MySQL之运行机制
本文来自于拜读<高性能MySQL(第三版)>时的读书笔记作者:安明哲转载时请注明部分内容来自<高性能MySQL(第三版)> MySQL的逻辑构架 MySQL服务器逻辑架构 最上 ...
- 高性能mysql——高性能索引策略
<高性能MySQL>读书笔记 一. 索引的优点 1. 索引可以让服务器快速定位到表的指定位置,大大减少了服务器需要扫描的数量: 2. 最常见的B-Tree索引按照顺序存储数据,可以用来做o ...
随机推荐
- URL无法显示某些特殊符号
URL无法显示某些特殊符号,这个时候就要使用编码了.编码的格式为:一个百分号,后面跟对应字符的ASCII(16进制)码值.例如 空格的编码值是"%20".(ASCII参考)URL中 ...
- IE8 ajax缓存问题
娘希匹,又遇到缓存问题了. 下面的代码,在其他浏览器都是正常的,但是在IE8中出现诡异问题. $.ajax({ url:dataUrl, data:encodeURI(currentjsonform) ...
- mac xcode c++ cin cout注意细节一
#include <iostream> using namespace std; 要同时存在 要不然std命名空间无法生效
- gitlab备份及迁移
Gitlab 创建备份 使用Gitlab一键安装包安装Gitlab非常简单, 同样的备份恢复与迁移也非常简单. 使用一条命令即可创建完整的Gitlab备份: gitlab-rake gitlab:ba ...
- ASP.NET全局错误处理和异常日志记录以及IIS配置自定义错误页面
应用场景和使用目的 很多时候,我们在访问页面的时候,由于程序异常.系统崩溃会导致出现黄页.在通常的情况下,黄页对于我们来说,帮助是极大的,因为它可以帮助我们知道问题根源,甚至是哪一行代码出现了错误.但 ...
- [WPF系列]-数据邦定之DataTemplate 对分层数据的支持
到目前为止,我们仅讨论如何绑定和显示单个集合. 某些时候,您要绑定的集合包含其他集合. HierarchicalDataTemplate 类专用于 HeaderedItemsControl 类型以显示 ...
- Chrome插件: 网站收藏
在工作中我们会收藏很多网址.以前一直都是用的chrome里面的收藏夹.后面觉得一点都不方便.看一下Chrome插件开发挺容易入手的所以自己写了一个Chrome插件. 基于:Angularjs + ...
- 虚拟机linux上网问题
VMware中虚拟机网络的三种设置 1.桥接(bridged)(设置上网比较繁琐,但是在嵌入式开发中比较有用)2.NAT(上网比较简单,但是不能用于嵌入式开发中)3.Host only (该模式下仅主 ...
- Tomjson - 一个"短小精悍"的 json 解析库
Tomjson,一个"短小精悍"的 json 解析库,tomjson使用Java语言编写,主要作用是把Java对象(JavaBean)序列化为json格式字符串,将json格式字符 ...
- VR(虚拟现实)开发资源汇总
Daydream https://developers.google.cn googlevr Google VR for Android GVR SDK and NDK Release Notes c ...