新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

这是一款基于jquery实现的高亮显示网页上搜索关

正文实例呈报了jQuery达成高亮显示网页根本词的点子。分享给大家供我们参照他事他说加以考察。具体如下:

那是一款基于jquery完成的高亮突显网页上寻觅关键词的代码,当你在文本框中输入的时候,假如上边包车型客车正文中包蕴你输入的源委,也正是主要字,那么那几个入眼字是会高亮展现的,被动态增长成紫褐,看上去很分明,就如百度快速照相彰显首要词的指南。

运作效果如下图所示:

图片 1

切切实实代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文字高亮显示</title>
<style type="text/css">
.highlight {
  background-color: #fff34d;
  -moz-border-radius: 5px; /* FF1  */
  -webkit-border-radius: 5px; /* Saf3-4 */
  border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5  */
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0 , Chrome */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5 , IE 9.0 */
}
.highlight {
  padding:1px 4px;
  margin:0 -4px;
}
</style>
</head>
<body>
Search: <input type="text" id="text-search" />
<p>This can include web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development. However, among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing markup and coding. Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, or social ntwork services.</p>
(Text from Wikipedia)
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
 var skip = 0;
 if (node.nodeType == 3) {
  var pos = node.data.toUpperCase().indexOf(pat);
  if (pos >= 0) {
  var spannode = document.createElement('span');
  spannode.className = 'highlight';
  var middlebit = node.splitText(pos);
  var endbit = middlebit.splitText(pat.length);
  var middleclone = middlebit.cloneNode(true);
  spannode.appendChild(middleclone);
  middlebit.parentNode.replaceChild(spannode, middlebit);
  skip = 1;
  }
 }
 else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
  for (var i = 0; i < node.childNodes.length;   i) {
  i  = innerHighlight(node.childNodes[i], pat);
  }
 }
 return skip;
 }
 return this.each(function() {
 innerHighlight(this, pat.toUpperCase());
 });
};
jQuery.fn.removeHighlight = function() {
 function newNormalize(node) {
  for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i  ) {
    var child = children[i];
    if (child.nodeType == 1) {
      newNormalize(child);
      continue;
    }
    if (child.nodeType != 3) { continue; }
    var next = child.nextSibling;
    if (next == null || next.nodeType != 3) { continue; }
    var combined_text = child.nodeValue   next.nodeValue;
    new_node = node.ownerDocument.createTextNode(combined_text);
    node.insertBefore(new_node, child);
    node.removeChild(child);
    node.removeChild(next);
    i--;
    nodeCount--;
  }
 }
return this.find("span.highlight").each(function() {
  var thisParent = this.parentNode;
  thisParent.replaceChild(this.firstChild, this);
  newNormalize(thisParent);
 }).end();
};
</script>
<script type="text/javascript">
$(function() {
  $('#text-search').bind('keyup change', function(ev) {
    // pull in the new value
    var searchTerm = $(this).val();
    // remove any old highlighted terms
    $('body').removeHighlight();
    // disable highlighting if empty
    if ( searchTerm ) {
      // highlight the new term
      $('body').highlight( searchTerm );
    }
  });
});
</script>
</body>
</html>

可望本文所述对大家的jquery程序设计有着援助。

你或然感兴趣的篇章:

  • 基于jquery达成导航菜单高亮突显(二种情势)
  • jQuery制作的不凡导航有阴影背景高亮形式窗口
  • Jquery 高亮显示文本中要害的机要字
  • jquery达成带复选框的报表行选中剔除时高亮展现
  • JQuery操作表格(隔行着色,高亮显示,筛选数据)
  • JQuery文本框高亮展现插件代码
  • jQuery完成点击后标识当前美食指南地方(背景高亮菜单)效果
  • Jquery怎么样实现点击时高亮彰显代码
  • jQuery完结鼠标滑过遮罩并高亮呈现效果
  • Jquery 点击开关自动高亮完结原理及代码
  • JQuery 浮动导航栏落成代码
  • 简短的jquery左侧导航栏和页面选中效果
  • jQuery 达成右侧浮动导航菜单功效
  • jQuery完成导航高亮的措施【附demo源码下载】

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于www.301net,转载请注明出处:这是一款基于jquery实现的高亮显示网页上搜索关

您可能还会对下面的文章感兴趣: