使用Jquery插件实现
使用方法如下: 在中引入jquery文件及插件文件jquery.highlight.js<script type="text/javascript" src="../js/jquery-1.4.2.js"></script><script type="text/javascript" src="../js/jquery.highlight.js"></script><script type="text/javascript">function hightlight(str){$(".highlight").highlight(str);}</script>
在页面Body部分加入从表单传递过来的关键字
Css样式:<style type="text/css">
.highlight{background-color: #FFAEB1;}
</style>
具体介绍如下:
在css中或通过jquery指定高亮区域的颜色: .highlight {background-color: #FFFF88; }$(".highlight").css({ backgroundColor: "#FFFF88" });
设置需要高亮显示的词语或通过事件触发高亮显示。例如: $("h1").highlight("highlight"); //高亮显示所有h1标签中的“highligh” $("body p").unhighlight(); //取消所有body中段落里的高亮显示; $("p").highlight("jQuery highlight plugin"); //高亮段落中的词条 “jQuery highlight plugin” $("p").highlight(["jQuery", "highlight", "plugin"]); //高亮段落中的 “jQuery”,“highlight”及“plugin” $("p").highlight("Highlight", { caseSensitive: true }); //高亮段落中的 “Highlight”,区分大小写。 $("p").highlight("light", { wordsOnly: true }); //高亮段落中的 “light”,必须是完整单词,“highlight”中的“light”不会高亮 $("p").highlight("highlight", { element: 'em', className: 'error' }); //高亮段落中的 “hightlight”,并为其指定父标签为em,class为error $("p").highlight("highlight", { element: 'em', className: 'error' }); //高亮段落中的 “hightlight”,并为其指定父标签为em,class为error $("body p").highlight("jQuery", { element: 'a', className: 'jQueryLink'}); $("body p a.jQueryLink").attr({ href: 'http://jquery.com' }); //高亮段落中的 “jQuery”,并为其加上链接。
JQUERY搜索关键字高亮
最新推荐文章于 2023-07-28 09:27:06 发布
本文介绍了一款基于Jquery的高亮插件,通过简单的配置即可实现网页文本的高亮显示功能。支持多种参数设置,如背景颜色、是否区分大小写等。
283

被折叠的 条评论
为什么被折叠?



