jQuery使用contains过滤器实现精确匹配方法详解


Posted in Javascript onFebruary 25, 2016

本文实例讲述了jQuery使用contains过滤器实现精确匹配的方法。分享给大家供大家参考,具体如下:

:contains 选择器选取包含指定字符串的元素。

该字符串可以是直接包含在元素中的文本,或者被包含于子元素中。

经常与其他元素/选择器一起使用,来选择指定的组中包含指定文本的元素,如:

$("p:contains(is)") 表示选择所有包含 "is" 的 <p> 元素。

再如:

$("p:contains(张三)") 或 $("p:contains("张三")")  表示选择所有包含 "张三" 的 <p> 元素。

在该选择器里也可以使用变量来达到选取的目的,如:

$(document).ready(function(){
var ddd="John";
$("div:contains(‘" + ddd + "‘)").css("color", "#f00");
});

我们也可以将jquery的filter方法和contains方法一起使用来达到更加模糊匹配的目的,如:

$(document).ready(function(){
$(".box").filter(":contains(李)").css("color", "#f00");
});

表示将包含”李“的box的文字颜色设置为红色。

jQuery使用contains过滤器实现精确匹配:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <!--<script src="jquery.min.js" type="text/javascript"></script>-->
  <script src="jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      //根据select中的option的文本来执行选中
      //$("#selectbox option[text='第二项']");
      //$("#selectbox option").filter("[text='第二项']");
      //上面两种写法都是错误的
      //正确写法
      $("#btn4").click(function () {
        var $option =$("#selectbox option:contains('第二项')").map(function(){
          if ($(this).text() == "第二项") {
            return this;
          }
        });
        alert($option.length > 0 ? "有对象" : "无对象");
        $option.attr("selected", true);
      });
    });
  </script>
</head>
<body>
  <form id="form1">
  <div>
    <select id="selectbox">
      <option value="1">第一项</option>
      <option value="2">第二项</option>
      <option value="21">第二项1</option>
    </select>
    <input type="button" id="btn4" value="contains测试" />
  </div>
  </form>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
javascript解析json实例详解
Nov 05 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
vue计算属性及使用详解
Apr 02 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 #Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 #Javascript
JavaScript实现多种排序算法
Feb 24 #Javascript
JavaScript中的时间处理小结
Feb 24 #Javascript
JS设置cookie、读取cookie
Feb 24 #Javascript
jquery form表单获取内容以及绑定数据
Feb 24 #Javascript
javascript cookie的简单应用
Feb 24 #Javascript
You might like
解决File size limit exceeded 错误的方法
2013/06/14 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
一段实时更新的时间代码
2006/07/07 Javascript
DWR Ext 加载数据
2009/03/22 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
angular.bind使用心得
2015/10/26 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
编程语言Python的发展史
2014/09/26 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python数据结构之列表和元组的详解
2017/09/23 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
python列表返回重复数据的下标
2020/02/10 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
药学专业毕业生求职信
2013/10/20 职场文书
服装促销活动方案
2014/02/23 职场文书
信息技术培训感言
2014/03/06 职场文书
电气工程师岗位职责
2015/02/12 职场文书
党员读书活动心得体会
2016/01/14 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL