使用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>
<div 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)" />
</div>
<div style="height: 50px;">
</div>
<div style="height: 200px;">
1待搜索的文本。
</div>
<div style="height: 200px;">
2待搜索的文本。
</div>
<div style="height: 200px;">
3待搜索的文本。
</div>
<div style="height: 200px;">
4待搜索的文本。
</div>
<div style="height: 200px;">
5待搜索的文本。
</div>
<div style="height: 200px;">
10美丽的家乡。
</div>
<div style="height: 200px;">
11美丽的家乡。
</div>
<div style="height: 200px;">
12美丽的家乡。
</div>
<div style="height: 200px;">
13美丽的家乡。
</div>
<div style="height: 200px;">
14美丽的家乡。
</div>
<div style="height: 200px;">
15美丽的家乡。
</div>
</body>
</html>
这里主要是个大家提供一个思路，小伙伴们等不及的话就自己完善下吧。
相关文章
jQuery发布已经十年了，挺让人难以置信。过去的这些年Web开发变了很多，jQuery也随之变化着。在这个过程中，团队一直在对确保过往代码的兼容支持和获取最好的Web开发实践的现实之间努力着。就在2天前，jQuery发布了新的3.0最终版本2016-06-06
jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入一些非常好的效果2012-01-01
现在比较流行jquery插件，所以既然用了jquery那么就要用好，也不用大量的写代码了。2011-03-03
这篇文章主要介绍了jquery ui dialog替代confirm的实现方法,结合实例形式分析了jQuery ui插件的dialog模拟confirm功能的具体步骤与实现技巧,需要的朋友可以参考下2016-01-01
今天小编就为大家分享一篇JQuery通过后台获取数据遍历到前台的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
jQuery1.6.1 发布有一段时间了，发现一些冗余代码，列出如下2011-06-06
jquery实现的回旋滚动效果完整实例【附demo源码下载】
这篇文章主要介绍了jquery实现的回旋滚动效果,可实现点击后侧图片呈现立体翻转切换的功能,涉及jQuery插件roundabout.js的使用,并附带了完整实例demo源码供读者下载参考,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jQuery的图片轮播插件PgwSlideshow使用详解的相关资料,需要的朋友可以参考下2016-08-08
jQuery是一个非常优秀的JavaScript库，与Prototype,YUI,Mootools等众多的Js类库相比，它剑走偏锋，从Web开发实用的角度出发，抛除了其它Lib中一些不实用的东西，为开发者提供了短小精悍的类库。2011-04-04
下面小编就为大家带来一篇jQuery效果函数。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-09-09
最新评论