JQUERY搜索关键字高亮
使用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”，并为其加上链接。
页:
[1]