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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery实现简单三级联动效果
Sep 05 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
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
vue 组件简介
2020/07/31 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python生成器(Generator)详解
2015/04/13 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
对python中UDP,socket的使用详解
2019/08/22 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
如何在django中实现分页功能
2020/04/22 Python
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
大学毕业生通用求职信
2013/09/28 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
财务主管的岗位职责
2013/12/30 职场文书
超市重阳节活动方案
2014/02/10 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
python对文档中元素删除,替换操作
2022/04/02 Python