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. >...45a2772a6b6107b401db3c9b82c049c2"
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>如下是搜索区域!</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!