《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),它把给定父元素里的一个子节点替换为另外一个节点,并返回已经被替换的那个子节点.
