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 相关文章推荐
Web开发之JavaScript
Mar 29 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
Js的Array数组对象详解
Feb 22 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 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 json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
给同事的道歉信
2014/01/11 职场文书
就职演讲稿范文
2014/05/19 职场文书
小学校本培训方案
2014/06/06 职场文书
物流专业求职信
2014/06/30 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
公司开业主持词
2015/07/02 职场文书
2016年情人节问候语
2015/11/11 职场文书
Springboot中如何自动转JSON输出
2022/06/16 Java/Android