一聚教程网：一个值得你收藏的教程网站

ps教程 | flash教程 | 路由器设置 | Jsp教程 | 加入收藏

PHP教程 Css教程 操作系统 数据库

首页 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
当前位置：一聚教程网 > 网页制作 > jquery

推荐专题

最新下载

热门教程

jQuery实现搜索页面关键字的功能

时间：2017-04-10 编辑：简简单单 来源：一聚教程网

在一篇文章中查找关键字，找到后高亮显示。

具体代码：

 

 代码如下 复制代码

  

    Search

    

      p { border:1px solid black;width:500px;padding:5px;}

      .highlight { background-color:yellow; }

    

  

  

    

      

        I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it.

      

      

        I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it.

      

      

        I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it.

      

      

      

      

    

  $(document).ready(function ()

  {

    $('#search').click(highlight);//点击search时，执行highlight函数；

    $('#clear').click(clearSelection);//点击clear按钮时，执行clearSelection函数；

   

    function highlight()

    {

      clearSelection();//先清空一下上次高亮显示的内容；

      var searchText = $('#text').val();//获取你输入的关键字；

      var regExp = new RegExp(searchText, 'g');//创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了；

      $('p').each(function()//遍历文章；

      {

        var html = $(this).html();

        var newHtml = html.replace(regExp, ''+searchText+'');//将找到的关键字替换，加上highlight属性；

   

        $(this).html(newHtml);//更新文章；

      });

    }

    function clearSelection()

    {

      $('p').each(function()//遍历

      {

        $(this).find('.highlight').each(function()//找到所有highlight属性的元素；

        {

          $(this).replaceWith($(this).html());//将他们的属性去掉；

        });

      });

    }

  });

   

  

 

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2024 www.111COM.NET AII Right Reserved 苏ICP备17065847号-2

网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理