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 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
js选项卡的制作方法
Jan 23 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
js中如何完美的解析数据
Mar 18 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
小程序实现列表倒计时功能
Jan 29 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写的serv-u的web申请账号的程序
2006/10/09 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python3.x实现base64加密和解密
2019/03/28 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
英国著名书店:Foyles
2018/12/01 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
政法学院毕业生求职信
2014/02/28 职场文书
母婴店促销方案
2014/03/05 职场文书
节能环保演讲稿
2014/08/28 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
JavaScript 去重和重复次数统计
2021/03/31 Javascript
php实现自动生成验证码的实例讲解
2021/11/17 PHP