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模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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
php 读取shell管道传输过来的内容
2010/03/01 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
基于php split()函数的用法详解
2013/06/05 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
python django集成cas验证系统
2014/07/14 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
Python 没有main函数的原因
2020/07/10 Python
python 绘制场景热力图的示例
2020/09/23 Python
Python 实现进度条的六种方式
2021/01/06 Python
程序员跳槽必看面试题总结
2013/06/28 面试题
Ruby如何实现动态方法调用
2012/11/18 面试题
四年级数学教学反思
2014/02/02 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
买房子个人收入证明
2014/10/12 职场文书
民主生活会发言材料
2014/10/20 职场文书
民间借贷被告代理词
2015/05/23 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python