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事件 delegate()使用方法介绍
Oct 30 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
js自定义回调函数
Dec 13 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
Vue.js动态组件解析
Sep 09 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
swiper实现异形轮播效果
Nov 28 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像数组一样存取和修改字符串字符
2014/03/21 PHP
php获取根域名方法汇总
2014/10/28 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
python实现简单登陆系统
2018/10/18 Python
python3实现名片管理系统
2020/11/29 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
安全标准化汇报材料
2014/02/03 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
国庆节慰问信
2015/02/15 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang