Kaedah jQuery untuk menyerlahkan kata kunci halaman web
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('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>Di atas ialah keseluruhan kandungan bab ini, lebih banyak Untuk tutorial berkaitan, sila lawati Tutorial Video jQuery!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk menghantar halaman web ke desktop sebagai pintasan dalam pelayar Edge?
Mar 14, 2024 pm 05:22 PM
Bagaimana untuk menghantar halaman web ke desktop sebagai pintasan dalam pelayar Edge? Ramai pengguna kami ingin memaparkan halaman web yang kerap digunakan pada desktop sebagai pintasan untuk kemudahan membuka terus halaman akses, tetapi mereka tidak tahu bagaimana untuk melakukannya Sebagai tindak balas kepada masalah ini, editor isu ini akan berkongsi penyelesaian dengan majoriti pengguna , mari kita lihat kandungan yang dikongsi dalam tutorial perisian hari ini. Kaedah pintasan menghantar halaman web ke desktop dalam pelayar Edge: 1. Buka perisian dan klik butang "..." pada halaman. 2. Pilih "Pasang tapak ini sebagai aplikasi" dalam "Aplikasi" dalam pilihan menu lungsur. 3. Akhir sekali, klik pada tetingkap pop timbul
Bagaimana untuk melaraskan apertur pada Xiaomi Mi 14 Ultra?
Mar 19, 2024 am 09:01 AM
Melaraskan saiz apertur mempunyai kesan penting pada kesan foto Xiaomi Mi 14 Ultra memberikan fleksibiliti yang tidak pernah berlaku sebelum ini dalam pelarasan apertur kamera. Untuk membolehkan semua orang melaraskan apertur dengan lancar dan merealisasikan pelarasan percuma saiz apertur, editor di sini membawakan anda tutorial terperinci tentang cara menetapkan apertur pada Xiaomi Mi 14Ultra. Bagaimana untuk melaraskan apertur pada Xiaomi Mi 14Ultra? Mulakan kamera, tukar kepada "Mod Profesional", dan pilih kamera utama - kanta W. Klik pada apertur, buka dail apertur, A adalah automatik, pilih f/1.9 atau f/4.0 mengikut keperluan.
Bagaimana untuk menetapkan bahasa Cina dalam Cheat Engine?
Mar 18, 2024 pm 01:20 PM
Ce Modifier (CheatEngine) ialah alat pengubahsuaian permainan yang didedikasikan untuk mengubah suai dan menyunting memori permainan Jadi bagaimana untuk menetapkan bahasa Cina dalam CheatEngine Seterusnya, editor akan memberitahu anda bagaimana untuk menetapkan bahasa Cina dalam Ce Modifier. Dalam perisian baharu yang kami muat turun, ia boleh mengelirukan untuk mendapati bahawa antara muka itu bukan dalam bahasa Cina. Walaupun perisian ini tidak dibangunkan di China, terdapat cara untuk menukarnya kepada versi Cina. Masalah ini boleh diselesaikan dengan hanya menggunakan patch Cina. Selepas memuat turun dan memasang perisian CheatEngine (ce modifier), buka lokasi pemasangan dan cari folder bernama bahasa, seperti yang ditunjukkan dalam rajah di bawah
Apakah yang perlu saya lakukan jika imej pada halaman web tidak boleh dimuatkan? 6 penyelesaian
Mar 15, 2024 am 10:30 AM
Beberapa netizen mendapati bahawa apabila mereka membuka halaman web pelayar, gambar di halaman web itu tidak dapat dimuatkan untuk masa yang lama. Saya menyemak bahawa rangkaian adalah normal, jadi apakah masalahnya? Editor di bawah akan memperkenalkan kepada anda enam penyelesaian kepada masalah bahawa imej halaman web tidak boleh dimuatkan. Imej halaman web tidak boleh dimuatkan: 1. Masalah kelajuan Internet Halaman web tidak dapat memaparkan imej Ia mungkin kerana kelajuan Internet komputer agak perlahan dan terdapat lebih banyak perisian yang dibuka pada komputer Dan imej yang kami akses adalah agak besar mungkin disebabkan oleh tamat masa pemuatan Akibatnya, gambar tidak dapat dipaparkan Anda boleh mematikan perisian yang mengambil kelajuan rangkaian dan menyemaknya dalam pengurus tugas. 2. Terlalu ramai pelawat Jika halaman web tidak dapat memaparkan gambar, mungkin kerana halaman web yang kami lawati telah dilawati pada masa yang sama.
DaVinci Resolve Studio kini menyokong pengekodan perkakasan AV1 untuk kad grafik AMD
Mar 06, 2024 pm 10:04 PM
Berita terkini, lackMagic telah melancarkan kemas kini beta awam 18.5PublicBeta2 bagi perisian penyuntingan video DaVinci Resolve Studio, membawakan sokongan pengekodan AV1 kepada kad grafik AMD Radeon. Selepas mengemas kini kepada versi terkini, pengguna kad grafik AMD akan dapat memanfaatkan pecutan perkakasan untuk pengekodan AV1 dalam DaVinci Resolve Studio. Walaupun pegawai tidak menyatakan seni bina atau model yang disokong, diharapkan semua pengguna kad grafik AMD boleh mencuba ciri ini. Pada 2018, AOMedia mengeluarkan standard pengekodan video baharu AV1 (AOMediaVideoCodec1.0). AV1 dihasilkan oleh beberapa
Bagaimana untuk mengemas kini Honor MagicOS 8.0 pada Honor 90 GT?
Mar 18, 2024 pm 06:46 PM
Honor 90GT ialah telefon pintar kos efektif dengan prestasi cemerlang dan pengalaman pengguna yang cemerlang. Walau bagaimanapun, kadangkala kita mungkin menghadapi beberapa masalah, seperti bagaimana untuk mengemas kini Honor MagicOS8.0 pada Honor 90GT? Langkah ini mungkin berbeza untuk telefon mudah alih yang berbeza dan model yang berbeza Jadi, mari kita bincangkan cara meningkatkan sistem dengan betul. Bagaimana untuk mengemas kini Honor MagicOS 8.0 pada Honor 90GT Menurut berita pada 28 Februari, Honor hari ini menolak kemas kini beta awam MagicOS8.0 untuk tiga telefon mudah alihnya 90GT/100/100Pro Nombor versi pakej ialah 8.0.0.106 (C00E106R3P1) 1. . Pastikan Kehormatan anda Bateri 90GT dicas sepenuhnya;
Planet Mojo: Membina metaverse permainan Web3 daripada permainan catur auto Mojo Melee
Mar 14, 2024 pm 05:55 PM
Projek permainan Metaverse popular yang diasaskan dalam kitaran crypto terakhir sedang mempercepatkan pengembangannya. Pada 4 Mac, PlanetMojo, platform metaverse permainan Web3, mengumumkan beberapa perkembangan penting dalam ekologi permainannya, termasuk pengumuman permainan parkour yang akan datang GoGoMojo, pelancaran musim baharu "Way of War" dalam auto-catur perdana. permainan MojoMelee, dan sambutan siri ETH pertama "WarBannerNFT" yang baharu dilancarkan musim ini dengan kerjasama MagicEden. Selain itu, PlanetMojo juga mendedahkan bahawa mereka merancang untuk melancarkan versi mudah alih Android dan iOS MojoMelee pada akhir tahun ini. Projek ini akan dilancarkan pada penghujung tahun 2021. Selepas hampir dua tahun bekerja keras dalam pasaran beruang, ia akan siap tidak lama lagi.
Bagaimana untuk membuka php pada halaman web
Mar 22, 2024 pm 03:20 PM
Melaksanakan kod PHP dalam halaman web memerlukan memastikan pelayan web menyokong PHP dan dikonfigurasikan dengan betul. PHP boleh dibuka dalam tiga cara: * **Persekitaran pelayan:** Letakkan fail PHP dalam direktori akar pelayan dan aksesnya melalui penyemak imbas. * **Persekitaran Pembangunan Bersepadu: **Letakkan fail PHP dalam direktori akar web yang ditentukan dan aksesnya melalui penyemak imbas. * **Pelayan Jauh:** Akses fail PHP yang dihoskan pada pelayan jauh melalui alamat URL yang disediakan oleh pelayan.
