JQUERY搜索关键字高亮
使用Jquery插件实现使用方法如下:在中引入jquery文件及插件文件jquery.highlight.js<scripttype="text/javascript"src="../js/jquery-1.4.2.js"></script><scripttype="text/javascript"src="../js/jquery.highlight.js"></script><scripttype="text/javascript">functionhightlight(str){$(".highlight").highlight(str);}</script>在页面Body部分加入从表单传递过来的关键字Css样式:<styletype="text/css">.highlight{background-color:#FFAEB1;}</style>具体介绍如下:在css中或通过jquery指定高亮区域的颜色:.highlight{background-color:#FFFF88;}$(".highlight").css({backgroundColor:"#FFFF88"});设置需要高亮显示的词语或通过事件触发高亮显示。例如:$("h1").highlight("highlight");//高亮显示所有h1标签中的“highligh”$("bodyp").unhighlight();//取消所有body中段落里的高亮显示;$("p").highlight("jQueryhighlightplugin");//高亮段落中的词条“jQueryhighlightplugin”$("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$("bodyp").highlight("jQuery",{element:'a',className:'jQueryLink'});$("bodypa.jQueryLink").attr({href:'http://jquery.com'});//高亮段落中的“jQuery”,并为其加上链接。