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的插件教程(Plugin)
Sep 03 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
vuex的简单使用教程
Feb 02 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 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倒计时出现-0情况的解决方法
2016/07/28 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
python 异常处理总结
2016/10/18 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
秋季红领巾广播稿
2014/01/27 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
检讨书范文
2015/01/27 职场文书
档案管理员岗位职责
2015/02/12 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
Java设计模式之享元模式示例详解
2022/03/03 Java/Android