帮我加注释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> 展开
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> 展开
展开全部
首先,这段程序应该是给一组父元素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的基础知识了。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询