怎么把这段JS，改成JQ？

xiaoc3 2011-01-31 10:59:47
怎么把这段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>
...全文
294 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
xiaoc3 2011-02-02
  • 打赏
  • 举报
 回复
继续等待。。。
xiaoc3 2011-02-01
  • 打赏
  • 举报
 回复
继续等待
xiaoc3 2011-01-31
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 crazywa 的回复:]
找劳工的。
我不告诉你。
[/Quote]

gw6328 2011-01-31
  • 打赏
  • 举报
 回复
把所有document.getElementById('id')改成 $('#id')
好了。
Crazywa 2011-01-31
  • 打赏
  • 举报
 回复
找劳工的。
我不告诉你。
xiaoc3 2011-01-31
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 zjleon2008 的回复:]
JScript code

$(document).ready(function(){
$('#more')
.bind({
click:function(){
$(this).hide();
}
});
$('#……
[/Quote]



非常感谢，但是出错了，运行不了，一点更多，就消失了

<!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>
zjleon2008 2011-01-31
  • 打赏
  • 举报
 回复 


$(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();

										}

					   })

		 });

});
xiaoc3 2011-01-31
  • 打赏
  • 举报
 回复
继续等待高人
gouhan02 2011-01-31
  • 打赏
  • 举报
 回复
js挺好的，干吗要改成jq,有些地方还是js效率高。
gouxiongyaya 2011-01-31
  • 打赏
  • 举报
 回复
找个人帮你很难！感觉拿点分找苦力似的。
xiaoc3 2011-01-31
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 jinfengyiye 的回复:]
引用 3 楼 xiaoc3 的回复:
引用 1 楼 crazywa 的回复:
找劳工的。
我不告诉你。


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

这段JS在IE6有问题,所以想换成JQ的
gw6328 2011-01-31
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 xiaoc3 的回复:]
引用 1 楼 crazywa 的回复:
找劳工的。
我不告诉你。
[/Quote]

可以看一下发贴相关的贴子，可能是你代码贴太多了。你只要把js那断贴出来就行了。
还有为什么一定要改成jquery的呢？他们放在一起不行 ？
css+js+jq实训笔记
css+js+jq实训笔记css第一天css第二天css第三天css第四天css第五天css第六天js第一天js第二天js第三天js第四天js第五天js第六天jq第一天jq第二天jq第三天 css第一天 1、平时有空多记单词（很多新单词） 2、用谷歌...
利用javascript实现简体与繁体的转换
这段代码只是利用Javascript实现了简繁体的相互转化,因为仅操作当前页面,无刷新所以速度快,转换过程流畅. 话不多说上正餐: var Default_isFT = 0 //默认是否繁体，0-简体，1-繁体 var StranIt_Delay = 50 //翻译延时...
前端学习笔记汇总，css，js，jq，es6
内置对象:就是js给我们定义好了的对象，有着现成的属性和方法供我们调用，有26个 string（字符串不容更改） number boolean 这三个是基本包装类型 string对象方法：字符串不能改 toUpperCase()：把字符串转成大写，...
CSS,JS,JQ 常用属性分享
5、indexOf() 获取某小段字符串在大段字符串里面的索引值 如果不存在就返回-1 6、substring() 截取字符串 定时器 只执行一次的定时器：var oTimer1 = setTimeout(函数名，间隔时间) 间隔时间单位为毫秒，不用写...
jQuery 获取文本内容 与 原生 JS 的异同？
hello hello，我们学习原生 JS 时已经学习掌握了两种获取和设置文本的办法，大家还记得吗？那就是 innerHTML 与 innerText，对吧，这两个基本原生方法的使用想必大家已经有些混淆了吧？不要慌张！下面我会带大家复习...
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章