要点：

一、基本过滤器

• item1
• item2
• item3
• item4
• item5
• item6

1.获取ul下的第一个li，等价方法first()

$("ul li:first").css("color", "red");
$("ul li").first().css("color", "blue");

2.获取ul下的最后一个li，等价方法last()

$("ul li:last").css("color", "red");
$("ul li").last().css("color", "blue");

3.获取ul下的class不等于item3的li，等价方法not()

$("ul li:not(.item3)").css("color", "red");
$("ul li").not(".item3").css("color", "blue");

4.获取ul下索引值为奇数的li

$("ul li:odd").css("color", "red");

5.获取ul下指定索引值的li

$("ul li:eq(0)").css("color", "red");

6.获取ul下大于指定索引值的li

$("ul li:gt(2)").css("color", "red");

7.获取ul下小于指定索引值的li

$("ul li:lt(2)").css("color", "red");

8.匹配h1~h6的h标签

h1

h2

h5

9.获取网页初始状态已经被激活焦点的元素，不能是鼠标点击或者是tab键入

$("#txt").get(0).focus();
$(":focus").css("background", "red");

二、内容过滤器
1.内容过滤器的过滤规则主要是包含的子元素或者是文本内容上
选取含有”lamport”文本的元素

abclamport

asdfllamportsdf

2.匹配不包含子元素或者是任何文本的元素

alert($("h3:empty").get(0).tagName);   // H3

3.选取包含子元素为class=red的元素，即返回的元素是父元素,等价方法为has()

• item1
• item2
• item3

4.匹配包含子元素或者文本内容的元素

alert($(".red:parent").get(0).tagName);        // LI, 返回class为red且包含子元素或者文本内容的元素

5.parent()与:parent属性类似，但返回的是元素的父节点

alert($(".red").parent().get(0).tagName);      // UL

6.parents()方法，返回的是元素的父节点以及祖先

var ele = $(".red").parents();
for(var i = 0, len = ele.length; i < len; i++) {
    alert(ele.get(i).tagName);      // UL BODY HTML
}

7.parentsUntil()方法，返回的是元素的父节点以及祖先,直到遇到指定的父元素为止

var ele = $(".red").parentsUntil("html");
for(var i = 0, len = ele.length; i < len; i++) {
    alert(ele.get(i).tagName);      // UL BODY
}

三、可见性过滤器
可见性过滤器是根据元素的可见性与不可见性来选取元素

• item1
• item2
• item3

四、子元素过滤器
过滤规则：通过父元素和子元素之间的关系

• li1
• li2
• li3

• only-one

• li4
• li5
• li6

1.匹配每一个li元素的父元素的第一个子元素

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

2.匹配每一个li元素的父元素的最后一个子元素

$("ul li:last-child").css("color", "red");

3.匹配只有一个元素的元素

$("ul li:only-child").css("color", "red");

4.匹配每一个li元素的父元素的第几个元素,索引值从1开始

$("ul li:nth-child(1)").css("color", "red");

五.其他方法
1.判断选择器is

• li1
• li2
• li3

同时，is可以包含匿名函数为参数

alert($('.red').is(function () { //true，方法，同上
    return $(this).get(0).innerText == 'li2'; //可以自定义各种判断
}));

2.hasClass，判读某个元素是否包含每个class

alert($("ul li:nth-child(2)").hasClass("red"));    // true
slice(start, end), 选取从start到end的元素，索引值从0开始,选取范围[start, end)
$("ul li").slice(0, 2).css("color", "red");        // 第一个和第二个，不包括第三个

3.获取某个元素下的所有元素节点包括文本节点(空白文本)

alert($("ul").contents().size());      // 7

filter()过滤方法，和is()方法都可以接受一个function参数
首先选取ul下的li元素，接着用filter()方法过滤得到最后一个子元素

$("ul li").filter(':last').css("color", "red");

4.end(),获取当前元素的前一次状态