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 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
js Dom实现换肤效果
Oct 21 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 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
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
wxPython多个窗口的基本结构
2019/11/19 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
出纳岗位职责范本
2013/12/01 职场文书
公司活动邀请函
2014/01/24 职场文书
消防安全管理制度
2014/02/01 职场文书
中药专业自荐信范文
2014/03/18 职场文书
论文指导教师评语
2014/04/28 职场文书
新闻编辑求职信
2014/07/13 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
企业百日安全活动总结
2015/05/07 职场文书
担保书范文
2019/07/09 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
python三子棋游戏
2022/05/04 Python