许多年以前,当我们的网页变得美观起来的时候,HTML也相应的臃肿了起来。
CSS的出现和发展,使得我们终于可以把HTML变得干净了。class,id也取代了font,color等标签的属性,几乎所有的美化我们都可以通过CSS来进行。
但是HTML和CSS的蜜月被JS破坏了。为了使页面交互能力更强,我们不得不在许多HTML标签里使用οnclick=”func()”,οnmοuseοver=”func();”这样的东西。例如yahoo首页,如果你查看它的HTML源代码,你将会发现很多onclick这样的东西。如果我想知道一个元素中的HTML代码(innerHTML), 我不得不这样写
<span id="t1"> <a href="http://www.surfchen.org" onClick="alert(this.innerHTML);return false;">点我</a> <a href="http://www.surfchen.org" onClick="alert(this.innerHTML);return false;">再点这个</a> </span>或许,有经验地js程序员会这样处理。
<span id="t1"> <a href="http://www.surfchen.org">点我</a> <a href="http://www.surfchen.org">再点这个</a> </span> <script type="text/javascript"> <!-- for (i=0;c=document.getElementById("t1").getElementsByTagName("a").item(i);i++ ) { c.οnclick=function(){ alert(this.innerHTML); return false; } } //--> </script>这样就让HTML代码美观好多了,但是有个缺点,就是for 语句必须放在HTML元素之后。。
更加高明一点的程序员会把这个for放在函数里,然后在window.onload调用该函数。这样可以使得不用在HTML元素输出后再写这个for.
<script type="text/javascript"> <!-- var js_style={ '#t1 a':function(e)//指明了行为对象为id=t1下的所有a元素,e为当前的元素对象 { e.οnclick=function()//给当前对象加上onclick事件 { alert(this.innerHTML); return false; } },//这里用个逗号 '#t2 a':function(e)//指明了行为对象为id=t1下的所有a元素,e为当前的元素对象 { e.οnclick=function()//给当前对象加上onclick事件 { alert(this.innerHTML); return false; } } } Behaviour.register(js_style);//注册上面的“js样式” //--> </script> <span id="t1"> <a href="http://www.surfchen.org">点我</a> <a href="http://www.surfchen.org">再点这个</a> </span> <span id="t2"> <a href="http://www.surfchen.org">点我</a> <a href="http://www.surfchen.org">再点这个</a> </span>转自:http://www.surfchen.org/?p=59