《JavaScript DOM 编程艺术》（第二版）读书笔记（四）

时间：2021-11-28 17:51:31

第八章 充实文档内容

这一章主要是对之前DOM方法的应用，有几个需要注意的地方。

1.for/in 循环 

语法：for(variable in array){}

该循环可以用来遍历数组（也可以是对象），主要应用于下标不是数字的数组（或对象）

是数字的话，数组一般是for循环：for(var i=0;i<array.length;i++){}

2.关于节点

在编写DOM脚本时，我们理所当然的认为某个节点肯定是一个元素节点，但是如果没有把握，建议检查nodeType属性。

比如lastchild，我们往往会认为它获得的是元素节点，其实不一定，但是我们可以通过DOM方法编写一个lastChildElement方法

我们可以把“*”通配符作为参数传进getElementsByTagName(),获取全部的元素节点，再取最后一个元素节点，这样就可以保证获得最后一个元素节点。

 

第九章 CSS-DOM

style属性element.style.property

style包含着元素的样式，查询这个属性将返回一个对象而不是一个简单的字符串。

获取下一个元素节点的方法getNextElement()

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

className属性

element.className = value

利用这个属性的特点我们可以编写JQuery中的addClass函数(作者给出的代码很像JQuery中的方法)

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

 

第十章 用javascript实现动画效果

setTimeout("function",interval)

clearTimeout()

setTimeout能够让某个函数在经过一段时间之后才开始执行。这个函数带有两个参数:第一个参数通常是一个字符串，其内容是将要执行那个函数的名字；第二个参数是一个数值，它以毫秒为单位设定了需要经过多长时间以后才开始执行一个参数所给的函数。

一般把这个函数调用赋值给一个变量 variable = setTimeout("function",interval)

clearTimeout是取消某个正在排队等待执行的函数，这个方法需要一个参数：clearTimeout(variable)

moveElement()函数（该函数详解请查看原书，效果类似Jquery的animate）

function moveElement(elementID,final_x,final_y,interval){
    if(!document.getElementById) return false;
    if(!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if(xpos==final_x&&ypos==final_y){
        return true;
    }
    if(xpos<final_x){
        xpos++;
    }
    if(xpos>final_x){
        xpos--;
    }
    if(ypos<final_y){
        ypos++;
    }
    if(ypos>final_y){
        ypos--;
    }
    elem.style.left = xpos+"px";
    elem.style.top = ypos+"px";
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"
    movement= setTimeout(repeat,interval);
}

elementID:打算移动的元素的ID；final_x：该元素的目的地“左”位置；final_y：该元素的目的地“上”位置；interval：两次移动之间的停顿时间。

 

但demo在这里出现了问题，如果把鼠标指针在链接之间快速移动的话，动画效果将会变得很奇怪。

这是因为无论上次的动画效果有没有完成。都会再次调用movement。

以下是改进以后的movement

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.left){
        elem.style.left="0px";
    }    
    if(!elem.style.top){
        elem.style.top="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((xpos-final_x)/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((ypos-final_y)/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);
}

改进后的代码通过给elem添加属性和clearTimeout来解决动画滞后的问题。同时使动画过渡更平滑。

第十一章 HTML5

这章介绍了canvas，video，audio，form的一些新内容和新标签，书上给了几个示例，感觉比较高端，略过不提。。。。

第十二章 综合示例

这一章把之前的内容全部应用到，做了一个小的站点。有几点需要注意

@import url() ：这个css方法可以引入css样式。可以将几个CSS文件合并到一个CSS文件里面。

还有一个很重要的方法split()       语法：array = string.split(character)这个方法跟据character拆分字符串形成数组。

var color = "red,green,blue";
var array=color.split(",");//  ["red","green","blue"]

然后本章也没有什么可总结的

 

　　这本书的读书笔记就写到这，感觉做得不是很好，我也不是很清楚如何才能简略的概括书上的内容，最后一章的内容使用了前面的全部内容，只加了一点不严格表单验证和一些平稳退化的表单效果，感觉意义不是很大。AJAX内容在本书也并没有仔细介绍，感觉还需要看其他书提高。总之这本书是一本优秀的入门书籍，可以说是它激起了我学习javascript的兴趣。如果能跟着书上代码一行行敲， 收获会很大。

　　下一本书是《JavaScript高级程序设计》（第三版），这本书简直博大精深。。。。。表示总结起来好难，有空会把一些重要的方法总结上来的。

 

标签：

相关文章