Penyertaan dalam jQuery merujuk kepada penyerlahan apabila mencari kata kunci pada halaman Kaedah pelaksanaannya ialah: 1. Mula-mula dapatkan baris untuk diserlahkan, dapatkan kandungan carian, kemudian rentas keseluruhan baris kandungan, dan akhirnya. Tambah warna sorotan; 2. Gunakan pemalam sorotan "jQuery highlight" Selepas memuat turun fail js dari tapak web rasmi, masukkan fail js ke dalam fail html dan tambah gaya, gunakan "$("h1"). ("highlight")" untuk menyerlahkan teks carian.
Sistem pengendalian untuk tutorial ini: Sistem Windows 10, versi jQuery 3.6.4, komputer Dell G3.
Penyertaan jQuery merujuk kepada penyerlahan apabila mencari kata kunci pada halaman Kaedah untuk mencapai ini ialah:
Kaedah 1
$(function () {
//1.获取要高亮显示的行
var rowNode = $('.tiBlock_3NhqL');
//2.获取搜索的内容
var searchContent = $(".searchInput_29REY").val();
//3.遍历整行内容，添加高亮颜色
rowNode.each(function () {
var word = $(this).html();
word = word.replace(searchContent, '<span style="color: #c00;">' + searchContent + '</span>');
$(this).html(word);
});
});rowNode adalah semua. hasil carian dan kandungan carian ialah teks carian khusus anda.
Nota: jQuery perlu diperkenalkan
Kaedah ini nampaknya baik, tetapi terdapat pepijat:
Apabila. kandungan carian ialah a Apabila menggunakan perkataan var = $(this).html(); "> akan muncul. >..."
Apa yang kita perlukan ialah menggantikan kandungan teks sahaja, bukan kod html, jadi mari kita lihat kaedah kedua.
Kaedah 2
Kaedah ini adalah untuk menggunakan pemalam sorotan jquery.
Pergi ke tapak web rasmi untuk memuat turun fail js: jQuery Highlight Plugin | bartaz @ GitHub
Tatal ke bawah ke lokasi Di mana untuk mendapatkannya di bahagian bawah untuk memuat turun.
Apa yang saya gunakan sekarang ialah: http://github.com/bartaz/sandbox.js/raw/master/jquery.highlight.js
Rujuk fail js ini kepada Fail html anda, dan kemudian tambah gaya:
<style>
.highlight {background-color: #FFFF88; }
</style>Kemudian anda hanya memerlukan js seperti ini: $("h1").highlight("highlight");
Berikut ialah contoh lengkap:
<!DOCTYPE html>
<html>
<head>
<title>regex.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../jquery/jquery-1.11/jquery.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-highlight/jquery-hightlight.js"></script>
<style>
.highlight {background-color: #FFFF88; }
</style>
<script>
$(function(){
$('#search').click(function(){
var key = $('#key').val();
if(key != undefined && key.length > 0) { //注意要判断key是否为undefined
var body = $('#body');
body.removeHighlight();
body.highlight(key);
} else {
alert("请输入关键字！")
}
});
});
</script>
</head>
<body>
<div>
<input id="key" type="text">
<input id="search" type="button" value="搜索">
</div>
<div id="head">
This is a test head!
<div>
input the search key.
</div>
<div>
click "搜索" button.
</div>
</div>
<h1 id="如下是搜索区域">如下是搜索区域!</h1>
<div id="body">
This is a test body!
<div>
This is a test, a test, test, tes, te, t!
Do you know and listen this test, I think you don't know this test!
</div>
<div>
这是一个简答的测试,测试.
<p>你知道或者听过这个测试吗，我认为你没有听过这个测试！</p>
</div>
<div>
This is a test, a test, test, tes, te, t!
I know't know this test, yes, this test is a not famous test!
<p>Follow me test, to test the test! I don't know what do you say?</p>
</div>
<div>
<div>
这是一个简答的测试,测试.
我不知道这个测试，是的，这不是一个注明的测试，
<span>跟随我，去测试这个测试，我都不知道我在说什么！</span>
</div>
</div>
<div>
What do you say? test, only a test?
<p>你们说什么呢？测试，一个测试？</p>
</div>
</div>
</body>
</html>Atas ialah kandungan terperinci Apa yang diserlahkan dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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
SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.
PhpStorm versi Mac
Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa
