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 相关文章推荐
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
vue实现在线翻译功能
Sep 27 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
php date()日期时间函数详解
2010/05/16 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
javascript整除实现代码
2010/11/23 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python selenium如何设置等待时间
2016/09/15 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
python中append实例用法总结
2019/07/30 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
机关党员进社区活动总结
2014/07/05 职场文书
2014年信息技术工作总结
2014/12/16 职场文书