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新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
原生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的FTP学习(四)
2006/10/09 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
php中动态调用函数的方法
2015/03/16 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
js函数排序的实例代码
2013/07/01 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
关于Python 3中print函数的换行详解
2017/08/08 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
python join方法使用详解
2019/07/30 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
工商管理专业毕业生求职信
2014/05/26 职场文书
人大调研汇报材料
2014/08/14 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers