jQuery过滤选择器

要点：

• 基本过滤器
• 内容过滤器
• 可见性过滤器
• 子元素过滤器
• 其他方法

一、基本过滤器

<ul>
    <li>item1</li>
    <li>item2</li>
    <li class="item3">item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
</ul>

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>h1</h1>
<h2>h2</h2>
<h5>h5</h5>
$(":header").css("color", "red");

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

<input type="text" id="txt"/>
$("#txt").get(0).focus();
$(":focus").css("background", "red");

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

<div>lamport1</div>
<p>abclamport</p>
<h2>asdfllamportsdf</h2>
<h3></h3>
$(":contains(lamport)").css("color", "red");

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

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

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

<ul>
    <li>item1</li>
    <li class="red">item2</li>
    <li>item3</li>
</ul>
alert($("ul:has(.red)").get(0).innerHTML);
$("ul").has(".red").css("background", "blue");

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
}

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

<ul>
    <li style="display:none">item1</li>
    <li class="red">item2</li>
    <li>item3</li>
</ul>
alert($("ul li:hidden").get(0).innerHTML);     // item1
alert($("ul li:visible").size());              // 2

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

<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
<ul>
    <li>only-one</li>
</ul>
    <li>li4</li>
    <li>li5</li>
    <li>li6</li>
</ul>

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

<ul>
    <li>li1</li>
    <li class="red">li2</li>
    <li>li3</li>
</ul>
alert($(".red").is("li")); // true, 判断class为red的元素是否为li元素

同时，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(),获取当前元素的前一次状态

<div id="test">
    <h1>This is H1</h1>
    <p>This is p</p>
</div>

$("#test").click(function () {
    // 首先获取#test下的p,使其隐藏
    // 接着接受本次引用，返回的是#test
    // 最后又调用了一次hide(),使得整个DIV都被隐藏掉
    $(this).find("p").hide().end().hide();
});