cari

Rumah >hujung hadapan web >tutorial js >Kaedah jQuery untuk menyerlahkan kata kunci halaman web

Kaedah jQuery untuk menyerlahkan kata kunci halaman web

PHPz
PHPzasal
2016-05-16 15:46:291275semak imbas

Artikel ini terutamanya memperkenalkan kaedah jQuery untuk menyerlahkan kata kunci halaman web. Ia melibatkan teknik jQuery untuk rentetan halaman dan penggantian biasa. Rakan yang memerlukannya boleh merujuknya:

Ini adalah kod berdasarkan jquery yang menyerlahkan kata kunci carian pada halaman web Apabila anda memasukkan dalam kotak teks, jika teks berikut termasuk kandungan yang anda masukkan, ia adalah kata kunci , maka kata kunci ini akan menjadi. diserlahkan dan ditambah secara dinamik dalam warna kuning, yang akan kelihatan sangat menarik perhatian, sama seperti cara syot kilat Baidu memaparkan kata kunci.

Kesan operasi ditunjukkan dalam rajah di bawah:

Kod khusus adalah seperti berikut: 

<!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(&#39;span&#39;);
  spannode.className = &#39;highlight&#39;;
  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() {
  $(&#39;#text-search&#39;).bind(&#39;keyup change&#39;, function(ev) {
    // pull in the new value
    var searchTerm = $(this).val();
    // remove any old highlighted terms
    $(&#39;body&#39;).removeHighlight();
    // disable highlighting if empty
    if ( searchTerm ) {
      // highlight the new term
      $(&#39;body&#39;).highlight( searchTerm );
    }
  });
});
</script>
</body>
</html>

Di atas ialah keseluruhan kandungan bab ini, lebih banyak Untuk tutorial berkaitan, sila lawati Tutorial Video jQuery!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Perbincangan ringkas tentang susunan pelaksanaan kemahiran JavaScript_javascriptArtikel seterusnya：Perbincangan ringkas tentang susunan pelaksanaan kemahiran JavaScript_javascript

Artikel berkaitan

Lihat lagi