求解这段函数selfOpt||{}是什么意思？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>兼容各种浏览器的的选项卡菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
#tab_container1 {
    width:600px;
    text-align:left;
}
.cls_tab_nav {
    height:26px;
    overflow:hidden;
    font-size:12px;
    text-align:left;
    border-bottom:1px solid #FFAE1E;
}
.cls_tab_nav ul {
    font-size:9pt;
    margin:0;
    padding:0;
}
.cls_tab_nav_li {
    border:1px solid #FFAE1E;
    background:#fff000;
    width:157px;
    height:26px;
    line-height:26px;
    float:left;
    display:inline;
    overflow:hidden;
    text-align:center;
    cursor:pointer;
    margin-right:10px;
}
.cls_tab_nav_li_first {
    background-position:0px 0px;
}
.cls_tab_nav_li a {
    text-decoration:none;
    color:#555;
    font-size:12px;
}
.cls_tab_body {
    border:1px solid #FFAE1E;
    border-top:none;
    min-height:260px;
    padding:20px;
}
.cls_div {
    display:none;
    font-size:14px;
}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="tab_container1">
  <div class="cls_tab_nav">
    <ul>
      <li class="cls_tab_nav_li cls_tab_nav_li_first"><a href="#">最新更新</a></li>
      <li class="cls_tab_nav_li"><a href="#">ASP类最新更新</a></li>
      <li class="cls_tab_nav_li"><a href="#">C#类最新更新</a></li>
    </ul>
  </div>
  <div class="cls_tab_body">
    <div class="cls_div" style="display:block;">这里是最新更新的显示内容</div>
    <div class="cls_div">ASP的显示内容</div>
    <div class="cls_div">C#的显示内容</div>
  </div>
</div>
<script type="text/javascript">
try
{
document.execCommand("BackgroundImageCache", false, true);
}
catch(e){}
function $(element)
{
if(arguments.length>1)
{
for(var i=0,elements=[],length=arguments.length;i<length;i++)
elements.push($(arguments[i]));
return elements;
}
if(typeof element=="string")
return document.getElementById(element);
else
return element;
}var Class=
{
create:function()
{
return function()
{
this.initialize.apply(this,arguments);
}
}
}
Object.extend=function(destination,source)
{
for(var property in source)
{
  destination[property]=source[property];
}
return destination;
}var tabMenu=Class.create();tabMenu.prototype=
{
initialize:function(container,selfOpt,otherOpt)
{
this.container=$(container);
     var selfOptions=Object.extend({fontWeight:"bold",fontSize:"12px",color:"#FFBC44"},selfOpt||{});
var otherOptions=Object.extend({fontWeight:"normal",fontSize:"12px",color:"#666"},otherOpt||{});
//用for循环得到objs数组,主要是为了兼容非IE浏览器把空白也当作子对象
   for(var i=0,length=this.container.childNodes.length,objs=[];i<length;i++)
{
if(this.container.childNodes[i].nodeType==1)
     objs.push(this.container.childNodes[i]);
}
var tabArray=objs[0].getElementsByTagName("li");
   //用for循环得到divArray数组,主要是为了兼容非IE浏览器把空白也当作子对象
   var divArray=new Array();
   for(i=0,length=objs[1].childNodes.length;i<length;i++)
{
if(objs[1].childNodes[i].nodeType==1)
divArray.push(objs[1].childNodes[i]);
}
   for(i=0,length=tabArray.length;i<length;i++)
{
tabArray[i].length=length;
tabArray[i].index=i;
tabArray[i].onmouseover=function()
    {
//其它选项卡样式设置
for(var j=0;j<this.length;j++)
{
tabArray[j].style.backgroundPosition="-"+tabArray[j].offsetWidth+"px 0";
for(var property in selfOptions)
{
tabArray[j].firstChild.style[property]=otherOptions[property];
}
}
     //当前选项卡样式
this.style.backgroundPosition="0 0";
for(var property in selfOptions)
{
this.firstChild.style[property]=selfOptions[property];
 /*
  注意this.style.property和selfOptions.property的用法错误
  style.fontWeight正确
  style["fontWeight"]正确
  style["font-weight"]错误
 */
}
     //隐藏其它选项卡
for(j=0;j<this.length;j++)
{
divArray[j].style.display="none";
}
     //显示当前选项卡
     divArray[this.index].style["display"]="block";
}
}
}
}
var tab1=new tabMenu("tab_container1",{fontSize:"14px",color:"#FFBC44",fontWeight:"bold"},{fontWeight:"normal",color:"#666"});
</script>
</body>
</html>

解决方案 »

  1.   

    Object.extend=function(destination,source) {     for(var property in source)     {       destination[property]=source[property];     }     return destination; } 这句也有点看不明白，外加问一下这里的for循环作用。
      

  2.   

    selfOpt||{}
    其实就是
    var selfOptions;
    if(selfOpt){
        selfOptions = selfOpt;
    }else{
        selfOptions = {};
    }Object.extend这是一个拷贝方法，把source里面的成员拷贝到destination，达到类似继承的效果。
    这个是浅拷贝。
      

  3.   

    Object.extend 浅复制
    将 object2的所有key--value　复制到object1.var selfOptions=Object.extend({fontWeight:"bold",fontSize:"12px",color:"#FFBC44"},selfOpt||{});前面{...}是默认参数，selfOpt是你输入的参数，Object.extend将你输入的参数覆盖默认参数。selfOpt||{}是指selfOpt为null，也就是你不输入时用后一个值。
    相当于
    if(selfOpt==null ||selfOpt==undefined) selfOpt={};
      

  4.   

    tabArray[i].onmouseover=function()
        {
    //其它选项卡样式设置
    for(var j=0;j<this.length;j++)
    {
    tabArray[j].style.backgroundPosition="-"+tabArray[j].offsetWidth+"px 0";
    for(var property in selfOptions)
    {
    tabArray[j].firstChild.style[property]=otherOptions[property];
    }
    }
         //当前选项卡样式
    this.style.backgroundPosition="0 0";
    for(var property in selfOptions)
    {
    this.firstChild.style[property]=selfOptions[property];
     /*
      注意this.style.property和selfOptions.property的用法错误
      style.fontWeight正确
      style["fontWeight"]正确
      style["font-weight"]错误
     */
    }


         //隐藏其它选项卡
    for(j=0;j<this.length;j++)
    {
    divArray[j].style.display="none";
    }
         //显示当前选项卡
         divArray[this.index].style["display"]="block";
    }问一下这个鼠标移动里的for循环函数在这段代码中是不是没有作用还有这里的变量j是不是也没有作用
      

  5.   


    有用，它遍历tabArray ， divArray里面的元素用的
      

  6.   

    那串代码在http://js.clicki.cc/美化后得到(function(d, D, v) {
        d.fn.responsiveSlides = function(h) {
            var b = d.extend({
                auto: !0,
                speed: 1E3,
                timeout: 7E3,
                pager: !1,
                nav: !1,
                random: !1,
                pause: !1,
                pauseControls: !1,
                prevText: "Previous",
                nextText: "Next",
                maxwidth: "",
                controls: "",
                namespace: "rslides",
                before: function() {},
                after: function() {}
            },
            h);
            return this.each(function() {
                v++;
                var e = d(this),
                n,
                p,
                i,
                k,
                l,
                m = 0,
                f = e.children(),
                w = f.size(),
                q = parseFloat(b.speed),
                x = parseFloat(b.timeout),
                r = parseFloat(b.maxwidth),
                c = b.namespace,
                g = c + v,
                y = c + "_nav " + g + "_nav",
                s = c + "_here",
                j = g + "_on",
                z = g + "_s",
                o = d("<ul class='" + c + "_tabs " + g + "_tabs' />"),
                A = {
                    "float": "left",
                    position: "relative"
                },
                E = {
                    "float": "none",
                    position: "absolute"
                },
                t = function(a) {
                    b.before();
                    f.stop().fadeOut(q, 
                    function() {
                        d(this).removeClass(j).css(E)
                    }).eq(a).fadeIn(q, 
                    function() {
                        d(this).addClass(j).css(A);
                        b.after();
                        m = a
                    })
                };
                b.random && (f.sort(function() {
                    return Math.round(Math.random()) - 0.5
                }), e.empty().append(f));
                f.each(function(a) {
                    this.id = z + a
                });
                e.addClass(c + " " + g);
                h && h.maxwidth && e.css("max-width", r);
                f.hide().eq(0).addClass(j).css(A).show();
                if (1 < 
                f.size()) {
                    if (x < q + 100) return;
                    if (b.pager) {
                        var u = [];
                        f.each(function(a) {
                            a = a + 1;
                            u = u + ("<li><a href='#' class='" + z + a + "'>" + a + "</a></li>")
                        });
                        o.append(u);
                        l = o.find("a");
                        h.controls ? d(b.controls).append(o) : e.after(o);
                        n = function(a) {
                            l.closest("li").removeClass(s).eq(a).addClass(s)
                        }
                    }
                    b.auto && (p = function() {
                        k = setInterval(function() {
                            var a = m + 1 < w ? m + 1: 0;
                            b.pager && n(a);
                            t(a)
                        },
                        x)
                    },
                    p());
                    i = function() {
                        if (b.auto) {
                            clearInterval(k);
                            p()
                        }
                    };
                    b.pause && e.hover(function() {
                        clearInterval(k)
                    },
                    function() {
                        i()
                    });
                    b.pager && (l.bind("click", 
                    function(a) {
                        a.preventDefault();
                        b.pauseControls || i();
                        a = l.index(this);
                        if (! (m === a || d("." + j + ":animated").length)) {
                            n(a);
                            t(a)
                        }
                    }).eq(0).closest("li").addClass(s), b.pauseControls && l.hover(function() {
                        clearInterval(k)
                    },
                    function() {
                        i()
                    }));
                    if (b.nav) {
                        c = "<a href='#' class='" + y + " prev'>" + b.prevText + "</a><a href='#' class='" + y + " next'>" + b.nextText + "</a>";
                        h.controls ? d(b.controls).append(c) : e.after(c);
                        var c = d("." + g + "_nav"),
                        B = d("." + g + "_nav.prev");
                        c.bind("click", 
                        function(a) {
                            a.preventDefault();
                            if (!d("." + j + ":animated").length) {
                                var c = f.index(d("." + j)),
                                a = c - 1,
                                c = c + 1 < w ? m + 1: 0;
                                t(d(this)[0] === B[0] ? a: c);
                                b.pager && n(d(this)[0] === B[0] ? a: c);
                                b.pauseControls || i()
                            }
                        });
                        b.pauseControls && c.hover(function() {
                            clearInterval(k)
                        },
                        function() {
                            i()
                        })
                    }
                }
                if ("undefined" === typeof document.body.style.maxWidth && h.maxwidth) {
                    var C = function() {
                        e.css("width", "100%");
                        e.width() > r && e.css("width", r)
                    };
                    C();
                    d(D).bind("resize", 
                    function() {
                        C()
                    })
                }
            })
        }
    })(jQuery, this, 0);1,这里修改了ul的className,所以css前面加上 ul{list-style:none;}
    2,u = u + ("<li><a href='#' class='" + z + a + "'>" + a + "</a></li>")
     这一句输入图片导航信息，也就是12345，你可以自己改一下。