《Javascript DOM 编程艺术》

JS中数组的批量填充方式:

1.在声明时同时进行填充

var beatles = Array("John","Paul","George","Ringo");

2.我们甚至用不着明确地表明我们是在创建数组.事实上,只需用一堆方括号括起来就足以创建我们想要的数组了:

var beatles = ["John","Paul","George","Ringo"];

JS中的关联数组

:JS中数组下标并不局限于整数.数组下标可以是字符串:

var lennon = Array();

lennon["name"]="John";

lennon["year"]="1940";

把一个对象用作一个联合数组

a = {a : "Athens" , b : "Belgrade", c : "Cairo"}

从某种意义上讲,完全可以吧所有的数组都看做是关联数组.数值数组只不过是关联数组的一种特例.

JScript 中的数组是稀疏的。

也就是说，如果一个数组具有三个元素，编号分别为 0、1 和 2，您就可以创建元素 50，而不必担心从 3 到 49 的参数。如果该数组有一个自动的 length 变量，，该 length 变量被设为 51，而不是 4。当然您可以创建各元素的编号之间没有间隙的数组，不过没有必要这样做。

在 JScript 中，对象和数组几乎相同。两个主要差别是对象没有自动长度属性，而数组没有对象的属性和方法。

CSS层叠样式表定义方式:

<p class="special">This<p>

<h2 class="special">So<h2>

1.在样式表里,我们可以像下面这样为class属性值相同的所有元素定义一种共享的样式:

.special{

font-style: italic;

}

// spical为class id

2.我们还可以像下面这样利用class的属性为一种特定类型的元素定义一种独享的样式:

h2.spical{

text-tansform:uppercase;

}

// spical为class id

3.id属性的用途是给网页里的某个元素加上一个独一无二的标识符

<ul id="purchase">

在样式表里我们可以像下面这样为有着特定id属性值的元素定义一种独享的样式:

#purchase{

border:1px;

color:#CCC;

}

4.我们还可以像下面这样利用ID属性为包含在某给定怨毒里的其他元素定义样式,如此定义的样式将只作用于包含在这个给定元素里的有关元素

#purchase li{

font-weight:bold;

}

getElementByTagName使用通配符("*")

document.getElementByTagName("*");//这种方式可以取到文档中所有的元素节点.

如果在onclick事件所触发的Javascript中增加一条return false的话,则可以阻止对事件的进一步处理,阻止链接跳转.

<a href="#" onclick="alert();return false;">firefox</a>

"javascript:"伪协议

可以通过在地址栏输入伪协议来进行调试:javascript:debugger

;

也可以再HTML文档中通过"javascript:"伪协议调用Javascript代码(该种做法并不规范,且语义不清晰,所以也不建议使用):<a href="javascript:alert();">alert</a>

每个函数只有一个入口一个出口

?

理论上该原则比较好,不过过分拘泥于原则往往会使代码变得难于阅读.

同一个函数有多个出口点的情况是可以接受的.不过他们应该集中于该函数的开头部分

function pre(){

if(!document.getElementById) return false;

}

document.write(),innerHtml破坏了js与html分离的原则,应尽量避免使用

insertBefore

previousSibling和nextSibling 兄弟节点取得

for...in 语句:它可以把某个数组的下标(键字)临时地赋值给一个变量,因此可以直接将对象当做联合数组处理

// 初始化对象。

a = {"a" : "Athens" , "b" : "Belgrade", "c" : "Cairo"}

// 迭代属性。

for (key in a) {

s += a[key] ;

}

Title属性:

The Title attribute is similar to the standard HTML Title attribute. The behavior of a title is similar to a Microsoft Windows ToolTip.

使用DOM设置表格交替颜色(斑马线)(ie8不支持exprssion了,现在不能用css中的expression了,呵呵

)

function(){

var tables = document.getElementsByTagName("table");

for(var i = 0; i < tables.length; i++)

{

var odd = false;

var rows = tables[i].getElementsByTagName("tr");

for(var j = 0; j < rows.length; j++)

{

if(odd == true)

{

row[j].style.backgroundColor = "#ffc";

odd = false;

}

else

{

odd = true;

}

}

}

}

CSS中的"追加"效果:

利用字符串拼接操作把新的class设置值追加到className上去(注意,两个class之间有空格分隔),如此便实现了样式叠加,新样式中的定义将在旧样式的基础上产生效果.

elem.className += " intro";

不过空格只有存在旧className属性的基础上才有必要,所以需要先对className进行判断,只有在className属性不为null的时候才需要追加,否则直接赋值.

利用下面的函数实现控件的鼠标跟随(由于控件将以像素为单位来移动,所以动画效果较好)

function moveElement(elementID,final_x,final_y,interval)

{

if(!document.getElementById(elementID)) return false;

var elem = document.getElemenById(elementID);

if(elem.movement)

{

clearTimeout(elem.movement);

elem.movement = null;

}

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.syle.left = xpos + "px";

elem.syle.top = ytop + "px";

var repeat = "moveElement(" + "'" + elementID + "','" + final_x + "','" + final_y + " '" +")";

element.movement= setTimeOut(repeat, interval);

}

DOM复制节点的方法:cloneNode(deep),这个方法只有一个布尔型的参数,它决定着是否要把被复制节点的子节点也一同复制到新建节点里去.

DOM提供了一个用来替换文档树里的节点的方法:replaceChild(newChild, oldChild),它把给定父元素里的一个子节点替换为另外一个节点,并返回已经被替换的那个子节点.