jQuery选择器——可见性过滤选择器

最新推荐文章于 2021-03-24 23:06:30 发布

原创最新推荐文章于 2021-03-24 23:06:30 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html #class

JavaScript 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了jQuery中的可见性过滤选择器,包括:hidden和:visible。通过示例代码展示了如何使用这些选择器来操作页面上可见或不可见的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一章介绍了属性过滤选择器，相信大家都看明白了吧，今天要学习的是可见性过滤选择器，为了更好地学习，我们先列出一段HTML代码：

<div id="main">
    <div id="one" class="aaa">
        id=one,class=aaa的div
        <div class="mini">class=mini的div</div>
    </div>
    <div id="two" class="aaa">
        id=two,class=aaa的div
        <div class="mini" title="test">class=mini，title=test的div</div>
        <div class="mini" title="other">class=mini，title=other的div</div>
    </div>
    <div>
        包含input(type=hidden)的div
        <input type="hidden" value="隐藏的input"/>
    </div>
    <div style="display: none">隐藏的div</div>
</div>

一、:hidden

选择器：:hidden
描述：匹配所有不可见的元素，或者type为hidden的元素
返回值：元素集合
示例：

$("#main div:hidden").show(1000).css("background","#ffbbaa");
alert($("#main input:hidden").attr("value"));
alert($("#main input:hidden").val());

运行截图如下：
这里写图片描述

二、:visible

选择器：:visible
描述：匹配所有的可见元素
返回值：元素集合
示例：

$("#main div:visible").css("background","#ffbbaa");

运行截图如下：
这里写图片描述