selector_visiblity(选择器_可见性)

Begin_W_T_E_I_M

于 2019-07-26 19:03:05 发布

阅读量232

点赞数

分类专栏： jQuery技术文章标签：选择器可见性 selector visiblity hidden

本文链接：https://blog.csdn.net/Begin_W_T_E_I_M/article/details/97398774

版权

jQuery技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.jQuery 子元素选择器-内容
(1):hidden
概述：匹配所有不可见元素，或者type为hidden的元素

<script>
        $(function () {
            $('tr:hidden,input:hidden').each(function () {
                console.log(this);
            });
          
        });
    </script>

作用：查找所有隐藏的tr,input遍历并打印到控制台。
(2):visible
概述：匹配所有不包含子元素或者文本的空元素

<script>
        $(function () {
            $('tr:visible,input:visible').each(function () {
                console.log('可见元素：'+this.outerHTML);
            });
        });
    </script>

作用：查找所有显示的tr,input遍历并打印到控制台。

（3）源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器：可见性</title>
    <script src="../jquery-2.2.4.js"></script>
    <style>
        body{margin-left: 50px;}

        .buydetail {
            width: 500px;
            border: 2px solid mistyrose;
            border-collapse: collapse;
        }

        .buydetail tr{ height: 30px; }

        .buydetail td,th{ text-align: center; }

        td:empty{
            background-color: azure;
        }
        .xx{
            background-color: brown;
        }
        .row {
            display: none;
        }
    </style>
    <script>
        $(function () {
            $('tr:hidden,input:hidden').each(function () {
                console.log(this);
            });
            $('tr:visible,input:visible').each(function () {
                console.log('可见元素：'+this.outerHTML);
            });
        });
    </script>
</head>
<body>
<h3 style="margin-left: 30px"><a href="../index.html">返 回</a></h3>

<h1>jQuery 子元素选择器：</h1>
<h3>
    可见性:
    :hidden
    :visible
</h3>

<input type="hidden" name="username" value="james">
<input type="text" name="password" value="jelly" style="display: none;">

<table class="buydetail" border="2">
    <!-- 表格标题 -->
    <caption>月度消费明细</caption>
    <tr class="header">
        <th>月度</th>
        <th>衣帽</th>
        <th>娱乐</th>
        <th>吃喝玩乐</th>
    </tr>
    <tr class="row">
        <td class="month"><span>一月</span></td>
        <td>￥1200.0</td>
        <td>￥500.0</td>
        <td>￥1500.0</td>
    </tr>
    <tr>
        <td class="month"><span>二月</span></td>
        <td>￥800.0</td>
        <td>￥550.0</td>
        <td>￥2000.0</td>
    </tr>
    <tr>
        <td class="month">三月</td>
        <td>￥450.0</td>
        <td>￥300.0</td>
        <td>￥1000.0</td>
    </tr>
    <tr>
        <td class="month">四月</td>
        <td></td>
        <td>￥300.0</td>
        <td></td>
    </tr>
    <tr>
        <td class="month">五月</td>
        <td>￥450.0</td>
        <td>￥300.0</td>
        <td>￥1000.0</td>
    </tr>
    <tr>
        <td class="month">六月</td>
        <td>￥1450.0</td>
        <td>￥300.0</td>
        <td>￥1000.0</td>
    </tr>
    <tr>
        <td class="month">七月</td>
        <td>￥450.0</td>
        <td>￥1300.0</td>
        <td>￥1000.0</td>
    </tr>
</table>


</body>
</html>

运行结果：
在这里插入图片描述

Begin_W_T_E_I_M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
selector_visiblity(选择器_可见性)

1.jQuery 子元素选择器-内容(1):hidden概述：匹配所有不可见元素，或者type为hidden的元素<script> $(function () { $('tr:hidden,input:hidden').each(function () { console.log(this); ...
复制链接

扫一扫