jquery 输入框查找关键字并提亮颜色的实例代码


Posted in jQuery onJanuary 23, 2018

实例代码如下所示:

<div>
  <a class="btn btn-success show" title="Popover title"
     data-container="body" data-toggle="popover" data-placement="bottom"
     data-content="底部的 Popover 中的一些内容"> aaaa </a>
</div>
<script>
  $(function () {
    initPopover();
  })
  function initPopover() {
    $(".show").popover({
      container: "body",
      trigger: " manual"  //手动触发
    }).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>

注意点:

1、不适用于button,a、img等可用

2、show.bs.popover:当调用show 实例方法时立即触发该事件。

shown.bs.popover:当弹出框对完全弹出时触发该事件(将等待 CSS 过渡效果完成)。

hide.bs.popover:当调用hide 实例方法时立即触发该事件。

hidden.bs.popover:当工具提示完全隐藏时触发该事件(将等待 CSS 过渡效果完成)。

3、引入jquery和bootstrap头文件

4、取消冒泡

以上这篇jquery 输入框查找关键字并提亮颜色的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery实现影院选座订座效果
Apr 13 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 #jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 #jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 #jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 #jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 #jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 #jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 #jQuery
You might like
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
javascript几个易错点记录
2014/11/26 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python 元类实例解析
2018/04/04 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
质量工程师岗位职责
2013/11/16 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
小学英语课后反思
2014/04/26 职场文书
设备售后服务承诺书
2014/05/30 职场文书
保护动物的标语
2014/06/11 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
资料员岗位职责
2015/02/10 职场文书
搞笑婚前保证书
2015/02/28 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
入团介绍人意见范文
2015/06/04 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
用python画城市轮播地图
2021/05/28 Python
再谈python_tkinter弹出对话框创建
2022/03/20 Python