举例讲解jQuery中可见性过滤选择器的使用

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

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

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

注意：:hidden 过滤器一般是包含的内容为：CSS 样式为display:none、input 表单类型为type="hidden"和visibility:hidden 的元素。

示例
jQuery的可见性选择器是根据元素的可见和不可见状态来选择相对应的元素。主要有两个：可见:visible和不可见:hidden。今天我们主要来学习这两个选择器的使用。先来看一个HTML结构，方便学习这两个选择器的使用：

 
 
 Hider!
 Hider!
 Hider!
 Hider!
 
 
 
 显示隐然元素

CSS Code:

 .wrap {
   width: 500px;
   padding: 10px;
   margin: 20px auto;
   border: 1px solid #ccc;
 }
  
 .wrap div {
  width: 70px;
  height: 40px;
  background: #0083C1;
  margin: 5px;
  float: left
 }
 
 span {
  display: block;
  clear: left;
  color: #008000;
 }
 
 .startHidden {
  display: none;
 }
 
 .startVisibilityHidden {
  visibility: hidden;
 }

初步效果

下面我们分别来看看这两个选择器的语法和使用规则以及所起的作用

一、不可见性选择器：:hidden

选择器

 $("E:hidden") //E表示元素标签

  或

 $(":hidden") //选择所有隐藏元素

描述：

E:hidden表示选择隐藏的E元素，而:hidden表示选取所有不可见的元素

返回值：

集合元素

实例：

$(document).ready(function(){
 $("span:first").text("Found " + $(":hidden",document.body).length + " hidden elements total.");//在第一个span标签中增加文本，显示body中有多少个元素隐藏
 $("div:hidden").show("3000");//显示所有隐藏的div元素
 $("span:last").text("Found " + $("input:hidden").length + " hidden inputs");//在最后一个span标签中增加文本，显示有多少input隐藏
});

功能：

":hidden"选取所有不可见的元素，有的浏览器还包含了

 $("E:visible") //E是指元素标签，选择指定的可见元素标签

 $(":visible")//选择所有可见元素