jQuery过滤器

过滤器：基于选择器的基础上，进行精细的过滤

:first 查找第一个指定的元素

$("li:first").css("color","red");
$("li").first().css("color","red");//相同上面写法

:first-child 查找子元素是父元素的第一个子元素即被选中

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

:first-of-type 查找是不是父元素指定元素类型的第一个子元素

$("li:first-of-type").css("color","red");

:nth-child(1) 查找子元素是父元素的第一个子元素即被选中

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

:nth-of-type(1) 查找是不是父元素指定元素类型的第一个子元素

$("li:nth-of-type(1)").css("color","red");

:last 查找最后一个指定的元素

$("li:last").css("color","red");
$("li").last().css("color","red");//与上面相同

:last-child 查找子元素是父元素的最后一个子元素即被选中

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

:last-of-type 查找是不是父元素指定元素类型的最后一个子元素

$("li:last-of-type").css("color","red");

even 获取偶数

// 将所有的li放在一个列表中，并且获取偶数项，这个even的偶数是从0开始
$("li:even").css("color","red");
// 将每个li的父元素中所有列表的偶数项是li选中，这个even的偶数项是从1开始的
$("li:nth-child(even)").css("color","red");
$("li:nth-child(2n)").css("color","red");
// 将li父元素中li类型元素的列表中是偶数项的选中，这个even的偶数也是从1开始
$("li:nth-of-type(even)").css("color","red");
$("li:nth-of-type(2n)").css("color","red");

odd 获取奇数

//  将所有的li放在一个列表中，并且获取奇数项，这个odd的奇数是从0开始
$("li:odd").css("color","red");
$("li:nth-child(odd)").css("color","red");
$("li:nth-child(2n-1)").css("color","red");
$("li:nth-of-type(odd)").css("color","red");
$("li:nth-of-type(2n-1)").css("color","red");

:gt 选择大于列表中该元素的其他元素，从0开始

// 大于div列表的第三项的其他元素
$("div:gt(3)").css("color","red");

:lt 选择小于列表中该元素的其他元素，从0开始

// 小于div列表的第三项的其他元素
$("div:lt(3)").css("color","red");

:slice 同数据的截取一样

// 从下标2开始，到下标4之前结束
$("div").slice(2,4).css("color","red");

:not 不是某个指定的元素类或者id

// div列表中不是class为divs的元素
$("div:not(.divs)").css("color","red");
// div列表中没有class属性的元素
$("div:not([class])").css("color","red");
$("div").not(".divs").css("color","red");

:header 所有的h1-h6的元素

$("h1:header").css("color","red");

:animated 所有正在播放的动画元素
:focus 当前汇聚焦距的属性元素
:empty 选择没有子元素或者子节点的元素

$("div:empty").width(50).height(50).css("background-color","red");
//给空内容的div都设置一个宽高和背景色

:parent 选择有某个类或者id的元素

//  选择有子元素的或者子节点的class是divs的元素
$(".divs:parent");

:contains() 找到包含指定内容的父容器

// div的后代元素中包含3子节点的元素,只能是内容不能是元素
console.log($("div:contains(3)"));
// 可以找到包含这个内容所有父容器，不指定那个标签内则会进行该内容父元素全部获取
console.log($(":contains(3)"));

has() 查找包含选择器元素的容器

console.log($(":has(.divs)"))
console.log($(":has(#div0)"))
console.log($("div").has("#div0"))
console.log($(".divs").parent());//

parent() 查找当前指定元素的父容器

console.log($(".divs").parent())

parents() 查找当前指定元素的所有父容器

console.log($(".divs").parents());

parentsUntil 查找当前元素的父元素到指定元素之前的所有父容器

console.log($(".divs").parentsUntil("html"));
//查找当前.divs元素的父元素到html之前的所有父容器

:hidden 所有不可见的元素，包括display:none, 像visibility: hidden和height:0都不属于隐藏的

console.log($(":hidden"));

:visible 所有可以显示的元素

console.log($(":visible"));//所有可以显示的元素

:only-child 父元素的唯一子元素，独生子女

console.log( $("div:only-child"));

:only-of-type 元素在父容器中同种类型仅此一个

console.log($("div:only-of-type"));
//该元素在它的父容器中的同种类型仅此一个

Is() hasClass() 特殊方法
结果返回布尔值，后面不能继续连缀

// 判断div列表中是否有.divs选择器的元素，有就返回true,没有就返回false
console.log($("div").is(".divs"));
console.log($("div").is("#div0"));
// 作用是仅判断div列表中是否有class是divs的选择器，有就返回true 反之返false
console.log($("div").hasClass("divs"));