jQuery的highlight插件使用示例

最新推荐文章于 2025-06-29 13:24:45 发布

asin929

最新推荐文章于 2025-06-29 13:24:45 发布

阅读量5.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery 高亮 highlight 插件

本文链接：https://blog.youkuaiyun.com/u012948976/article/details/53230648

jQuery 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了jQuery的highlight插件使用，包括加载js、设置高亮css和触发高亮的步骤。强调了document.ready的重要性，说明了插件对多个单词高亮的限制，并指出CSS选择器的限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用步骤

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> .highlight{background-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>