使用Jquery插件实现
使用方法如下: 在中引入jquery文件及插件文件jquery.highlight.js<script type="text/javascript" src="../js/jquery-1.4.2.js"></script><script type="text/javascript" src="../js/jquery.highlight.js"></script><script type="text/javascript">function hightlight(str){$(".highlight").highlight(str);}</script>
在页面Body部分加入从表单传递过来的关键字
Css样式:<style type="text/css">
.highlight{background-color: #FFAEB1;}
</style>
具体介绍如下:
在css中或通过jquery指定高亮区域的颜色: .highlight {background-color: #FFFF88; }$(".highlight").css({ backgroundColor: "#FFFF88" });
设置需要高亮显示的词语或通过事件触发高亮显示。例如: $("h1").highlight("highlight"); //高亮显示所有h1标签中的“highligh” $("body p").unhighlight(); //取消所有body中段落里的高亮显示; $("p").highlight("jQuery highlight plugin"); //高亮段落中的词条 “jQuery highlight plugin” $("p").highlight(["jQuery", "highlight", "plugin"]); //高亮段落中的 “jQuery”,“highlight”及“plugin” $("p").highlight("Highlight", { caseSensitive: true }); //高亮段落中的 “Highlight”,区分大小写。 $("p").highlight("light", { wordsOnly: true }); //高亮段落中的 “light”,必须是完整单词,“highlight”中的“light”不会高亮 $("p").highlight("highlight", { element: 'em', className: 'error' }); //高亮段落中的 “hightlight”,并为其指定父标签为em,class为error $("p").highlight("highlight", { element: 'em', className: 'error' }); //高亮段落中的 “hightlight”,并为其指定父标签为em,class为error $("body p").highlight("jQuery", { element: 'a', className: 'jQueryLink'}); $("body p a.jQueryLink").attr({ href: 'http://jquery.com' }); //高亮段落中的 “jQuery”,并为其加上链接。
分享到:
相关推荐
**jQuery关键字高亮插件详解** 在Web开发中,我们经常需要实现文本中的关键字高亮显示,以便用户能快速找到他们关注的信息。jQuery作为一个强大的JavaScript库,提供了丰富的API和插件来帮助开发者实现这一功能。本...
基于Jquery的关键字高亮插件 演示站点 http://indiboy.feelast.com/e/search/result/?searchid=17 联系QQ:11386442
**jQuery.mark插件详解** ...总之,`jquery.mark`是一个强大的jQuery关键字高亮工具,其灵活性和全面的功能使其成为Web开发中处理文本高亮问题的理想选择。开发者可以根据具体需求,灵活运用其各种特性,提升用户体验。
`jquery.mark`甚至能够跨iframe进行关键字高亮,这对于那些包含内嵌页面的应用来说是一大福音,可以确保整个页面内容的一致性。 7. **API和事件**: 插件提供了丰富的API接口,包括初始化、清除高亮、更新关键字...
本教程将深入讲解如何使用jQuery实现动态高亮多个关键字的功能。 首先,我们要明白动态高亮的基本思路:遍历DOM树,查找包含关键字的元素,然后用特定的CSS样式(如背景色或边框)来突出这些关键字。jQuery提供了...
最近开发的时候做了textarea 高亮关键字,尝试过很多方法,比如用iframe,和编辑器替换,当然这也是一个方法,但是原来是用textbox的内容要达到兼容这两种方法是做不到的,所以这里是使用jquery插件和jquery核心文件搞的...
**jQuery高亮插件——实现文本高亮与关键词查找** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。在网页开发中,有时我们需要对页面上的特定文本或者关键词进行...
在给定的“jQuery 实现搜索查找目标字符加红高亮功能.rar”压缩包中,包含了一个实现关键词高亮显示的 jQuery 实例。这个功能对于提升用户在网页上的搜索体验具有重要意义,因为用户可以快速地识别出他们正在寻找的...
jQuery.Mark是一款强大的JavaScript插件,专门用于在网页文本中实现关键词高亮显示。这款插件以其易用性和灵活性而受到开发者的青睐,尤其适合那些希望突出显示页面内特定词汇或短语的应用场景。通过使用jQuery.Mark...
纯客户端页面关键字搜索高亮jQuery插件,这里就是一个方法,没有打包,很好用!只需要调用$("tbody").textSearch("查阅"); 这种方式就OK,文档内容付有使用方式,下载后请谨记原著!
jQuery.Mark插件是一款用于在网页文本中实现搜索关键字高亮显示的工具,它极大地简化了在HTML内容中突出显示匹配关键字的过程。这个插件基于流行的JavaScript库jQuery构建,旨在为用户提供一个直观且易于使用的解决...
用户输入搜索关键字后,代码会查找页面中与关键字匹配的元素,并将这些元素的内容高亮显示。这通常涉及到对HTML文本的正则表达式匹配和DOM操作,如添加或移除CSS类来改变匹配文本的样式。 在提供的文件列表中: 1. ...
本示例中的“jQuery搜索框输入下拉文字高亮显示”是一个常见的用户界面功能,常见于许多网站的搜索功能中。这个功能的主要目标是提升用户体验,使用户能够更直观地找到与其输入内容匹配的选项。 首先,让我们理解这...
在处理含有`iframe`的页面时,jQuery.Mark插件也能跨`iframe`进行搜索和高亮。这在展示嵌入式内容或者在框架结构的网页中尤为重要,确保用户在任何地方都能看到他们搜索的关键词。 ### 使用方法 使用jQuery.Mark...
【jQuery搜索框输入下拉文字高亮代码】是一种常见的网页交互功能,主要用于提高用户体验,让用户在搜索时能够快速定位到含有关键词的结果。该功能通过JavaScript库jQuery实现,它结合了模糊搜索和高亮显示的技术,...
jQuery代码着色高亮显示特效是一种常见的网页开发技术,它能增强代码的可读性和美观性,使得在网页上展示代码样例时更加直观。这个压缩包“jQuery代码着色高亮显示特效.zip”可能包含了一个实现此类效果的示例项目,...
综上所述,通过结合HTML、CSS和jQuery,我们可以轻松地实现文本中的关键字高亮显示,甚至配合遮罩层效果,增强用户体验。这种技术广泛应用于文章预览、搜索结果突出显示以及富文本编辑器等多个场景。
在本文中,我们将探讨如何使用jQuery实现搜索页面关键字的功能,这可以帮助用户快速定位到他们感兴趣的信息。 首先,我们需要一个HTML结构来展示文本内容和搜索功能。在给出的示例中,可以看到有三个`<p>`标签分别...
要实现页面关键词的高亮显示功能,可以使用jQuery框架结合自定义插件来完成。在本篇文章中,将详细探讨如何通过jQuery插件highlight来实现该功能,特别适用于中文多词搜索的场景。 首先,介绍jQuery插件highlight的...
总之,jQuery Highlighter插件是提升网页交互体验的强大工具,通过其丰富的功能和易用的API,开发者可以方便地在网页中实现关键词高亮,增强用户的阅读和搜索体验。在实际应用中,结合项目的具体需求进行适当的定制...