使用jQuery简单实现模拟浏览器搜索功能
写的匆忙，示意一下，有待完善。把以下代码复制到文本文件中，把文件扩展名改为.html就可以运行了。
<html>
<head>
<styletype="text/css">
.res
{
color:Red;
}
</style>
<scriptsrc="jquery.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
varoldKey="";
varindex=-1;
varpos=newArray();
varoldCount=0;
functionsearch(flg){ if(!flg){ index++; index=index==oldCount?0:index; } else{ index--; index=index<0?oldCount-1:index; }
$(".result").removeClass("res"); $("#toresult").remove(); varkey=$("#key").val();//取key值 if(!key){ oldKey=""; return;//key为空则退出 }
if(oldKey!=key){ //重置 index=0; $(".result").each(function(){ $(this).replaceWith($(this).html()); }); pos=newArray();
$("body").html($("body").html().replace(newRegExp(key,"gm"),"<spanid='result"+index+"'class='result'>"+key+"</span>"));//替换
$("#key").val(key); oldKey=key; $(".result").each(function(){ pos.push($(this).offset().top); }); oldCount=$(".result").length; }
$(".result:eq("+index+")").addClass("res");
$("body").scrollTop(pos[index]); } </script> </head> <body> <divstyle="position:fixed;right:20px;top:0;"> <inputid="key"type="text"style="width:100px;"/> <inputtype="button"value="下一个"onclick="search()"/> <inputtype="button"value="上一个"onclick="search(1)"/> </div> <divstyle="height:50px;"> </div> <divstyle="height:200px;"> 1待搜索的文本。 </div> <divstyle="height:200px;"> 2待搜索的文本。 </div> <divstyle="height:200px;"> 3待搜索的文本。 </div> <divstyle="height:200px;"> 4待搜索的文本。 </div> <divstyle="height:200px;"> 5待搜索的文本。 </div> <divstyle="height:200px;"> 10美丽的家乡。 </div> <divstyle="height:200px;"> 11美丽的家乡。 </div> <divstyle="height:200px;"> 12美丽的家乡。 </div> <divstyle="height:200px;"> 13美丽的家乡。 </div> <divstyle="height:200px;"> 14美丽的家乡。 </div> <divstyle="height:200px;"> 15美丽的家乡。 </div> </body> </html>