Board logo

标题: jquery-highlight在web页面让字符高亮显示 [打印本页]

作者: look_w    时间: 2019-4-18 15:48     标题: jquery-highlight在web页面让字符高亮显示

下载用到的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>




欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0