脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-使用jQuery简单实现模拟浏览器搜索功能,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
使用jQuery简单实现模拟浏览器搜索功能。写的匆忙,示意一下,有待完善。把以下代码复制到文本文件中,把文件扩展名改为.htML就可以运行了。
代码如下:
<html>
<head>
<style tyPE="text/css">
.res
{
color: red;
}
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
VAR oldKey = "";
var index = -1;
var pos = new Array();
var oldCount = 0;
function seArch(flg) {
if (!flg) {
index++;
index = index == oldCount ? 0 : index;
}
else {
index--;
index = index < 0 ? oldCount - 1 : index;
}
$(".result").removeClass("res");
$("#toresult").remove();
var key = $("#key").val(); //取key值
if (!key) {
oldKey = "";
return; //key为空则退出
}
if (oldKey != key) {
//重置
index = 0;
$(".result").each(function () {
$(this).replaceWITh($(this).html());
});
pos = new Array();
$("body").html($("body").html().replace(new RegExp(key, "gm"), "<span id='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>
<p style="position: fixed; right: 20px; top: 0;">
<input id="key" type="text" style="width: 100px;" />
<input type="button" value="下一个" onclick="search()" />
<input type="button" value="上一个" onclick="search(1)" />
</p>
<p style="height: 50px;">
</p>
<p style="height: 200px;">
1待搜索的文本。
</p>
<p style="height: 200px;">
2待搜索的文本。
</p>
<p style="height: 200px;">
3待搜索的文本。
</p>
<p style="height: 200px;">
&nbnbsp; 4待搜索的文本。
</p>
<p style="height: 200px;">
5待搜索的文本。
</p>
<p style="height: 200px;">
10美丽的家乡。
</p>
<p style="height: 200px;">
11美丽的家乡。
</p>
<p style="height: 200px;">
12美丽的家乡。
</p>
<p style="height: 200px;">
13美丽的家乡。
</p>
<p style="height: 200px;">
14美丽的家乡。
</p>
<p style="height: 200px;">
15美丽的家乡。
</p>
</body>
</html>
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-使用jQuery简单实现模拟浏览器搜索功能全部内容,希望文章能够帮你解决javascript代码实例教程-使用jQuery简单实现模拟浏览器搜索功能所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。