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 过滤not()与filter()实例代码
May 10 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 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
ftp类(example.php)
2006/10/09 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
JS 实现完美include载入实现代码
2010/08/05 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
Python 读取位于包中的数据文件
2020/08/07 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers