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 call和apply方法
Nov 24 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 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过滤危险html代码
2008/08/18 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
JS小数转换为整数的方法分析
2017/01/07 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
python调用java的Webservice示例
2014/03/10 Python
python绘图库Matplotlib的安装
2014/07/03 Python
跟老齐学Python之编写类之三子类
2014/10/11 Python
使用python绘制常用的图表
2016/08/27 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
Python实现壁纸下载与轮换
2020/10/19 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
小学安全教育材料
2014/02/17 职场文书
工程质量承诺书范文
2014/03/27 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
同学联谊会邀请函
2019/06/24 职场文书