999久久久免费精品国产,成人精品一区二区三区中文字幕 ,国产av无码专区亚洲av毛网站

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

jquery中什么是高亮顯示

betcha

發(fā)布： 2023-06-13 10:12:51

原創(chuàng)

1883人瀏覽過

jQuery中高亮顯示是指對頁面搜索關(guān)鍵詞時進(jìn)行高亮顯示，其實(shí)現(xiàn)辦法：1、先獲取要高亮顯示的行，獲取搜索的內(nèi)容，再遍歷整行內(nèi)容，最后添加高亮顏色；2、使用“jQuery highlight”高亮插件，官網(wǎng)下載js文件后，在html文件中引入js文件并加上樣式，使用“$("h1").highlight("highlight")”即可高亮搜索文本。

jquery中什么是高亮顯示

本教程操作系統(tǒng)：Windows10系統(tǒng)、jQuery 3.6.4版本、Dell G3電腦。

jQuery的高亮顯示，是指對頁面搜索關(guān)鍵詞時進(jìn)行高亮顯示，其實(shí)現(xiàn)的辦法：

方法一

$(function () {
    //1.獲取要高亮顯示的行
    var rowNode = $('.tiBlock_3NhqL');
    //2.獲取搜索的內(nèi)容
    var searchContent = $(".searchInput_29REY").val();
    //3.遍歷整行內(nèi)容，添加高亮顏色
    rowNode.each(function () {
        var word = $(this).html();
        word = word.replace(searchContent, '<span style="color: #c00;">' + searchContent + '</span>');
        $(this).html(word);
    });
});

登錄后復(fù)制

rowNode是全部搜索結(jié)果，而searchContent是你具體的搜索文本。

注意：需要引入jQuery

不推薦這種方式，看起來沒什么問題，但是有個Bug：

當(dāng)搜索內(nèi)容為a的時候，使用var word = $(this).html();獲取待查找元素的html代碼后，會出現(xiàn)“把span標(biāo)簽中的a替換成>...”這樣的問題。

我們需要的是僅僅替換文本內(nèi)容，而不是html代碼，所以來看方法二吧。

方法二

這種方法就是使用jquery highlight高亮插件。

去官網(wǎng)下載js文件： jQuery Highlight Plugin | bartaz @ GitHub

下拉到底部的Where to get it?位置下載。

我現(xiàn)在用的是： http://github.com/bartaz/sandbox.js/raw/master/jquery.highlight.js

把這個js文件引用到你的html文件，然后加上樣式：

<style>
.highlight {background-color: #FFFF88; }
</style>

登錄后復(fù)制

接著只需要js像這樣：$("h1").highlight("highlight"); 就可以高亮搜索文本了。

下面是一個完整實(shí)例：

<!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("請輸入關(guān)鍵字！")
    }
  });
  });
  </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>如下是搜索區(qū)域!</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>你知道或者聽過這個測試嗎，我認(rèn)為你沒有聽過這個測試！</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>

登錄后復(fù)制

以上就是jquery中什么是高亮顯示的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！