标签：jQuery jquery 元素 可见 visible hidden 选择器

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

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

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

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

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

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

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

显示隐然元素

CSS Code:

初步效果

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

一、不可见性选择器：: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"选取所有不可见的元素，有的浏览器还包含了

标签：jQuery,jquery,元素,可见,visible,hidden,选择器
来源： https://blog.csdn.net/wangxueying5172/article/details/122376374

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。