简单过滤选择器

1. :first 取第一个元素
2. :last 取最后一个元素
3. :not(selecter) 除selector之外的元素
4. :even :odd 索引从0开始，索引为偶/奇数
5. :eq(index) 索引从0开始(负数从结尾开始)
6. :gt(index) 索引大于1
7. :lt(index) 索引小于2
8. :header 标题（h1~h6）
9. :animated 正在执行动画效果的元素
10. :focus 获得焦点时（网页初始状态已经被激活的元素）

    $("li:first").addClass("blue");            // 第一个li元素
    $("#test li:last").addClass("blue");   // 在id为test下的最后一个li元素
    $("#test li:lt(1)").addClass("blue");  // 在id为test下索引小于1的元素
    $(":header").addClass("blue");         // 所有的标题元素
    $("ul:not(#test)").addClass("blue");   // 所有的ul元素中除去id=test外的元素
    $("#table tr:even").addClass("blue");  // 表格的偶数行

还有一些与之等效的方法：
1. first()—-> :first
2. last()—-> :last
3. not()—-> :not
4. eq()—-> :eq(index)

        $("li").first().css("background","red");   // 相当于 :first
        $("li").first().css("background","red");   // 相当于 :last
        $("li").not(".li").css("background","red");    // 相当于 :not(index)
        $("li").eq("0").css("background","red");   // 相当于 :eq(index)

内容过滤选择器

1. :contains(text) 获取包含给定文本的元素
2. :empty 获取所有不包含子元素并且是空文本的空元素
3. :has(selector) 选择子元素含有指定元素的父元素（选择的是父元素，判断的是子元素）
4. :parent 获取含有子元素或者文本的元素

        $("li:contains(1)").css("background","red");   // 内容包含“1”的li元素
        $("p:empty").css("background","red");          // 没有子节点或者没有文本的p元素
        $("ul:has(.li)").css("background","red");      // 含有li元素的ul元素
        $("p:parent").css("background","red");         // 含有子节点或者文本的元素

一些容易混淆的方法：
1. parent()返回到父元素
2. parents()当前元素的所有祖先节点
3. parentsUntil()遇到某个祖先节点停止（忽略该节点以及以上节点）

        $(".li").parentsUntil("body").css("background","red"); // 获取父元素

可见性选择器

1. :hidden 隐藏的元素
2. :visible 显示的元素

隐藏的元素是指：css中display属性值为none的元素

对于隐藏的段落：
        <p style="display:none">隐藏的元素</p>
以下代码使其加上背景：
        $(":visible").css("background","red");

子元素过滤选择器

1. :first-child 第一个孩子（所有父节点的每个首节点）
2. :last-child 最后一个孩子
3. :only-child 只有一个孩子的元素
4. :nth-child(num) 获取每一个父元素下特定位置的元素，索引从1开始(odd / even / index / numn）

first-child先找到所有元素的父元素，然后在堆每一个父元素找到他们的第一个子节点，所以first-child可能并不是一个元素
对于以下无序列表：

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

使用以下代码：

        $("li:first-child").css("background","red");

结果是：

    $("li:nth-child(odd)").addClass("blue");   // 所有索引为奇数的li元素

常见方法：

1. is() 参数包括选择器，DOM对象，jQuery对象，function
2. hasClass() 是否含有对应的class
3. slice(begin,end) 根据序号选择，序号从0开始。-1表示最后一个[begin,end)
4. end() 返回当前元素的前一个元素的状态
5. contents()返回当前元素的子节点和文本节点
6. filter(“:red,.a,.b”) 放置多个选择

1， is()根据选择器和DOM对象判断：

        var flag = $("li:first").is(".li");                // true
        var flag = $("li:first").is($('li').get(0)); // true

is()使用匿名函数判断：

        flag = $("li:first").is(function(){
            return $(this).attr('class') == 'li';      // true
        });

2， 用hasClass() 判断是否有相应的class

        var flag = $("li:first").hasClass("li");

3， 给1~5的li添加样式（左闭右开）

        $("li").slice(1,5).css("background","red");

(1,-1) 表示从第一个到倒数第二个

        $("li").slice(1,-1).css("background","red");

4，filter()可以同时有多个条件

        $("li").filter(".li,.li2").css("background","red");

filter()使用匿名函数筛选

        $("li").filter(function(){
            return $(this).attr('class') == 'li';
        }).css("background","red");