Hervorhebung in jQuery bezieht sich auf die Hervorhebung bei der Suche nach Schlüsselwörtern auf der Seite. Die Implementierungsmethode lautet: 1. Rufen Sie zuerst die hervorzuhebende Zeile ab, rufen Sie den Suchinhalt ab, durchlaufen Sie dann die gesamte Inhaltszeile und fügen Sie schließlich die Hervorhebungsfarbe hinzu 2. Verwenden Sie das Hervorhebungs-Plug-in „jQuery“. Fügen Sie die js-Datei nach dem Herunterladen in die HTML-Datei ein und fügen Sie den Stil „$(“h1“) hinzu ")", um den Suchtext hervorzuheben.
Das Betriebssystem dieses Tutorials: Windows 10-System, jQuery Version 3.6.4, Dell G3-Computer. Die Hervorhebung von
jQuery bezieht sich auf die Hervorhebung bei der Suche nach Schlüsselwörtern auf der Seite. Die Implementierungsmethode ist:
Methode 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 sind alle Suchergebnisse und searchContent ist Ihr spezifischer Suchtext.
Hinweis: jQuery muss eingeführt werden
Diese Methode wird nicht empfohlen. Sie scheint in Ordnung zu sein, aber es gibt einen Fehler:
Wenn der Suchinhalt a ist, verwenden Sie var word = $(this).html (); Nach dem Abrufen des HTML-Codes des zu findenden Elements tritt ein Problem wie „Ersetzen Sie ein im Span-Tag durch >... " erscheint.
Was wir brauchen, ist, nur den Textinhalt zu ersetzen, nicht den HTML-Code, also schauen wir uns Methode zwei an.
Methode 2
Diese Methode besteht darin, das JQuery-Highlight-Plug-In zu verwenden.
Gehen Sie zur offiziellen Website, um die js-Datei herunterzuladen: jQuery Highlight Plugin |.
Verweisen Sie diese js-Datei auf Ihre HTML-Datei und fügen Sie dann den Stil hinzu:
<style>
.highlight {background-color: #FFFF88; }
</style>Dann brauchen Sie nur js wie dieses: $("h1").highlight("highlight"); um den Suchtext hervorzuheben.
<!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>Das obige ist der detaillierte Inhalt vonWas wird in jquery hervorgehoben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
