• 浅谈今天所学的Jquery 中的filter()方法


         一直以来对JQuery很喜欢,它封装了JavaScript,用起来更方便,不过无论什么方法,必须要理解这个方法本来的含义,此外就是要在自己的逻辑上整理清楚,这样才能做到更多的效果。“遇到问题了,多看手册”这句话是当初学脚本语言的时候老师经常说的一句话,当初很郁闷他这句话,不过现在发现,封住的方法的确多得很,只有不断地学习,不断地用到,才会发现这些方法的区别,也才能更加合理地利用这些前辈们为我们打造好的各种包。

         先来说说今天认识到的filter()方法吧。

         这个方法主要用来遍历列表中的元素,或者有着并列关系的元素,filter()方法其实是个过滤选择器,旨在从众多的并列的“兄弟姐妹”中查找到符合匹配条件的那一来。

         我们先来看看API中给我们提供的例子:

      ==============例1=============  

        (备注:这里就不写那么多引入的js和css,大家可以自己随意添加)

    <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
    </ul>
     
    $(document).ready(function(){                                      ------>此处保持好习惯,最好等页面加载完了再运行这段代码
    $( "li" ).filter( ":even" ).css( "background-color", "red" );   -------->意思是找到元素li中的偶元素(:even),并且设置这些偶元素的样式为"background-color", "red"
    });
     
    结果展示应该是“list item 1”  “list item 3”   “list item 5”  为背景红色
    (备注,在这里元素的指数是从0开始的)
     
    ====================例2========================
     
    <ul>
    <li><strong>list</strong> item 1 - one strong tag</li>
    <li><strong>list</strong> item <strong>2</strong> -two <span>strong tags</span></li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
    </ul>
     
     
     
    $(document).ready(function(){
    $( "li" ).filter(function( index ) {
    return $( "strong", this ).length === 1;}).css( "background-color", "red" );
    });
     
    这段代码似乎变得有点复杂了,但是道理其实是一样的,首先从$的地方开始找,先是找到li,在所有的li元素中找到含有strong元素,并且判断这个li 中的strong的个数,找到含有一个strong的那个,并且更改它的背景颜色。结果是只有第一个<li><strong>list</strong> item 1 - one strong tag</li>  变成了红色。
     
    $(document).ready(function(){
    $( "li" ).filter(function( index ) {return index % 3 === 2;})
    .css( "background-color", "red" );
    });
     
    同样是上边的html,下面这段js的含义是说找到li,并且判断它的指数,是否是除3余2的那个,找到后改变它的背景色。
    结果为<li>list item 3</li>和<li>list item 6</li>都改变了背景颜色,因为它们的指数一个为2,另一个为5,取余后都是2
     
    ====================例3========================
     
     
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>filter demo</title>
    <style>
    div {
    60px;
    height: 60px;
    margin: 5px;
    float: left;
    border: 2px white solid;
    }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     
    <div></div>
    <div class="middle"></div>
    <div class="middle"></div>
    <div class="middle"></div>
    <div class="middle"></div>
    <div></div>
     
    <script>
    $(document).ready(function(){
    $( "div" )
    .css( "background", "#c8ebcc" )
    .filter( ".middle" )
    .css( "border-color", "red" );
    });
    </script>
     
    </body>
    </html>
     
     
    结果为所有的div都添加了背景色#c8ebcc,而所有的.middle的那div都加了红边框
     
     
     
     
    =====================结语=======================
     
    学习JQuery的道路还很长远,需要每天积累,希望正在学习这个语言的朋友们,相互交流,共同进步。
     
     
     
     
  • 相关阅读:
    SpringBoot Lombok使用详解1(基本介绍、安装配置、var和val)
    SpringBoot 实现文件上传2(多文件上传、常用上传参数配置)
    SpringBoot 解决跨域请求问题(No 'AccessControlAllowOrigin' header is...)
    SpringBoot 实现静态资源的访问(附:修改过滤规则、静态资源位置)
    SpringBoot 获取Get请求参数详解(附样例:非空、默认值、数组、对象)
    SpringBoot 实现文件上传1(单文件上传、常用上传参数配置)
    SpringBoot 获取POST请求参数详解(附样例:表单数据、json、数组、对象)
    SpringBoot @ControllerAdvice的使用详解3(请求参数预处理 @InitBinder)
    SpringBoot @ControllerAdvice的使用详解1(全局异常处理 @ExceptionHandler)
    解决自动禁用Flash打开摄像头询问
  • 原文地址:https://www.cnblogs.com/zmseo/p/4131628.html
Copyright © 2020-2023  润新知