码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-03-08 15:26:36      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:

第八章 充实文档内容

这一章主要是对之前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:两次移动之间的停顿时间。

 

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

标签:

原文地址:http://www.cnblogs.com/cz-parallel-space/p/4307140.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!