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+pjax简单示例汇总
Apr 21 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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
mysql5详细安装教程
2007/01/15 PHP
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
PHP比你想象的好得多
2014/11/27 PHP
javascript 闭包疑问
2010/12/30 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
JavaScript图片处理与合成总结
2018/03/04 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
Django实现学员管理系统
2019/02/26 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
英文简历自荐信范文
2013/12/11 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
师德师风自查材料
2014/10/14 职场文书
违纪学生保证书
2015/02/27 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书