5、可见性&子元素过滤选择器的使用示例

Sian · 发表于 2016-2-18 21:48:19

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style>
                table{
                        margin:0px auto;
                        margin-bottom: 10px;
                }
                span{
                        display: block;
                        text-align: center;
                }
                td{
                        padding:0 6px;
                        text-align: center;
                        font-size: 20px;
                }
        </style>
        <script>
                $(document).ready(function(){
                        // 查找显示元素
                        $('tr:visible').css('color', 'red');
                        // 查找隐藏元素
                        $('tr:hidden').css('display', 'table-row');
                        // 某元素同级集合的第某个子元素
                        $('tr:nth-child(1)').css('color', 'green');
                        // 某元素同级集合的第某2n个子元素n从0开始
                        $('tr:nth-child(2n)').css('color', 'green');
                        // 某元素同级集合的第一个子元素
                        $('tr:first-child').css('color', 'blue');
                        // 某元素同级集合的最后一个子元素
                        $('tr:last-child').css('color', 'green');
                        // 某元素同级集合中的唯一子元素
                        $('td:only-child').css('color', 'pink');
                });
        </script>
</head>
<body>
        <span>旅游服务的商品列表</span>
        <table>
                <tr>
                        <th>商品名</th>
                        <th>价格</th>
                        <th>已销售</th>
                </tr>
                <tr style="display: none">
                        <td>泰国普吉岛3夜4日游</td>
                        <td>5000</td>
                        <td>1000</td>
                </tr>
                <tr>
                        <td>泰泰国普吉岛3夜4日游</td>
                        <td>5000</td>
                        <td>1000</td>
                </tr>
                <tr>
                        <td>泰国国普吉岛3夜4日游</td>
                        <td>5000</td>
                        <td></td>
                </tr>
        </table>
        <span>旅游纪念品的商品列表</span>
        <table>
                <tr>
                        <th>商品名</th>
                        <th>价格</th>
                        <th>已销售</th>
                </tr>
                <tr>
                        <td>泰国普普吉岛3夜4日游</td>
                        <td>5000</td>
                        <td>1000</td>
                </tr>
                <tr>
                        <td>泰国普吉吉岛3夜4日游</td>
                        <td>5000</td>
                        <td>1000</td>
                </tr>
                <tr>
                        <td>泰国普吉岛岛3夜4日游</td>
                        <td>5000</td>
                        <td>1000</td>
                </tr>
                <tr><td colspan="3">结束</td></tr>
        </table>
</body>
</html>

帐号		自动登录	找回密码
密码			立即注册

[jQuery] 5、可见性&子元素过滤选择器的使用示例