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使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery 动态粒子效果示例代码
Jul 07 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
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
详解Vite的新体验
2021/02/22 Javascript
Python实现按中文排序的方法示例
2018/04/25 Python
学习Django知识点分享
2019/09/11 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
成品仓管员岗位职责
2013/12/11 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
房产转让协议书
2014/04/11 职场文书
法务专员岗位职责
2015/02/14 职场文书
保研推荐信范文
2015/03/25 职场文书
师德承诺书2015
2015/04/28 职场文书