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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery实现日历效果
Sep 11 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
通过php删除xml文档内容的方法
2015/01/23 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
PHP钩子实现方法解析
2019/05/21 PHP
JS 树形递归实例代码
2010/05/18 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
js控制table合并具体实现
2014/02/20 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
python实现多张图片拼接成大图
2019/01/15 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
Django实现跨域请求过程详解
2019/07/25 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
Django 返回json数据的实现示例
2020/03/05 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
pycharm永久激活超详细教程
2020/10/29 Python
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
小学教师学期末自我评价
2013/09/25 职场文书
售后服务科岗位职责范文
2013/11/13 职场文书
业务员岗位职责范本
2013/12/15 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
Python之matplotlib绘制折线图
2022/04/13 Python