这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了。

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编程艺术(第二版)》读书总结的更多相关文章

  1. 高性能MySQL --- 读书笔记(1) - 2016/8/2

    此书不但帮助MySQL初学者提高使用技巧,更为有经验的MySQL DBA指出了开发高性能MySQL应用的途径.全书包括14章,内容覆盖MySQL系统架构.设计应用技巧.SQL语句优化.服务器性能调优. ...

  2. 高性能MySQL --- 读书笔记(2) - 2016/8/2

    第1章 MySQL架构 MySQL架构与其他数据库服务器大不相同,这使它能够适应广泛的应用.MySQL足够灵活,能适应高要求架构.例如Web应用,同时还适用于嵌入式应用.数据仓库.内容索引和分发软件. ...

  3. 高性能mysql读书笔记(一):Schema与数据类型优化

    4.5 加快ALTER TABLE 操作的速度 原理: MySQL 的ALTER TABLE 操作的性能对大表来说是个大问题. MySQL 执行大部分修改表结构操作的方法是用新的结构创建一个空表,从旧 ...

  4. 《高性能MySQL》读书笔记--锁、事务、隔离级别 转

    1.锁 为什么需要锁?因为数据库要解决并发控制问题.在同一时刻,可能会有多个客户端对表中同一行记录进行操作,比如有的在读取该行数据,其他的尝试去删除它.为了保证数据的一致性,数据库就要对这种并发操作进 ...

  5. 【高性能Mysql 】读书笔记(三)

    第5章 创建高性能的索引 本文为<高性能Mysql 第三版>第四章读书笔记,Mysql版本为5.5 索引基础 索引的重要性:找一本800面的书的某一段内容,没有目录也没有页码(页码也可类比 ...

  6. 【高性能Mysql 】读书笔记(二)

    第4章 Schema 与数据类型优化 本文为<高性能Mysql 第三版>第四章读书笔记,Mysql版本为5.5 选择优化的数据类型 选择合适数据类型的三个原则 更小的通常更好 - 速度更快 ...

  7. 《高性能MySQL》 读书总结

    目录: 第一章.MySQL架构与历史 第二章.MySQL基准测试 第三章.服务器性能剖析 第四章.Schema与数据类型优化 第五章.创建高性能的索引 第六章.查询性能优化 第七章.MySQL高级特性 ...

  8. 【高性能Mysql 】读书笔记(一)

    第1章 Mysql架构与历史 MYSQL最重要.最与众不同的特性是它的存储引擎架构,这种架构的设计将查询处理( Query Processing)及其他系统任务( Server Task)和数据的存储 ...

  9. 1121高性能MySQL之运行机制

    本文来自于拜读<高性能MySQL(第三版)>时的读书笔记作者:安明哲转载时请注明部分内容来自<高性能MySQL(第三版)> MySQL的逻辑构架 MySQL服务器逻辑架构 最上 ...

  10. 高性能mysql——高性能索引策略

    <高性能MySQL>读书笔记 一. 索引的优点 1. 索引可以让服务器快速定位到表的指定位置,大大减少了服务器需要扫描的数量: 2. 最常见的B-Tree索引按照顺序存储数据,可以用来做o ...

随机推荐

  1. EasyUI 中点击取消按钮关闭Dialog(对话框窗口)

    <div id="dl1" class="easyui-dialog" title="窗口"style="width:400 ...

  2. MySQL优化概述

    一. MySQL优化要点 MySQL优化是一门复杂的综合性技术,主要包括: 1 表的设计合理化(符合 3NF,必要时允许数据冗余) 2.1 SQL语句优化(以查询为主) 2.2 适当添加索引(主键索引 ...

  3. python对文件的操作

    一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法. 1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd() 2.返回指定目录下的所有文件 ...

  4. RPM包制作教程

    一.RPM介绍 RPM 前是Red Hat Package Manager 的缩写,本意是Red Hat 软件包管理,顾名思义是Red Hat 贡献出来的软件包管理:现在应为RPM Package M ...

  5. linux vsftpd 配置

    linux 使用vsftpd 实现ftp上传 安装 vsftpd yum install -y vsftpd 配置vsftpd 备份配置文件后 将/etc/vsftpd/vsftpd.conf内容替换 ...

  6. Ural 1010. Discrete Function

    1010. Discrete Function Time limit: 1.0 secondMemory limit: 64 MB There is a discrete function. It i ...

  7. CANopen学习——OSI模型复习

    CanOpen协议实现了物理层和数据链路层,OSI模型是完整的7层. OSI模型网络七层包括物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 物理层:提供信息传输的物理连接通道,包括使用的 ...

  8. Java面试宝典摘抄

    1,ClassLoader知识 加载流程:当运行一个程序时,JVM启动,运行bootstrap classloader,该classloader加载Java核心API(此时ExtClassLoader ...

  9. TFS 掩蔽或取消掩蔽工作区中的文件夹

    掩蔽或取消掩蔽工作区中的文件夹 使用掩蔽功能可以阻止用户查看指定的工作区文件夹或者您当前不需要的文件夹.当您在对一个公共父级下的两个或更多个分支中的文件进行操作时,就可以使用掩蔽功能来避免复制不必要的 ...

  10. 洛谷P1111 修复公路

    题目背景 A地区在地震过后,连接所有村庄的公路都造成了损坏而无法通车.政府派人修复这些公路. 题目描述 给出A地区的村庄数N,和公路数M,公路是双向的.并告诉你每条公路的连着哪两个村庄,并告诉你什么时 ...