过滤选择器
过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似于CSS3(http://t.mb5u.com/css3/)里的伪类，可以让不支持CSS3的低版本浏览器也能支持。和常规
选择器一样，jQuery为了更方便开发者使用，提供了很多独有的过滤器。
基本过滤器
过滤器主要通过特定的过滤规则来筛选所需的DOM元素，和CSS中的伪类的语法类似：使用冒号(:)开头。
| 过滤器名 | jQuery语法 | 说明 | 返回 |
| :first | $("li:first") | 选取第一个元素 | 单个元素 |
| :last | $("li:last") | 选取最后一个元素 | 单个元素 |
| :not(selector) | $("li:not(.red)") | 选取class不是red的li元素 | 集合元素 |
| :even | $("li:even") | 选择索引(0开始)是偶数的所有元素 | 集合元素 |
| :odd | $("li:odd") | 选择索引(0开始)是奇数的所有元素 | 集合元素 |
| :eq(index) | $("li:eq(2)") | 选择索引(0开始)等于index的元素 | 单个元素 |
| :gt(index) | $("li:gt(2)") | 选择索引(0开始)大于index的元素 | 集合元素 |
| :lt(index) | $("li:lt(2)") | 选择索引(0开始)小于index的元素 | 集合元素 |
| :header | $(":header") | 选择标题元素，h1~h6 | 集合元素 |
| :animated | $(":animated") | 选择正在执行动画的元素 | 集合元素 |
| :focus | $(":focus") | 选择当前被焦点的元素 | 集合元素 |
有如下html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过滤选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <ul> <li>列表1</li> <li>列表2</li> <li class="red">列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul>
<input type="text" />
<div> <h3>我是标题</h3> </div> </body> </html>
jQuery代码如下：
$("li:first").css("background","#ccc"); //第一个元素
$("li:last").css("background","#ccc"); //最后一个元素(即第二个<ul>中最后一个<li>元素)
如果要选中第一个<ul>中最后一个<li>元素，有如下两种方法：
①给第一个<ul>加属性id="box"
$("#box li:last").css("background","#ccc");
②jQuery代码：
$("ul:first li:last").css("background","#ccc");
$("li:not(.red)").css("background","#ccc"); //非class为red的元素
$("li:even").css("background","#ccc"); //索引为偶数的元素
$("li:odd").css("background","#ccc"); //索引为奇数的元素
$("li:eq(2)").css("background","#ccc"); //指定索引值的元素
$("li:eq(-2)").css("background","#ccc"); //从下往上，索引值依次为-1,-2,-3,...
$("li:gt(3)").css("background","#ccc"); //大于索引值的元素
$("li:lt(2)").css("background","#ccc"); //小于索引值的元素
$(":header").css("background","#ccc"); //页面所有h1~h6元素
$("div :header").css("background","#ccc"); //<div>中的所有h1~h6元素，注意div后一定要有一个空格，否则无效
$("h3:header").css("background","#ccc"); //页面所有h3元素，h3后不能加空格，否则无效
下面来重点看一下:focus。
写入如下代码：
$(":focus").css("background","red");
刷新页面没有任何效果，是因为你刷新的时候，焦点并不在其上面，你点击进去，焦点进去，其实已经触发了一个事件，触发的事件并不能激活程序$(":focus").css("background","red");所以你必须在网页刷新加载的时候，就处在激活状态。修改代码为：
$("input").get(0).focus(); //先初始化激活一个元素焦点
$(":focus").css("background","red"); //被焦点的元素
注意：:focus过滤器，必须是网页初始状态的已经被激活焦点的元素才能实现元素获取，而不是鼠标点击或者Tab键盘敲击激活的。
jQuery为最常用的过滤器提供了专用的方法，已达到提到性能和效率的作用：
$("li").first().css("background","#ccc"); //元素li的第一个元素
$("li").last().css("background","#ccc"); //元素li的最后一个元素
$("li").not(".red").css("background","#ccc"); //元素li不含class为red的元素
$("li").eq(2).css("background","#ccc"); //元素li的第三个元素，负数从后开始
注意：:first、:last和first()、last()这两组过滤器和方法在出现相同元素的时候，first会实现第一个父元素的第一个子元素，last会实现最后一个父元素的最后一个子元素。所以，如果需要明确是哪个父元素，需要指明：
$('#box li:last').css('background', '#ccc'); //#box 元素的最后一个 li
//或
$('#box li').last().css('background', '#ccc'); //同上
内容过滤器
内容过滤器的过滤规则主要是包含的子元素或文本内容上。
| 过滤器名 | jQuery语法 | 说明 | 返回 |
| :contains(text) | $(":contains('ycku.com')") | 选取含有“ycku.com”文本的元素 | 元素集合 |
| :empty | $(":empty") | 选取不包含子元素或空文本的元素 | 元素集合 |
| :has(selector) | $(":has(.red)") | 选取含有class是red的元素 | 元素集合 |
| :parent | $(":parent") | 选取含有子元素或文本的元素 | 元素集合 |
有html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过滤选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div>我们的新域名：ycku.com</div> <div>我们的旧域名：yc60.com</div> <div></div> <div><p></p></div> <ul> <li>列表1</li> <li>列表2</li> <li class="red">列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> <input type="text" /> <div> <h3>我是标题</h3> </div> </body> </html>
jQuery代码：
$("div:contains('ycku.com')").css("background","#ccc"); //选择元素文本节点含有ycku.com文本的元素
$("div:empty").css("background","red").css("height", "20px"); //选择空元素
$("ul:has(.red)").css("background","#ccc"); //选择元素含有class是red的元素，这样会导致含有<li class="red">xxx</li>的整个<ul>元素都会被选中
$("div:parent").css("background","red"); //选择非空元素
jQuery提供了一个has()方法来提高:has过滤器的性能：
$("ul").has(".red").css("background","#ccc");
jQuery提供了一个名称和:parent相似的方法，但这个方法并不是选取含有子元素或文本的元素，而是获取当前元素的父元素，返回的是元素集合。
$("li").parent().css("background","#ccc"); //选择当前元素的父元素，即2个<ul>元素
alert($("li").parent().size()); //2
alert($("li").parent().get(0)); // [object HTMLUListElement]
$("li").parents().css("background","#ccc"); //选择当前元素的父元素及祖先元素
$("li").parentsUntil("html").css("background","#ccc"); //选择当前元素遇到html父元素停止
可见性过滤器
可见性过滤器根据元素的可见性和不可见性来选择相应的元素。
| 过滤器名 | jQuery语法 | 说明 | 返回 |
| :hidden | $(":hidden") | 选取所有不可见元素 | 元素集合 |
| :visible | $(":visible") | 选取所有可见元素 | 元素集合 |
注意：:hidden过滤器一般包含的内容为：CSS样式为display:none、input表单类型为type="hidden"和visibility:hidden的元素。
有html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过滤选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div style="display: none;">我们的新域名：ycku.com</div> <div>我们的旧域名：yc60.com</div> <div></div> <div><p></p></div> <ul> <li>列表1</li> <li>列表2</li> <li class="red">列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> </ul> <input type="text" /> <div> <h3>我是标题</h3> </div> </body> </html>
jQuery代码：
alert($("div:hidden").size()); //1
$("div:hidden").css("background","#ccc").show(1000);//将隐藏的元素设置为灰色的背景，然后1秒之后慢慢动画的显示出来
alert($("div:visible").size()); //4
子元素过滤器
子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。
| 过滤器名 | jQuery语法 | 说明 | 返回 |
| :first-child | $("li:first-child") | 获取每个父元素的第一个子元素 | 集合元素 |
| :last-child | $("li:last-child") | 获取每个父元素的最后一个子元素 | 集合元素 |
| :only-child | $("li:only-child") | 获取只有一个子元素的元素 | 集合元素 |
| :nth-child(odd/even/eq/(index)) | $("li:nth-child(even)") | 获取每个自定义子元素的元素(索引值从1开始计算) | 集合元素 |
有如下html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过滤选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> 我们的新域名： <strong>123</strong> ycku.com </div> <div>我们的旧域名：yc60.com</div> <div></div> <div><p></p></div> <ul id="box"> <li>列表1</li> <li>列表2</li> <li class="red" title="列表3">列表3</li> <li class="red">列表4</li> <li>列表5</li> <li>列表6</li> <li>列表7</li> <li>列表8</li> <li>列表9</li> </ul> <ul> <li>列表1</li> <li>列表2</li> <li class="red" title="列表3">列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> <li>列表7</li> <li>列表8</li> <li>列表9</li> </ul> <ul> <li>列表1</li> <!-- <li>列表1</li> --> </ul> <input type="text" /> <div> <h3>我是标题</h3> </div> </body> </html>
jQuery代码如下：
$("li:first-child").css("background","#ccc"); //每个父元素第一个li元素
$("li:last-child").css("background","#ccc"); //每个父元素最后一个li元素
$("li:nth-child(even)").css("background","#ccc"); //每个父元素-偶数li元素
$("li:nth-child(odd)").css("background","#ccc"); //每个父元素-奇数li元素
$("li:nth-child(2)").css("background","#ccc"); //每个父元素第2个li元素
$("li:nth-child(2n)").css("background","#ccc"); //每个父元素第2、4、8、...个li元素
$("li:nth-child(2n+1)").css("background","#ccc"); //每个父元素第1、3、7、...个li元素
$("li:nth-child(5n)").css("background","#ccc"); //每个父元素第5、10、15、...个li元素
$("li:nth-child(4n+1)").css("background","#ccc"); //每个父元素第1、5、9、...个li元素
其他方法
| 方法名 | jQuery方法 | 说明 | 返回 |
| is(s/o/e/f) | $("li").is(".red") | 传递选择器、DOM、jQuery对象或是函数来匹配元素结合 | 集合元素 |
| hasClass(class) | $("li").eq(2).hasClass("red") | 其实就是is("."+class) | 集合元素 |
| slice(start,end) | $("li").slice(0,2) | 选择从start到end位置(包括start，不包括end)的元素，如果是负数，则从后开始 | 集合元素 |
| filter(s/o/e/f) | $("li").filter(".red") | ||
| end() | $("div").find("p").end() | 获取当前元素前一次状态 | 集合元素 |
| contents() | $("div").contents() | 获取某元素下面所有元素节点，包括文本节点，如果是iframe，则可以查找文本内容 | 集合元素 |
html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过滤选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> 我们的新域名： <strong>123</strong> ycku.com </div> <div>我们的旧域名：yc60.com</div> <div></div> <div><p></p></div> <ul id="box"> <li>列表1</li> <li>列表2</li> <li class="red" title="列表3">列表3</li> <li class="red">列表4</li> <li>列表5</li> <li>列表6</li> <li>列表7</li> <li>列表8</li> <li>列表9</li> </ul> <ul> <li>列表1</li> <li>列表2</li> <li class="red" title="列表3">列表3</li> <li>列表4</li> <li>列表5</li> <li>列表6</li> <li>列表7</li> <li>列表8</li> <li>列表9</li> </ul> <!-- <ul> <li>列表1</li> <li>列表1</li> </ul> --> <input type="text" /> <div> <h3>我是标题</h3> </div> </body> </html>
jQuery代码如下：
alert($(".red").is("li")); //true 传递选择器 我想应该是检测class为red的元素是不是<li>元素
alert($(".red").is("div")); //false 传递选择器
alert($(".red").is($("li"))); //true 传递jQuery对象集合
alert($(".red").is($("div"))); //false 传递jQuery对象集合
alert($(".red").is($("li").get(2))); //true 传递DOM对象
alert($(".red").is($("li").eq(2))); //true 传递jQuery对象单个
还可以传递一个函数，关于这点我不是很清楚！
alert($(".red").is(function() {
//return $(this);//true 等价于return $(".red"); 匿名函数中的this应该等价于".red"
return $(this).attr("title")=="列表3";
}));
注意：必须使用$(this)来表示要判断的元素，否则，不管function里面是否返回true或false都和调用的元素无关了。我的疑问，函数里不应该返回的是对象集合或单个对象吗?怎么返回true或false呢?
alert($("li").eq(2).hasClass("red")); //和is一样，只不过只能传递class
$("li").slice(0,2).css("background","#ccc"); //前两个被选定
$("li").slice(5,7).css("background","#ccc"); //第六和第七被选定
$("li").slice(2).css("background","#ccc"); //从第三个开始到最后选定
$("li").slice(0,-2).css("background","#ccc"); //从倒数第三个位置，向前选定所有
$("li").slice(2,-2).css("background","#ccc"); //前两个和末尾两个未选定
alert($("#box").find("li").end().get(0)); //[object HTMLUListElement]
虽然上面这句代码等价于：
alert($("#box").find("li").parent().get(0)); //[object HTMLUListElement]
但是end()并不是parent()，如以下代码：
$("#box").next("ul").end().css("background","#ccc");
alert($("div:first").children().size());// 1
alert($("div:first").contents().size()); // 3 返回子节点(包括文本)数量
$("li").filter(".red").css("background","#ccc"); //选择li的class为red的元素
$("li").filter(".red, :first-child, :last-child").css("background","#ccc"); //增加了每个父元素的首尾选择
特殊要求函数返回
$("li").filter(function() {
return $(this).attr("class") == "red" && $(this).attr("title") == "列表3";
}).css("background","#ccc");
