html页面如何实现搜索功能,使用jQuery怎么实现一个页面关键字搜索功能

使用jQuery怎么实现一个页面关键字搜索功能

发布时间:2021-01-04 16:46:38

来源:亿速云

阅读:136

作者:Leah

这篇文章给大家介绍使用jQuery怎么实现一个页面关键字搜索功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

具体代码:

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());//将他们的属性去掉;

});

});

}

});

关于使用jQuery怎么实现一个页面关键字搜索功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/246357.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html相对定位向上偏移,使用CSS的相对定位和偏移量

这是利用CSS相对定位和偏移写成的表单输入框效果,不是以前用的表格那种,也没有用UL li,觉得借此示例可练习一下CSS,特别是CSS的定位和布局方面的知识,了解top,bottom,left,right这些偏移量属性的用法。CSS相对定位和偏移写成的表单…

2.转动的地球shader

原理很简单,根据时间对uv中的x轴进行位移,对于地面和云层,取不同的移动速度,分别计算对应的uv坐标,再根据uv坐标从地面和云层的纹理中分别取出对应的值,最后把两者用lerp函数进行混合作为最终结果。 下边的…

3.顶点外扩方法实现的描边shader

描边shader的实现有很多种,顶点外扩是其中之一。顶点外扩的原理是用2个Pass 渲染物体2次第一遍:描边,顶点沿法线方向外拓后用黑色渲染。外扩这一步的实现是在投影空间,也就是2D的,根绝法线的x和y值进行外扩,因为是沿着…

为此计算机所有用户安装加载项,安装Office 2013后,无法在计算机上安装Outlook加载项...

我使用Outlook Add in模板和VSTO在visual studio 2010中实现了Outlook添加,我使用MSI安装程序(在visual studio 2010中创建)为它创建了一个安装..我能够在所有机器上安装它(x86和x64) ) .最近我尝试在安装了Office 2013的计算机上安装相同的安装程序并收到以下错误&…

4.边缘光照的描边shader

【思路】:面向摄像机的物体,它的表面法线【normal】和视角向量【viewDir】的【夹角】越靠近边缘就越大。那么就可以根据这个夹角进行处理,夹角越大,那么发射光越强,就可以实现我们想要的效果。 Shader "Study/4_O…

html 怎么设置cooki,怎么设置浏览器接受cookie

怎么设置浏览器接受cookie把浏览器设置成接受cookie方法,以IE11为例: 1,打开IE浏览器,在菜单栏上点击“工具”,弹出下拉菜单点击“Internet选项”。 2,点击“隐私”选项,在页面中点击“高级”。…

5.Lambert光照Diffuse Shader

http://blog.csdn.net/candycat1992/article/details/17355629 这篇文章写的很好,这里就直接上代码了 Shader "Study/5_LambertDiffuse" {Properties{_Color("Main Color", Color) (1,1,1,1)_MainTex("Base (RGB)", 2D) "whit…

计算机用户的注册表,计算机上的注册表在哪里

注册表在哪里: 计算机中的注册表在哪里?疯狂代码?: http://CrazyCoder.cn/DeveloperUtil/Article31113.html“开始”→“运行”菜单项,在运行中输入regedit,然后按Enter打开注册表编辑器,逐一展开上述各项以获取注册表…

2017计算机应用技术考研,2017年中国科学技术大学081203计算机应用技术考研专业目录与考试科目.docx...

2017 年中国科学技术大学081203 计算机应用技术考研专业目录及考试科目081203 计算机应用技术1401、计算机网络应用技术李晓风① 101 思想政治理论;② 201谭海波英语一; ③ 301 数学一;④ 40802、计算机视觉张 龙计算机学科专业基础综合03、遥…

6.Half Lambert光照Diffuse Shader

简单来说,Lambert定律认为,在平面某点漫反射光的光强与该反射点的法向量和入射光角度的余弦值成正比(即我们之前使用dot函数得到的结果)。Half Lambert最初是由Valve(游戏半条命2使用的引擎即是其开发的)提…

伯克利计算机科学录取率,Berkeley的CS「加州大学伯克利分校计算机科学系」

加州大学伯克利分校电气工程与计算机科学系开设有以下学位项目,分别是:电气工程与计算机科学理学硕士(MS in Electrical Engineering and Computer Sciences):为期1-2年,共计24个学分,要求申请者本科毕业,不…

7.Phong 和 BlinnPhong

Lambert漫反射光照模型,这是一个用来模拟粗糙表面对光线的漫反射现象的经验模型,对于纸张、粗糙墙壁等等来说,这个模型或许够用,但对于金属这样的光滑表面来说,我们就需要使用Phong模型来模拟光滑表面对光线的镜面反射…

html css animation,css animation是什么?

animation是CSS3中的一个简写属性,可以通过设置六个动画属性来实现动画效果。这六个属性分别为动画名称、动画时间、速度曲线、动画延迟、播放次数及动画是否反向播放。语法:animation: name duration timing-function delay iteration-count direction;…

8.平面阴影

public class CastShadow : MonoBehaviour {public Transform rec;//接受阴影的物体// Use this for initializationvoid Start () {GetComponent<Renderer>().sharedMaterial.SetMatrix("_World2Ground", rec.GetComponent<Renderer>().worldToLocalMat…

千分之三用计算机怎么算,浓度换算计算器(浓度单位换算器在线使用)

基本公式&#xff1a;c1000ρω/m 式中&#xff1a;c-----物质的量浓度 单位mol/l1000------1000毫升 单位ml ρ------密度 单位 g/ml ω----质量分数 % m------溶质的摩尔质量 单位g/mol看过很多答案&#xff0c;都是抄的 &#xff0c;如果抄袭&#xff0c;不给分 哦 问&#…

9.球体阴影

上一篇讲的阴影shader是通过两个pass来渲染出的&#xff0c;第一个pass渲染要投影的物体本体&#xff0c;第二个pass渲染物体的阴影&#xff0c;也就是说阴影的渲染是在物体的shader中而不是地面的shader。下面要讲的球体阴影的shader是放在要接受阴影的地面上。 原理如下图&am…

css html 抽屉,CSS快速入门-前端布局1(抽屉)(示例代码)

一、效果图前面对CSS基础知识有了一定的了解&#xff0c;是时候开始实战了&#xff01;以下我对抽屉(https://dig.chouti.com/)主页进行模拟布局。官方网站效果图&#xff1a;模拟网站图&#xff1a;二、实现步骤1、整体布局(header、body、footer)抽屉的首页主要分为三块&…

10.热空气扭曲效果

Shader "Study/10_Distortion" {Properties{_NoiseTex("絮乱图", 2D) "white" {} // 絮乱图_AreaTex("区域图(Alpha)&#xff1a;白色为显示区域&#xff0c;透明为不显示区域", 2D) "white" {} // 区域图_Move…

11.Wave Shader

这个shader是在这位博主点击打开链接的文章基础上进行修改得到的&#xff0c;原作是在shadertoy网站上。不得不说&#xff0c;被shadertoy上的大神们震精了&#xff0c;真的是令我叹为观止&#xff0c;啥也不说了&#xff0c;慢慢学吧。 shader的效果&#xff1a; Shader的代码…

macpro台式计算机,Mac Pro正式上架 真的可以用来刨土豆丝

12月15日消息&#xff0c;早在6月4号WWDC全球开发者大会上就已经发布的新版Mac Pro电脑&#xff0c;近期正式上架苹果官网开销&#xff0c;某一外媒在收到2019年新版Mac Pro后&#xff0c;第一件事竟不是体验其性能&#xff0c;而是验证它是否可以用来给土豆或者奶酪刨丝。在视…