jQuery过滤选择器

要点：

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

一、基本过滤器

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

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

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

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

lamport1

abclamport

asdfllamportsdf   $(":contains(lamport)").css("color", "red");

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

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

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

item1 item2 item3 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
}

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

item1 item2 item3 alert($("ul li:hidden").get(0).innerHTML); // item1 alert($("ul li:visible").size()); // 2

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

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

This is H1

This is p

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