时间,渐渐带走了年少轻狂,也慢慢沉淀了冷暖自知。成功的道路上,肯定会有失败;对于失败,我们要正确地看待和对待,不怕失败者,则必成功;怕失败者,则一无是处,会更失败。
在一篇文章中查找关键字,找到后高亮显示。
具体代码:
<html> <head> <title>Search</title> <style type="text/css"> p { border:1px solid black;width:500px;padding:5px;} .highlight { background-color:yellow; } </style> </head> <body> <form> <p> 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. </p> <p> 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. </p> <p> 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. </p> <input type="text" id="text"/> <input type="button" id="search" value="Search"/> <input type="button" id="clear" value="Clear"/> </form> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript"> $(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, '<span class="highlight">'+searchText+'</span>');//将找到的关键字替换,加上highlight属性; $(this).html(newHtml);//更新文章; }); } function clearSelection() { $('p').each(function()//遍历 { $(this).find('.highlight').each(function()//找到所有highlight属性的元素; { $(this).replaceWith($(this).html());//将他们的属性去掉; }); }); } }); </script> </body> </html>
以上就是jQuery实现搜索页面关键字的功能。明明身边的人很多,但是当一切都安静下来,突然找不到人说话,当我不去主动联系其他人,就没人想起我了。更多关于jQuery实现搜索页面关键字的功能请关注haodaima.com其它相关文章!