09_jQuery_可见性过滤与扩展

 

 

HTML代码：

<table border="1">
        <tr>
            <td>index 0</td>
        </tr>
        <tr>
            <td>index 1</td>
        </tr>
        <tr>
            <td>index 2</td>
        </tr>
        <tr>
            <td>index 3</td>
        </tr>
    </table>
    

jQuery代码：

        $(function(){//查找出索引值为偶数的元素，将其背景颜色转变为红色
            $("table tr:even").css("background-color","red");
            })

效果：

HTML代码：

    <div class="outter">
        <div class="inner">hidder!</div>
    </div>
    

jQuery代码：

    <script>//检查inner元素是否为隐藏的元素,如果隐藏了就将其显示出来
        $(function(){
            $(".outter .inner:hidden").css("display","block");
        })

css代码：

    .outter{
        width:300px;
        height:300px;
        background-color:red;
    }
    .inner{
        width:50px;
        height:50px;
        background-color:#abcdef;
        display:none;/*将此元素进行隐藏*/
    }

效果：原本将小div隐藏了起来，现在又显示了出来

 

 

 HTML代码：

    <div class="outter">
        <div class="inner">hidder!</div>
    </div>
    

jQuery代码：

        $(function(){
            $(".outter .inner:visible").css("display","none");
        })

CSS代码：

    .outter{
        width:300px;
        height:300px;
        background-color:red;
    }
    .inner{
        width:50px;
        height:50px;
        background-color:#abcdef;
    }

效果：将显示出来的小div隐藏起来