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”,并为其加上链接。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值