本文主要是介绍jquery-highlight在web页面让字符高亮显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果:
官网：
http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
下载用到的jquery:
hightlight用到的jquery
放到与静态页面并列的目录中
使用方法 在页面的头文件中加入
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script><script type="text/javascript" src="../js/jquery.highlight.js"></script><style> .highlight{background-color: #FFFF88;} </style><script language="JavaScript"> $(document).ready(function() { var href = window.location.href; var strs= new Array();strs=href.split('?'); var str=strs[1]; str= decodeURI(str); $('*').highlight("物业类别"); }); </script>.highlight{background-color: #FFFF88;} 可以改颜色
$('*').highlight("物业类别") 意思是在全页面中让 物业类别四个字高亮 如果要把高亮的范围 限制在某个div 或者class里 只要把$('*')修改为相应的选择器就行了
jQuery选择器总结
页面全部代码如下:(可放入txt保存为html直接用浏览器打开看效果)
<!DOCTYPE html>
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>华润二十四城规划_产权年限_售楼电话_地址 - 安居客</title><script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script><script type="text/javascript" src="../js/jquery.highlight.js"></script><style> .highlight{background-color: #FFFF88;} </style><script language="JavaScript"> $(document).ready(function() { var href = window.location.href; var strs= new Array();strs=href.split('?'); var str=strs[1]; str= decodeURI(str); $('*').highlight("物业类别"); }); </script></head>
<body><div id="container">
<table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody><tr> <td width="50%"><strong>物业类别 </strong> 住宅、普通住宅 </td> <td width="50%"><strong>项目特色 </strong>小户型,复合地产,特色别墅,酒店式公寓</td> </tr> <tr> <td width="50%"><strong>建筑类别 </strong> 塔楼 小高层 </td> <td width="50%"><strong>装修状况 </strong>暂无资料</td> </tr> <tr> <td width="50%"><strong>环线位置 </strong> <span class="fline"><a href="http://newhouse.cd.soufun.com/house/%B3%C9%B6%BC__%C8%FD%BB%B7%D2%D4%CD%E2_______________1___.htm" target="_blank" style="text-decoration:underline">三环以外</a></span> </td> <td width="50%"><strong>所属商圈 </strong> <span class="zib"><a href="http://newhouse.cd.soufun.com/house/%B3%C9%B6%BC_%CE%C2%BD%AD____%CE%C2%BD%AD____________1___.htm" target="_blank">温江</a></span> <span class="zib"></span></td> </tr> <tr> <td width="50%"><strong>容 积 率 </strong>3.20 <span class="zi999">[<a title="锦汇城容积率" href="http://jinhuicheng028.soufun.com//house/3211094664/rongjilv.htm" target="_blank">容积率详情</a>]</span></td> <td width="50%"><strong>绿 化 率 </strong>30% <span class="zi999">[<a title="锦汇城绿化率" href="http://jinhuicheng028.soufun.com//house/3211094664/lvhualv.htm" target="_blank">绿化率详情</a>]</span></td> </tr> <tr> <td width="50%"><strong>开盘时间 </strong>2013年10月13日开盘 <span class="zi999">[<a title="锦汇城开盘时间" href="http://jinhuicheng028.soufun.com//house/3211094664/sale_history.htm" target="_blank">开盘时间详情</a>]</span></td> <td width="50%"><strong>交房时间 </strong>预计2015年6月入住 <span class="zi999">[<a title="锦汇城交房时间" href="http://jinhuicheng028.soufun.com//house/3211094664/live_history.htm" target="_blank">交房时间详情</a>]</span></td> </tr> <tr> <td><strong>物 业 费 </strong>暂无资料 </td> <td width="50%"><strong>物业公司 </strong><span class="zib"><a href="http://newhouse.cd.soufun.com/company/3211094664_20130715174651.htm" target="_blank">成都宜居资产管理有限公司</a></span></td> </tr> <tr> <td colspan="2"><strong>开 发 商 </strong> <span class="zib"><a href="http://newhouse.cd.soufun.com/company/3211094664_20130715174633.htm" target="_blank">成都常青藤置业有限公司</a></span> </td> </tr><tr> <td colspan="2"><strong>预售许可证 </strong> 暂无资料 </td></tr> <tr> <td colspan="2"><strong>售楼地址 </strong>温江区川农大旁学府路（成温邛高速路出口）</td> </tr> <tr> <td colspan="2"><strong>物业地址 </strong>温江成温邛高速北侧（公平镇和万春镇交汇处）<span class="zi999"> [<a href="http://jinhuicheng028.soufun.com//photo/list_901_3211094664.htm" target="_blank">交通图</a>]</span></td> </tr> <tr> <td colspan="2"><strong>交通状况 </strong>公交 904路 川农站<span class="zi999"><a rel="nofollow" href="#jtzk">[更多]</a></span></td> </tr> <tr><td style="font-size:14px;" colspan="2"><strong style="font-size:12px;">锦汇城房价 </strong> <span class="currentPrice fontStyle_sp">均价<strong class="fontStyle_sp">4300</strong>元/平方米 </span> <span class="zi999">[<a rel="nofollow" href="http://jinhuicheng028.soufun.com//house/3211094664/fangjia.htm" target="_blank">房价走势</a>] [<a rel="nofollow" href="/house/web/newhouse_new_info.php?newcode=3211094664" target="_blank">我要纠错</a>] [<a href="http://www.soufun.com/house/tools.htm" target="_blank">房贷计算器</a>]</span> </td> </tr> </tbody></table>
</div>
</body>
</html>在某些页面中 如果失效 注意是不是 某些meta和jquery有冲突 把有冲突的引用去掉即可。
这篇关于jquery-highlight在web页面让字符高亮显示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
