举例讲解jQuery中可见性过滤选择器的使用(举例说明jquery的功能)

编辑：rootadmin

推荐整理分享举例讲解jQuery中可见性过滤选择器的使用(举例说明jquery的功能)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:举例说明jquery的功能,jquery的理解,jquery的理解,浅谈jquery的应用,jquery例子,jquery用处,简述jquery的常用方法,举例说明jquery的功能,内容如对您有帮助，希望把文章链接给更多的朋友！

可见性过滤器可见性过滤器根据元素的可见性和不可见性来选择相应的元素。过滤器名 jQuery 语法说明返回 :hidden $(':hidden') 选取所有不可见元素集合元素 :visible $(':visible') 选取所有可见元素集合元素

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

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

CSS Code:

初步效果

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

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

选择器

或

描述：

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

返回值：

集合元素

实例：

功能：

":hidden"选取所有不可见的元素，有的浏览器还包含了<header>内所有标签，而且这里所指的不可见元素是样式为“display:none”和表单“type="hidden"”两种，而不包含“visibility:hidden”的隐藏元素。另外提醒大家，“:hidden”有的会导致选择中<header>内所有标签,所以建议前面加个元素标签。

效果：

二、可见性选择器：:visible

选择器：

或者

描述：

“E:visible”表示选择可见的E元素，比如说“$("div:visible")”表示选择所有可见的div元素，而“$(":visible")”表示选择所有可见元素

返回值：

集合元素

实例：

功能：

上面第一段代码是鼠标单击可见的DIV元素后，该元素会增加一个2px红色边框的样式，而第二段代码是单击按钮会显示所有隐藏的元素，并加上红色背景色。这里所指的可见元素和我们前面隐藏元素一样，只是没有被“display:none”或“.hide()”隐藏的元素。

效果：

最后再说一点：“：visible”过滤出所有可见元素，但是这里的可见是指没有被“display:none”或者使用“.hide()“函数隐藏的元素；”：hidden“是选择所有隐藏元素。同样，这里所谓隐藏，不是指”visibility：hidden“，而是指”display:none“或”type="hidden"“的form元素。

有关于jQuery的可见性过滤选择器就简单介绍到这里了，感兴趣的朋友可以在本地测试一下，这样可能加强对他们的理解。

简单讲解jQuery中的子元素过滤选择器子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。$('li:first-child').css('background','#ccc');//每个父元素第一个li元素$('li:last-child').css

jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载我们经常会应用到日期和时间选择器，之前我们使用最多的是jQueryUI的datepicker()，那么今天我给大家介绍一款非常有趣的日期和时间选择器，它分为日期

jQuery实现选项联动轮播效果【附实例】 !doctypehtmlhtmllang="en"headmetacharset="UTF-8"metaname="Generator"content="EditPlus"metaname="Author"content=""metaname="Keywords"content=""metaname="Description"content=""linkrel="stylesheet"href="

标签: 举例说明jquery的功能

本文链接地址:https://www.jiuchutong.com/biancheng/384963.html 转载请保留说明！

上一篇：jQuery的内容过滤选择器学习教程(jquery内容过滤选择器有哪些)

下一篇：简单讲解jQuery中的子元素过滤选择器(jquery详解)