帮我加注释js谢谢,我要明白每句的意思

<scripttype=text/javascript><!--//--><![CDATA[//><!--functionmenuFix(){varsfEls=docum... <script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"");
}
}
}
window.onload=menuFix;

//--><!]]></script>
展开
 我来答
cmoooo
2014-05-06 · TA获得超过3587个赞
知道小有建树答主
回答量:741
采纳率:0%
帮助的人:658万
展开全部

首先,这段程序应该是给一组父元素ID为”nav"的<ol>或<ul>标签下所有<li>标签进行事件赋值的程序。


而这段程序会实现的是当鼠标划过、鼠标按下、鼠标抬起、鼠标移出这四个操作时对li元素的class属性进行更改,从而达到一个按钮动画的效果。


下面是单行的注解:

<script type=text/javascript><!--//--><![CDATA[//><!--
//CDATA是禁止XML解析器解析这段JS文本的内容。

function menuFix() {
//建立menuFix,从方法名称上可以看出,这是一个菜单处理程序片段

 var sfEls = document.getElementById("nav").getElementsByTagName("li");
 //设置一个变量,这个变量存储的是ID为nav的元素下所有li标签的集合
 //document.getElementById("nav")是获取ID为nav的标签
 //getElementsByTagName("li")是获取所有li标签集合,得到的是一个DOMList对象
 
 for (var i=0; i<sfEls.length; i++) {
 //遍历所有的li标签
 //sfEls是那个DOMList对象,它的length是这个DOMList的总长
 
  sfEls[i].onmouseover=function() {
  //将LI标签设置一个鼠标划过事件
  
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  //? : 这是一个三元运算符,是一种用于判断的一种语法结构
  //指的是当前这个LI标签是否存在Class属性的值,如果存在就加上一个空格,再加上“sfhover”字符串,否则的话就只加上“sfhover”
  //这是为了防止新的class属性将原有的class覆盖掉的一种很好的兼容性做法
  //其中的ClassName就是JS中表示的li标签的的class属性
  //而其中的this,就是sfEls[i],也就是当前鼠标正在触发事件的Li标签
  
  }
  sfEls[i].onMouseDown=function() {
  //鼠标按下事件
  
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  //同上
  
  }
  sfEls[i].onMouseUp=function() {
  //鼠标抬起事件
  
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  //同上
  
  }
  sfEls[i].onmouseout=function() {
  //鼠标移出事件
  
  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
  //这里有点复杂了,这里引用了一个正则表达式
  //正则表达式中( ?|^)是指这个字符串前台是一个空格,还是字符串的开始
  //sfhover当然就是它后填加进去的那个class属性值了
  //\\b是指单词的结尾
  //new RegExp("( ?|^)sfhover\\b" 这句话也就是找到新添加起去的那个名为“sfhover”的属性,如果它前面有空格也一同包括在内
  //replace()方法是替换的意思

"");
//这一行有点那啥了,它属于上一行replace方法,是replace方法的第二参数
  }
 }
}
window.onload=menuFix;
//这个就是在整个文档在浏览器中加载完成之后,就执行那个menuFix()的function,有了它,这段JS程序放在文档中的任何位置都是可以的。


这段程序也不知道为什么,写得有点儿啰嗦,而且如果用户一直不地在这个li标签上点击,却从来不移出,就会不停地给这个li元素加sfhover属性,不停地加呀加!


当然没谁这么无聊,但也是一个BUG


而且,由于鼠标按下和鼠标抬起事件与鼠标划过事件所添加的class属性都是一致的,也就是相同的,那么鼠标按下和鼠标抬起这两个事件完全可以省略掉不要。


当然也可以加其它的属性值,以达到鼠标按下和鼠标抬起还有不同的效果。


好了,解释到这里也算是非常非常的仔细了,如果你还是不明白的话,你需要恶补一下JS的基础知识了。

c593508894
2014-05-06 · 超过30用户采纳过TA的回答
知道答主
回答量:85
采纳率:0%
帮助的人:48万
展开全部
这应该是一个鼠标悬停显示其下拉列表的js吧 当鼠标移动这位置时候显示出nav>li标签下的东西,同时还有样式 我看着这段js是这样的,不知道是否
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式