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中each循环的简单回滚操作
May 05 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery实现简单全选框
Sep 13 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
javascript for循环设法提高性能
2010/02/24 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
Python网络编程详解
2017/10/31 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
python动态进度条的实现代码
2019/07/03 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
python3中rank函数的用法
2019/11/27 Python
python的help函数如何使用
2020/06/11 Python
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
电脑租赁公司创业计划书
2014/01/08 职场文书
大学生活动总结模板
2014/07/02 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书