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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jquery插件实现搜索历史
Apr 24 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
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
php读取excel文件的简单实例
2013/08/26 PHP
PHP使用递归生成文章树
2015/04/21 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
php实现socket推送技术的示例
2017/12/20 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python实现图书借阅系统
2019/02/20 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
八年级数学教学反思
2014/01/31 职场文书
法人代表委托书
2014/04/04 职场文书
优秀员工评优方案
2014/06/13 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis