快捷導(dǎo)航

jquery 輸入框查找關(guān)鍵字并提亮顏色的實(shí)例代碼

更新時(shí)間：2018年01月23日 09:07:44 作者：water_Popcorn

下面小編就為大家分享一篇jquery 輸入框查找關(guān)鍵字并提亮顏色的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

實(shí)例代碼如下所示：

<div>
  <a class="btn btn-success show" title="Popover title"
     data-container="body" data-toggle="popover" data-placement="bottom"
     data-content="底部的 Popover 中的一些內(nèi)容"> aaaa </a>
</div>
<script>
  $(function () {
    initPopover();
  })
  function initPopover() {
    $(".show").popover({
      container: "body",
      trigger: " manual"  //手動(dòng)觸發(fā)
    }).on('show.bs.popover', function () {
      $(this).addClass("popover_open");
    }).on('hide.bs.popover', function () {
      $(this).removeClass("popover_open");
    });
    $(".show").click(function () {
      if ($(this).hasClass("popover_open")) {
        $(this).popover("hide")
      } else {
        $(".popover_open").popover("hide");
        $(this).popover("show");
      }
      var e = arguments.callee.caller.arguments[0] || event;
      e.stopPropagation();
    });
    $(document).click(function () {
      $(".show").popover("hide");
    });
  }
</script>

注意點(diǎn)：

1、不適用于button，a、img等可用

2、show.bs.popover:當(dāng)調(diào)用show 實(shí)例方法時(shí)立即觸發(fā)該事件。

shown.bs.popover:當(dāng)彈出框?qū)ν耆珡棾鰰r(shí)觸發(fā)該事件（將等待 CSS 過(guò)渡效果完成）。

hide.bs.popover:當(dāng)調(diào)用hide 實(shí)例方法時(shí)立即觸發(fā)該事件。

hidden.bs.popover:當(dāng)工具提示完全隱藏時(shí)觸發(fā)該事件（將等待 CSS 過(guò)渡效果完成）。

3、引入jquery和bootstrap頭文件

4、取消冒泡

以上這篇jquery 輸入框查找關(guān)鍵字并提亮顏色的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery第一次運(yùn)行頁(yè)面默認(rèn)觸發(fā)點(diǎn)擊事件的實(shí)例
下面小編就為大家分享一篇jQuery第一次運(yùn)行頁(yè)面默認(rèn)觸發(fā)點(diǎn)擊事件的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
用jquery仿做發(fā)微博功能示例
發(fā)微博功能描述:當(dāng)點(diǎn)擊輸入框時(shí)，提示的文字會(huì)去掉；當(dāng)光標(biāo)離開(kāi)時(shí)，如果沒(méi)有輸入任何內(nèi)容，提示的文字會(huì)恢復(fù),需要的朋友可以參考下
2014-04-04
MVC+jQuery.Ajax異步實(shí)現(xiàn)增刪改查和分頁(yè)
這篇文章主要為大家詳細(xì)介紹了MVC結(jié)合jQuery.Ajax異步實(shí)現(xiàn)增刪改查和分頁(yè)的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-05-05
Jquery判斷form表單數(shù)據(jù)是否變化
這篇文章主要為大家詳細(xì)介紹了Jquery判斷form表單數(shù)據(jù)是否變化的方法，感興趣的小伙伴們可以參考一下
2016-03-03
jQuery插件slider實(shí)現(xiàn)拖動(dòng)滑塊選取價(jià)格范圍
jquery滑塊（slider）允許用戶從一個(gè)有限的范圍內(nèi)選擇一個(gè)數(shù)值。當(dāng)沿著軌道移動(dòng)滑塊控件時(shí)，將顯示一個(gè)表示當(dāng)前值的提示框，用戶可通過(guò)設(shè)置它的屬性來(lái)自定義滑塊。
2015-04-04
利用js(jquery)操作Cookie的方法說(shuō)明
本篇文章主要是對(duì)利用js(jquery)操作Cookie的方法進(jìn)行了詳細(xì)的說(shuō)明介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
jquery easyUI中ajax異步校驗(yàn)用戶名
這篇文章主要為大家詳細(xì)介紹了jquery easyUI中ajax異步校驗(yàn)用戶名，感興趣的小伙伴們可以參考一下
2016-08-08
jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
這篇文章主要介紹了jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
Jquery插件之多圖片異步上傳
為促進(jìn)大家交流與學(xué)習(xí)，開(kāi)源此插件。在此感謝非老大開(kāi)源！不多說(shuō)了，先圖片后代碼。
2010-10-10
目前流行的JavaScript庫(kù)的介紹及對(duì)比
為了簡(jiǎn)化JavaScript的開(kāi)發(fā)，一些JavaScript程序庫(kù)誕生了，下面是目前集中流行的JavaScript程序庫(kù)的介紹和對(duì)比，感興趣的朋友可以了解下
2013-09-09