首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

JQUERY搜寻关键字高亮

2012-10-07 
JQUERY搜索关键字高亮使用Jquery插件实现使用方法如下: 在中引入jquery文件及插件文件jquery.highlight.js

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”,并为其加上链接。

热点排行