jQuery练习t124

最新推荐文章于 2024-07-19 12:58:53 发布

虾米大王

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量222

点赞数

分类专栏： jQuery JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/modern358/article/details/112989244

版权

JavaScript 同时被 2 个专栏收录

329 篇文章 0 订阅

订阅专栏

jQuery

296 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            font-size: 13px;
        }
        p {
            border: 1px solid #666666;
            width: 280px;
            padding: 8px;
            line-height: 1.7em;
            font-size: 13px;
        }
        .spn{
            padding-left: 20px;
        }
        .focus{
            background-color: #CCCCCC;
            color: #fffffff;
        }
        .txt{
            border: 1px solid #666666;
            padding: 3px;
        }
        .btn{
            border: 1px solid #666666;
            padding: 2px;
            width: 60px;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
           var search =  {
               searchstr : function () {
                   search.clearstr();
                   var searchText = $("#txtSearch").val();
                   var regExp = new RegExp(searchText,'g');
                   if(searchText != "")
                   {
                       $('p').each(function () {
                           var newHtml = $(this).html().replace(regExp,'<span class="focus">'+ searchText +'</span>' );
                           $(this).html(newHtml);
                       });
                   }
               },
               clearstr:function () {
                   $('p').each(function () {
                       $(this).find('.focus').each(function () {
                           $(this).replaceWith($(this).html());
                       });
                   });
               }
           }
           $("#btnSearch").bind("click",search.searchstr);
        });
    </script>
</head>
<body>
    <div>
        <input type="text" id="txtSearch" class="txt">
        <input type="button" id="btnSearch" class="btn" value="查询">
    </div>
    <p>
        <span class="spn"></span>jQuery发布于2006年，在后续的版本升级中，广大的开发者被其简洁的代码，强悍的功能、优雅的展现，强大的兼容所征服。
        <span class="spn"></span>为什么这么多的人都钟爱jQuery，而jQuery恰恰是一把宝刀。
    </p>
</body>
</html>

虾米大王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery练习t124

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ font-size: 13px; } p { border: 1px soli.
复制链接

扫一扫