jquery的 filter()方法使用教程


Posted in jQuery onMarch 22, 2018

定义和用法

filter() 方法返回符合一定条件的元素。

该方法让您规定一个条件。不符合条件的元素将从选择中移除,符合条件的元素将被返回。

该方法通常用于缩小在被选元素组合中搜索元素的范围。

提示:filter() 方法是与 not() 方法相对的。

 filter()是根据括号中的 属性来进行筛选 比如:$(“p”).filter(“p”) 这样是不允许的。filter括号里只一些属性,或者包含什么的,不能是一个元素,例如”p”

//filter() --获取具有某些属性值的标签 :(指定的对象集合进行过滤)
  $("li").filter(".item-1") //获取class属性值为item-1的li元素
  $("li").filter(":even").css("background", "red"); //获取所有偶数号的li元素,并将它们的背景颜色设为红色
  $("li").filter(".item-1,#abc").css("background-color", "yellow"); //获取class属性值为item-1的所有li标签 ,同时获取id属性值为abc的所有li标签
  $("p").filter(".selected, :first");//获取class属性值为selected的所有P标签,同时获取第一个P标签

//:contains() --获取标签里包含了某些文字的标签 (contains是判断文本的)
  //jQuery:has()和jQuery:contains()两个方法比较类似。不同点在于:has是判断标签的 contains是判断文本的
  $("p p:contains('测试')").text(); //获取p标签下包含“测试”的p标签的text值 //打印一下,结果为“测试1 测试2”
  //alert($("p").contains("测试").text()); //不能这么用,提示错误“contains不是一个函数”

html

<div class="model_content" style="">
      <div class="model_content_search layui-bg-gray">
        <form class="layui-form">
          <div class="layui-form-item fl" style="margin-top: 15px;">
            <label class="layui-form-label" style="width:66px;">选择框</label>
            <div class="layui-input-inline" style="width:174px;">
              <input id="search_val" class="layui-input" name="keyword" type="text" placeholder="请输入关键字">
            </div>
          </div>
          <div class="layui-input-inline fl" style="margin-top: 15px;">
            <button class="layui-btn">搜索</button>
          </div>
          <div class="clear"></div>
        </form>
      </div>
      <div class="search_result">
        <div class="mapAddress">
          <ul>
            <li>
              <div class="addressInfo">
                <h3>要素大市场</h3>
                <span class="bold">地址:</span>徽州大道与锦绣大道交叉口<br>
              </div>
            </li>
            <li>
              <div class="addressInfo">
                <h3>锦绣大道</h3>
                <span class="bold">地址:</span>徽州大道与锦绣大道交叉口<br>
              </div>
            </li>
            <li>
              <div class="addressInfo">
                <h3>蜀山区</h3>
                <span class="bold">地址:</span>徽州大道与锦绣大道交叉口<br>
              </div>
            </li>
            <li>
              <div class="addressInfo">
                <h3>瑶海区</h3>
                <span class="bold">地址:</span>徽州大道与锦绣大道交叉口<br>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

 //input中输入筛选
    var $sub2 = $("#search_val");
    $sub2.on("input", function () {
      var $iptVal2 = $sub2.val();
      $(".mapAddress li").hide();
      $(".mapAddress .addressInfo h3").filter(":contains('" + $iptVal2 + "')").parents("li").show();
    });

总结

以上所述是小编给大家介绍的jquery的 filter()方法使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery dataTable 获取某行数据
May 05 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 #jQuery
jQuery替换节点元素的操作方法
Mar 18 #jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 #jQuery
jQuery中each方法的使用详解
Mar 18 #jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 #jQuery
JQuery选中select组件被选中的值方法
Mar 08 #jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 #jQuery
You might like
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
JS高级笔记
2011/07/13 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
setTimeout学习小结
2017/02/08 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python生成器(Generator)详解
2015/04/13 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
python根据文本生成词云图代码实例
2019/11/15 Python
浅析python中的del用法
2020/09/02 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
升旗仪式演讲稿
2014/05/08 职场文书
环保标语口号
2014/06/13 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
python实现高效的遗传算法
2021/04/07 Python