目标：
1.使用style属性制作菜单特效；
2.使用className属性制作菜单特效；
3.使用scrollTop制作随鼠标滚动的广告图片；
一、通过js修改元素的样式
<style> .va{border:1px solid #c00;} .vb{border:0;} </style> <script type="text/javascript"> function mya(obj){ obj.className="va"; } function myb(obj){ obj.className="vb"; } </script> <body> <div οnmοuseοver="mya(this)" οnmοuseοut="myb(this)"></div> </body>
二、js菜单
1.写好样式；
2.写好函数；
3.不同事件调用不同函数。
当有很多行代码相同时，例如：
<li οnmοuseοver="mya(this)" οnmοuseοut="myb(this)">第一行</li> <li οnmοuseοver="mya(this)" οnmοuseοut="myb(this)">第二行</li> <li οnmοuseοver="mya(this)" οnmοuseοut="myb(this)">第三行</li> ……
以上代码相同的，相同的<li> 和事件
JS简化写思路：
1.获得<li>标签对象集合
2.循环集合中的对象，对象.事件=function(){}
代码：
var arr=document.getElementByTagName("li"); for(var i=0; i<arr.length; i++){ arr[i].className="vb"; arr[i].οnmοuseοver=function(){ this.className="va"; }; arr[i].οnmοuseοut=function(){ this.className="vb"; } }
三、图片跟随滚动条
获取类样式的方法：
currentStyle
getComputedStyle()
网页的三维：x,y,z
层的浮动：position:absolute;
top:20px;
left:20px;
right:20px;
bottom:20px;
滚动事件：
currentStyle
//得到当前样式
currentStyle.top //当前与top
与top的距离
与left的距离
scrollTop滚动距离
<script type="text/javascript"> var va; var vb; //得到ID的位置 function myload(){ var da=document.getElementById("id"); va=da.currentStyle.top; vb=da.currentStyle.left; alert(va+" "+vb); } //得到滚动 function mymove(){ var ga=document.documentElement.scrollTop; var gb=document.documentElement.scrollLeft; alert(ga+" "+gb); }
//window滚动事件
window.οnscrοll=mymove;
</script>
<body οnlοad="myload()">
…
正则：
数字：\d [0-9]
除了abc以外的字符：[^abc]
合法字符：\w [0-9a-zA-Z_]
空格：\s
.:除了\n以外的任意字符
点:\.
[a-g]{2,5} a-g中出现2-5次 例如：aaaaa
abc+ c至少出现1次
+:至少出现1次
?:0次或者1次
-:连字符
*:任意次
|:或者
