使用特定的过滤规则来筛选出所需的DOM元素。过滤选择器的语法和css中的伪类的写法一样，都是用:开头。

一. 基本过滤选择器

<script type="text/javascript">
    $(function() {
        //所有的div元素中的第一个div
        var $first = $("div:first");
        console.log($first);
        // 所有div元素中的最后一个div
        var $last = $("div:last");
        console.log($last);
        //所有div元素中，class不是box的div
        console.log($("div:not(.box)"));
        // 所有的div元素中，索引是偶数的div
        console.log($("div:even"));
        // 所有div元素中，索引是奇数的div
        console.log($("div:odd"));
        // 所有div元素中，索引是0的div
        console.log($("div:eq(0)"));  // equal
        // 所有的div元素中，索引大于0的div
        console.log($("div:gt(0)"));  // great than
        //所有的div元素中 索引小于3的div
        console.log($("div:lt(3)"));  // less than 
        //获取所有的标题元素   h1 h2 ...
        console.log($(":header"));
        //获取当前取得焦点的元素
        console.log($(":focus"));
    })
</script>

二. 内容过滤选择器

<script type="text/javascript">
    $(function() {
        //选取包含文本 "标签" 的div元素。 如果div的子元素满足，那么这个div也算。
        console.log($("div:contains(标签)"));
        //选取，没有子标签或文本的div元素
        console.log($("div:empty"));
        //选取有 后代 是.item2的div元素
        console.log($("div:has(.item2)"))
        // 选取有文本或子元素的所有元素。  也就是能当爹的元素
        console.log($(":parent"));
    })
</script>

三. 可见性选择过滤器

​ 根据元素的可见状态来选取。

<script type="text/javascript">
    $(function() {
        console.log($("div:visible"));
        console.log($("div:hidden"));
    })
</script>

四. 子元素过滤选择器

<script type="text/javascript">
    $(function() {
        // 从p元素的父元素的所有子元素中查找。如果第2个元素是p，则返回这个p元素，如果不是p则不返回这个子元素
        console.log($("p:nth-child(2)"));
        //从p元素的父元素的所有子元素中查找。如果第一个元素是p则返回这个p元素。否则不返回
        console.log($("p:first-child"));
        console.log($("p:last-child"));
        console.log($("div:only-child"));
    });
</script>