快捷導(dǎo)航

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

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

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

實(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"  //手動觸發(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 過渡效果完成）。

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

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

3、引入jquery和bootstrap頭文件

4、取消冒泡

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

您可能感興趣的文章:

相關(guān)文章

淺談jquery的map()和each()方法
下面小編就為大家?guī)硪黄獪\談jquery的map()和each()方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
jQuery設(shè)置Cookie及刪除Cookie實(shí)例分析
這篇文章主要介紹了jQuery設(shè)置Cookie及刪除Cookie的方法,結(jié)合完整實(shí)例形式分析了jQuery操作cookie的設(shè)置,獲取及刪除等操作技巧,需要的朋友可以參考下
2016-04-04
jquery實(shí)現(xiàn)移動端點(diǎn)擊圖片查看大圖特效
這篇文章主要介紹了jquery實(shí)現(xiàn)移動端點(diǎn)擊圖片查看大圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-11-11
JQuery中的常用事件、對象屬性與使用方法分析
這篇文章主要介紹了JQuery中的常用事件、對象屬性與使用方法,結(jié)合實(shí)例形式分析了jquery事件、對象屬性、方法相關(guān)使用技巧,需要的朋友可以參考下
2019-12-12
使用基于jquery的gamequery插件做JS乒乓球游戲
現(xiàn)在jquery比較流行，用js做游戲的也越來越多了，雖然現(xiàn)在html5出來了，但實(shí)際上要用html5做點(diǎn)啥出來還是得靠javascript，所以學(xué)好js是非常重要的
2011-07-07
jquery獲取form表單input元素值的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query獲取form表單input元素值的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
jQuery中$.extend()用法實(shí)例
這篇文章主要介紹了jQuery中$.extend()用法,實(shí)例分析了extend()方法的功能、定義及相關(guān)的使用技巧,需要的朋友可以參考下
2015-06-06
jquery.blockUI.js上傳滾動等待效果實(shí)現(xiàn)思路及代碼
上傳滾動等待效果想必大家在很多場合都有見過吧，本文將介紹jquery.blockUI.js實(shí)現(xiàn)上傳滾動等待效果，感興趣的你可不要錯(cuò)過了哈，希望可以幫助到你
2013-03-03
jQuery中使用了document和window哪些屬性和方法小結(jié)
未列出常見的比如document.getElementById(),object.addEventListener()等。
2011-09-09
JQuery實(shí)現(xiàn)簡單的圖片滑動切換特效
基于jQuery的一款圖片展示特效代碼,鼠標(biāo)移到圖片上方懸停時(shí)會自動切換成文字簡單顯示,適合做圖片集展示,推薦給大家。
2015-11-11