简单概述JQuery的几种过滤方法

为了更加灵活地的操作元素，除了选择器之外，JQuery还为我们提供了过滤、查找方法。过滤和查找补充了很多选择器无法进行的操作。
1、first()/last()方法 返回被选元素的首个元素/最后一个元素。

<ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ol>
    <script>
        $(function(){
            $('li').first().css("background","red")
            $('li').last().css("background","red")
})</script>

运行后效果：
2、eq()方法 返回被选元素中带有指定索引号的元素。（索引号从0开始）

    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ol>
    <script>
        $(function(){
            $('li').eq(1).css("background","orange")
        })
    </script>

运行后效果：
3、filter()方法 允许您规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li class="pink1">列表项3</li>
        <li class="pink2">列表项4</li>
        <li>列表项5</li>
    </ol>
    <script>
        $(function(){
            $('li').filter(".pink1,.pink2").css("background","pink")
        })
    </script>

运行结果：
4、not()方法 返回不匹配标准的所有元素

    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li class="pink1">列表项3</li>
        <li class="pink2">列表项4</li>
        <li>列表项5</li>
    </ol>
    <script>
        $(function(){
            $('li').not(".pink1,.pink2").css("background","pink")
        })
    </script>

运行结果：正好与filter()方法相反
5、is()方法 判断所选元素是否符合某个条件的元素，返回值为true或false。
根据选择器、元素或JQuery对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回true

    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li class="pink1">列表项3</li>
        <li class="pink2">列表项4</li>
        <li>列表项5</li>
    </ol>
    <script>
        $(function(){
            alert($('li:eq(1)').is('.pink1,.pink2'))//弹出返回值为false
            alert($('li:eq(2)').is('.pink1,.pink2'))//弹出返回值为true
            alert($('.pink1,.pink2').is('li:eq(2)'))//弹出返回值为true
        })
    </script>

6、has()方法 使用自定义表达式来选择符合条件的元素

    <ol>
        <li>列表项1</li>
        <li><em>列表项2</em></li>
        <li class="pink1">列表项3</li>
        <li class="pink2">列表项4</li>
        <li>列表项5</li>
    </ol>
    <script>
        $(function(){
            $('li').has('em').css("background","blue")
        })
    </script>

运行结果：
7、slice(start,[end])方法 把匹配元素集合缩减为指定的指数范围的子集。
start:开始 选取子集的位置，第一个元素是0，如果是负数，则可以从集合的尾部开始选起。
end：结束 选取自己的位置，如果不指定，则就是本身的结尾

    <ol>
        <li>列表项1</li>
        <li><em>列表项2</em></li>
        <li class="pink1">列表项3</li>
        <li class="pink2">列表项4</li>
        <li>列表项5</li>
    </ol>
    <script>
        $(function(){
            $('li').slice(0).css("background","yellow")//从第0个开始到结束
            $('li').slice(0，3).css("background","yellow")//从第0个开始到第3结束，但不包括3
            $('li').slice(-1).css("background","yellow")//倒数第一个
            $('li').slice(-3,-1).css("background","yellow")//倒数第3个到倒数第一个，不包括倒数第一个
        })
    </script>

运行结果分别为：