第1章 WEB前端开发工程师-jQuery框架 1-8：jQuery 可见性过滤器

                                                      jQuery 可见性过滤器

 

本节课所讲内容：

1. jQuery可见性过滤器

 

                                                                        主讲教师：Head老师

一. jQuery可见性过滤器

可见性过滤器根据元素的可见性和不可见性来选择相应的元素。

过滤器名	jQuery 语法	说明	返回
:hidden	$(':hidden')	选取所有不可见元素	集合元素
:visible	$(':visible')	选取所有可见元素	集合元素

 

$('p:hidden).size(); //元素 p 隐藏的元素

$('p:visible').size(); //元素 p 显示的元素

注意：:hidden 过滤器一般是包含的内容为：CSS 样式为 display:none、input 表单类型为

type="hidden"和 visibility:hidden 的元素。

二.子元素过滤器

子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。

过滤器名	jQuery 语法	说明	返回
:first-child	$('li:first-child')	获取每个父元素的第一个子元素	集合元素
:last-child	$('li:last-child')	获取每个父元素的最后一个子元素	集合元素
:only-child	$('li:only-child')	获取只有一个子元素的元素	集合元素
:nth-child(od d/even/eq(in dex))	$('li:nth-child(ev en)')	获取每个自定义子元素的元素(索引 值从 1 开始计算)	集合元素

$('li:first-child').css('background', '#ccc'); //每个父元素第一个 li 元素

$('li:last-child').css('background', '#ccc'); //每个父元素最后一个 li 元素

$('li:only-child').css('background', '#ccc'); //每个父元素只有一个 li 元素

$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数 li 元素

$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数 li 元素

$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第三个 li 元素