+ -
当前位置:首页 → 问答吧 → 我对下面的javascript函数不懂,哪为大师讲讲

我对下面的javascript函数不懂,哪为大师讲讲

时间:2010-05-06

来源:互联网

<script type="text/javascript"> //(这个不用讲了)
//<![CDATA[
       function tab(id, tag, cla, timeout){  //定义一个tab函数
              this.id = this.get(id);  //定义tab函数一个属性id,并把 id值付给 this.id
              if(this.id == null)return alert(id+'不存在!'); //(这个不用讲了)
              this.tags = this.id.getElementsByTagName(tag); //这个不懂
              this.style = cla;//定义tab函数一个属性style,并把 cla值付给 this.style
              this.timeout = timeout || 300; //这个||不懂
              this.tab = this.curTab = null; //这个不懂
              for(var i=this.tags.length; i--; ){ //this.tags.length不懂
                     if(this.tags[i].className != this.style[0] && this.tags[i].className != this.style[1])continue;
                     this.tags[i]['Index'] = i+1;
                     this.tags[i]['instance'] = this;
                     this.tags[i].onmouseover = this.tagOver;
                     this.tags[i].onmouseout = this.tagOut;
                     if(this.tags[i].className == this.style[0])this.curTab = this.tags[i];
              }
       }
       tab.prototype = {
              get : function(id){  //定义get方法
                     return document.getElementById(id);
              },
              active : function(o){ //定义active方法

                     if(this.curTab == o)return;
                     var _this = this;
                     this.tab = setTimeout(function(){
                            (function(){
                                   if(this.curTab){
                                          this.curTab.className = this.style[1];
                                          this.get(this.id.id + '_' + this.curTab['Index']).style.display = 'none';
                                   }
                                   o.className = this.style[0];
                                   this.get(this.id.id + '_' + o['Index']).style.display = '';
                                   this.curTab = o;
                                   o = null;
                            }).call(_this);
                     }, this.timeout);
              },
              tagOver : function(){
                     this['instance'].active(this);
              },
              tagOut : function(){
                     clearTimeout(this['instance'].tab);
              }
       }
       new tab('tab1', 'li', ['over', ''], 500);
       new tab('tab2', 'li', ['over', ''], 200);
       new tab('tab3', 'li', ['over', '']);
//]]>
</script>(这个不用讲了)

作者: sevenu   发布时间: 2010-05-06

this.tags = this.id.getElementsByTagName(tag); //给当前对象的属性tags定义,定义为当前对象下所有标签为传入参数tag的值 的一个数组。
this.timeout = timeout || 300; //给当前对象增加个 timeout属性,如果传入的参数timeout不存在,那么默认就是300

this.tab = this.curTab = null;  //给当前对象增加个 tab属性,和curTab属性,并设定默认值为null
for(var i=this.tags.length; i--; ){ //遍历对象的属性tags。。。这是个数组嘛。

整个这个东西应该是 定义了一个 叫做tab 的class,并且在构造函数中初始化了一些属性,并且在最后写了几个方法。

[ 本帖最后由 isayno 于 2010-5-6 16:02 编辑 ]

作者: isayno   发布时间: 2010-05-06

this.tags = this.id.getElementsByTagName(tag); //这个不懂
getElementsByTagName 根据tagname获得dom对象 返回的是数组

this.timeout = timeout || 300; //这个||不懂
|| 或运算符  只有在第一个条件为false的情况下 才执行第二个条件
等价于 if(timeout ) this.timeout=timeout ;
      else this.timeout=300;

this.tab = this.curTab = null; //这个不懂
等价于 this.tab=null;
       this.curTab = null;

for(var i=this.tags.length; i--; ){ //this.tags.length不懂
前面说了this.tags是个数组

作者: jiangliuhuo   发布时间: 2010-05-06