jQuery的highlight插件使用示例

Posted 2022-11-26 asin929

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery的highlight插件使用示例相关的知识，希望对你有一定的参考价值。

使用步骤

1. 加载js

在head中加载jquery.js和jquery.highlight.js，

        <script src="./jquery-1.9.1/jquery.js"></script>
        <script src="./jquery.highlight.js"></script>

2. 设置高亮的css

在css中或通过jquery指定高亮区域的颜色：

 .highlight background-color: #FFFF88;

或

$(".highlight").css( backgroundColor: "#FFFF88" );

3. 触发高亮

      $("td").highlight("hello");
      //高亮显示所有td标签中的“hello”

示例代码

<!DOCTYPE html>  
<html>  
    <head>   
        <meta http-equiv="Content-Type" content="text/html; charset=gbk" />   
        <title>test</title>  
        <script src="./jquery-1.9.1/jquery.js"></script>
        <script src="./jquery.highlight.js"></script>  
        <style> .highlightbackground-color: #FFFF88; </style>  

        <script language="javascript">
            $(document).ready(function () 
                $('td').highlight("name");
                $('td').highlight("hello");

            );
        </script>  

    </head> 


    <body>  
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Evename</td>
                <td>Jackson</td>
                <td>94 hello</td>
            </tr>
        </table> 
    </body>