怎么把这段JS，改成JQ？

怎么把这段JS，改成JQ？   就是点更多的下拉框效果，想换成JQ的
<script language="javascript">
window.onload=function()
{
    var oH2More=document.getElementById('more');
    var oUlList=document.getElementById('list');
    var aLi=oUlList.getElementsByTagName('li');
    var i=0;
    oH2More.onclick=oUlList.onmouseover=function()
    {
        oUlList.style.display="block";
    }
    oUlList.onmouseout=function()
    {
        oUlList.style.display="none";
    }
    for (i=0;i<aLi.length ;i++ )
    {
        aLi[i].onclick=function()
        {
            oH2More.innerHTML=this.innerHTML;
            oUlList.style.display="none";

        };
    }
};
</script><!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
/* --整体-- */
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #dfd3b9;
    background-repeat: repeat-x;
    font-family:"宋体",Verdana, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
}
div, ul, li, ol, form, h1, h2, h3, h4, h5, h6, h7, img,p { margin: 0px; padding: 0px; list-style: none; }
img{border:0 none;} 
a {
    font-size: 12px;
    color: #000000;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #000000;
}
a:hover {
    text-decoration: underline;
    color: #000000;
}
a:active {
    text-decoration: none;
    color: #000000;
}
/* -- 头部 -- */
.top{ width:970px; height:132px;}
.top .logo{ width:233px; height:120px; float:left;}
.top .con{ width:730px; height:120px; float:right;}
.top .con .lc{ width:630px; float:left;padding:40px; 0 0 20px}
.top .con .lc .tab_btn { height: 25px;}
.top .con .lc .tab_btn li { float: left; width: 40px; height: 25px;line-height: 25px; text-align: center; cursor: pointer; 
font-weight: normal; font-size: 12px; margin:0 4px 0 0; }
.top .con .lc .tab_btn li a.here{
    color: #fff;
    font-weight: bold;
    background-color: #77602a;display:block
}
.top .con .lc .tab_btn li a{ color: #e7dfca; font-weight: normal; background-color: #433412; display:block}
.top .con .lc .wrap {background-image: url();background-repeat: no-repeat;}
.top .con .lc .tab_box {}
.top .con .lc .tab_box .guang{width:600px;height:28px; overflow:hidden; padding:2px 0 0 0;}
.top .con .lc .tab_box .keyword{color: #fff;}
.top .con .lc .tab_box .guang .zltsearch_i{
    width:510px;
    height:25px;
    font-size:14px;
    color:#000;
    line-height:25px;
     float:left; margin:0 0 0 4px;}
.top .con .lc .tab_box .guang .zltsearch_s{
    float:right;
    background-image: url();
    background-repeat: no-repeat;
    height: 26px;
    width: 71px;
    margin-top: 0;
    margin-right: 2px;
    margin-bottom: 0;
    margin-left: 0;
    border:0
}
.top .con .ls{ width:90px; float:right;}
.top .con .ls ul{ padding-top:40px}
#more{width:100px;height:25px;line-height:30px;color:#ccc;background-color:#333;}
#list{display:none;background:red;}
#list li{width:100px;height:28px;line-height:28px;color:#eee;background-color:#999; overflow:hidden}
.more_pra{position:relative;}
-->
</style>
<script src="http://product.pcpop.com/js/jquery.js"></script>
<script>
function subQuery()
                {
                    var searchTypeId = document.sform1.searchType.value;
                    //alert(document.sform1.searchType.value);
                    var keyWord =document.getElementById("query").value;
                    var keyWordNews =document.getElementById("query1").value;
                    var url = "";
                    
                      switch(searchTypeId)
                        {
                            case "1": 
                                url ='1';
                                break;
                            case "2": 
                                url ='1';
                                break;
                            case "3": 
                                     url ='1';
                                break;        
                            case "4": 
                                     url ='1';
                                break;                          
                            
                        }
                        var formSubmit =document.getElementById('sform1');
                        formSubmit.action=url;
                        //formSubmit.submit();
                        //return false;
                    
                }
                
                
function shosearch(sid)
    {
        var searchform = document.sform1.searchType;
        var hform = document.sform1;
        searchform.value=sid;
        for(var si =1;si<=4;si++)
        {
           document.getElementById("tab8_"+si).className="";
        }
        document.getElementById("tab8_"+sid).className="here";    
        var keyWord =document.getElementById("query").value;
        var keyWordNews =document.getElementById("query1").value;
        switch(sid)
        {
            case 1: 
                 hform.query1.style.display="none";
                 hform.query.style.display="";                 
                break;
            case 2: 
                   hform.query1.style.display="";
                   hform.query.style.display="none";    
                break;
            case 3: 
                 hform.query1.style.display="";
                 hform.query.style.display="none";
                break;
            case 4: 
                 hform.query1.style.display="";
                 hform.query.style.display="none";
                break;
            default:
                 hform.query.style.display="";
                 hform.query1.style.display="none";
                break;
        }
        if (sid==1)
        {
           if (keyWordNews!="") 
               document.getElementById("query").value =  keyWordNews;
           
        }
        else
        {
           if (keyWord!="") 
           {
             document.getElementById("query1").value = keyWord;
           }
        }
     }
</script>
<script language="javascript">
window.onload=function()
{
    var oH2More=document.getElementById('more');
    var oUlList=document.getElementById('list');
    var aLi=oUlList.getElementsByTagName('li');
    var i=0;
    oH2More.onclick=oUlList.onmouseover=function()
    {
        oUlList.style.display="block";
    }
    oUlList.onmouseout=function()
    {
        oUlList.style.display="none";
    }
    for (i=0;i<aLi.length ;i++ )
    {
        aLi[i].onclick=function()
        {
            oH2More.innerHTML=this.innerHTML;
            oUlList.style.display="none";

        };
    }
};
</script></head>
<body>
<div class="box">
    <div class="top">
            <div class="logo"></div>
            <div class="con">
             <div class="lc">
             <ul class="tab_btn">
               <li><a class="here" href="javascript:void(0)" id="tab8_1" onClick="shosearch(1);" target="_self" 
onFocus="this.blur()">文字1</a>
</li>
</li>
 <li class="more_pra">
<h2 id="more">更多</h2>
<ul id="list">
               <li><a href="javascript:void(0)" id="tab8_2" onClick="shosearch(2);" target="_self" onFocus="this.blur
()">文字2</a></li>
               <li><a href="javascript:void(0)" id="tab8_3" onClick="shosearch(3);" target="_self" onFocus="this.blur
()">文字3</a>
<li><a href="javascript:void(0)" id="tab8_4" onClick="shosearch(4);" target="_self" onFocus="this.blur
()">文字4</a>
</li> </ul></li>
             </ul>
               <div class="wrap">
               
                        <div class="tab_box">
                           <div class="guang">
                            <form name="sform1" id="sform1" method="post" target="_blank" action="" onSubmit="subQuery();">
                              <input type="text" class="zltsearch_i" id="query" name="query" value="" /><input type="text" 
class="zltsearch_i" id="query1" name="query1" style="display:none;" onClick="sform1.query.value=''" /><input type="submit" 
class="zltsearch_s" id="btnFSearch" value="搜索" /><input type="hidden" value="1" name="searchType" id="searchType">
                            </FORM>
                           </div>
                           <div class="keyword">
                            <script src="1.js"></script>
                           </div>
                        </div>
                        
                        
                        
               </div>  
        </div>
         <div class="ls">
           <ul>
             <li></li>
            </ul>
           </div>
     </div>
    </div>
    
</div>
</body>
</html>

解决方案 »

  1.   

    把所有document.getElementById('id')改成 $('#id')
    好了。
      

  2.   


    可以看一下发贴相关的贴子，可能是你代码贴太多了。你只要把js那断贴出来就行了。
    还有为什么一定要改成jquery的呢？他们放在一起不行 ？
      

  3.   


    这段JS在IE6有问题,所以想换成JQ的
      

  4.   

    js挺好的，干吗要改成jq,有些地方还是js效率高。
      

  5.   


    $(document).ready(function(){
    $('#more')
    .bind({
      click:function(){
       $(this).hide();
       }
    });
    $('#list')
    .bind({
      mouseover:function(){
       $(this).hide();
       },
      mouseout:function(){
    $(this).show();
    }
    });
    $('li')
    .each(function(){
      $(this).bind({click:function(){
    $('#more').html($(this).html());
    $('#list').hide();
    }
       })
     });
    });
      

  6.   


    非常感谢，但是出错了，运行不了，一点更多，就消失了<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    <!--
    /* --整体-- */
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #dfd3b9;
        background-repeat: repeat-x;
        font-family:"宋体",Verdana, Helvetica, sans-serif;
        font-size: 12px;
        color: #000;
    }
    div, ul, li, ol, form, h1, h2, h3, h4, h5, h6, h7, img,p { margin: 0px; padding: 0px; list-style: none; }
    img{border:0 none;} 
    a {
        font-size: 12px;
        color: #000000;
    }
    a:link {
        text-decoration: none;
    }
    a:visited {
        text-decoration: none;
        color: #000000;
    }
    a:hover {
        text-decoration: underline;
        color: #000000;
    }
    a:active {
        text-decoration: none;
        color: #000000;
    }
    /* -- 头部 -- */
    .top{ width:970px; height:132px;}
    .top .logo{ width:233px; height:120px; float:left;}
    .top .con{ width:730px; height:120px; float:right;}
    .top .con .lc{ width:630px; float:left;padding:40px; 0 0 20px}
    .top .con .lc .tab_btn { height: 25px;}
    .top .con .lc .tab_btn li { float: left; width: 40px; height: 25px;line-height: 25px; text-align: center; cursor: pointer; 
    font-weight: normal; font-size: 12px; margin:0 4px 0 0; }
    .top .con .lc .tab_btn li a.here{
        color: #fff;
        font-weight: bold;
        background-color: #77602a;display:block
    }
    .top .con .lc .tab_btn li a{ color: #e7dfca; font-weight: normal; background-color: #433412; display:block}
    .top .con .lc .wrap {background-image: url();background-repeat: no-repeat;}
    .top .con .lc .tab_box {}
    .top .con .lc .tab_box .guang{width:600px;height:28px; overflow:hidden; padding:2px 0 0 0;}
    .top .con .lc .tab_box .keyword{color: #fff;}
    .top .con .lc .tab_box .guang .zltsearch_i{
        width:510px;
        height:25px;
        font-size:14px;
        color:#000;
        line-height:25px;
         float:left; margin:0 0 0 4px;}
    .top .con .lc .tab_box .guang .zltsearch_s{
        float:right;
        background-image: url();
        background-repeat: no-repeat;
        height: 26px;
        width: 71px;
        margin-top: 0;
        margin-right: 2px;
        margin-bottom: 0;
        margin-left: 0;
        border:0
    }
    .top .con .ls{ width:90px; float:right;}
    .top .con .ls ul{ padding-top:40px}
    #more{width:100px;height:25px;line-height:30px;color:#ccc;background-color:#333;}
    #list{display:none;background:red;}
    #list li{width:100px;height:28px;line-height:28px;color:#eee;background-color:#999; overflow:hidden}
    .more_pra{position:relative;}
    -->
    </style>
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script>
    function subQuery()
                    {
                        var searchTypeId = document.sform1.searchType.value;
                        //alert(document.sform1.searchType.value);
                        var keyWord =document.getElementById("query").value;
                        var keyWordNews =document.getElementById("query1").value;
                        var url = "";
                        
                          switch(searchTypeId)
                            {
                                case "1": 
                                    url ='1';
                                    break;
                                case "2": 
                                    url ='1';
                                    break;
                                case "3": 
                                         url ='1';
                                    break;        
                                case "4": 
                                         url ='1';
                                    break;                          
                                
                            }
                            var formSubmit =document.getElementById('sform1');
                            formSubmit.action=url;
                            //formSubmit.submit();
                            //return false;
                        
                    }
                    
                    
    function shosearch(sid)
        {
            var searchform = document.sform1.searchType;
            var hform = document.sform1;
            searchform.value=sid;
            for(var si =1;si<=4;si++)
            {
               document.getElementById("tab8_"+si).className="";
            }
            document.getElementById("tab8_"+sid).className="here";    
            var keyWord =document.getElementById("query").value;
            var keyWordNews =document.getElementById("query1").value;
            switch(sid)
            {
                case 1: 
                     hform.query1.style.display="none";
                     hform.query.style.display="";                 
                    break;
                case 2: 
                       hform.query1.style.display="";
                       hform.query.style.display="none";    
                    break;
                case 3: 
                     hform.query1.style.display="";
                     hform.query.style.display="none";
                    break;
                case 4: 
                     hform.query1.style.display="";
                     hform.query.style.display="none";
                    break;
                default:
                     hform.query.style.display="";
                     hform.query1.style.display="none";
                    break;
            }
            if (sid==1)
            {
               if (keyWordNews!="") 
                   document.getElementById("query").value =  keyWordNews;
               
            }
            else
            {
               if (keyWord!="") 
               {
                 document.getElementById("query1").value = keyWord;
               }
            }
         }
    </script>
    <script language="javascript">
    $(document).ready(function(){
        $('#more')
        .bind({
              click:function(){
                               $(this).hide();
                               }
            });
        $('#list')
        .bind({
              mouseover:function(){
                                   $(this).hide();
                                   },
              mouseout:function(){
                                    $(this).show();
                                    }
            });
        $('li')
        .each(function(){
              $(this).bind({click:function(){
                                            $('#more').html($(this).html());
                                            $('#list').hide();
                                            }
                           })
             });
    });
    </script></head>
    <body>
    <div class="box">
        <div class="top">
                <div class="logo"></div>
                <div class="con">
                 <div class="lc">
                 <ul class="tab_btn">
                   <li><a class="here" href="javascript:void(0)" id="tab8_1" onClick="shosearch(1);" target="_self" 
    onFocus="this.blur()">文字1</a>
    </li>
    </li>
     <li class="more_pra">
        <h2 id="more">更多</h2>
        <ul id="list">
                   <li><a href="javascript:void(0)" id="tab8_2" onClick="shosearch(2);" target="_self" onFocus="this.blur
    ()">文字2</a></li>
                   <li><a href="javascript:void(0)" id="tab8_3" onClick="shosearch(3);" target="_self" onFocus="this.blur
    ()">文字3</a>
            <li><a href="javascript:void(0)" id="tab8_4" onClick="shosearch(4);" target="_self" onFocus="this.blur
    ()">文字4</a>
    </li>    </ul></li>
                 </ul>
                   <div class="wrap">
                   
                            <div class="tab_box">
                               <div class="guang">
                                <form name="sform1" id="sform1" method="post" target="_blank" action="" onSubmit="subQuery();">
                                  <input type="text" class="zltsearch_i" id="query" name="query" value="" /><input type="text" 
    class="zltsearch_i" id="query1" name="query1" style="display:none;" onClick="sform1.query.value=''" /><input type="submit" 
    class="zltsearch_s" id="btnFSearch" value="搜索" /><input type="hidden" value="1" name="searchType" id="searchType">
                                </FORM>
                               </div>
                               <div class="keyword">
                                <script src="1.js"></script>
                               </div>
                            </div>
                            
                            
                            
                   </div>  
            </div>
             <div class="ls">
               <ul>
                 <li></li>
                </ul>
               </div>
         </div>
        </div>
        
    </div>
    </body>
    </html>