jquery选择器之可见性筛选选择器

来源:互联网 发布:mysql install db 编辑:程序博客网 时间:2024/04/29 07:47

元素有显示状态和隐藏状态

$(":visible"):选择所有显示的元素

$(":hidden"):选择所有隐藏的元素

隐藏元素的方式有:

1.CSSdisplay的值是none

2.type=“”hidden”的表单元素

3.宽度和高度都显式设置为0

4.一个祖先元素是隐藏的,该元素是不会在页面上显示

5.CSS visibility的值是hidden

6.CSS opacity的值是0

<!doctype html>
<html>


<head>
    <meta http-equiv="Content-type" content="text/html; charset=gbk" />
    <title>可见性筛选选择器</title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>


<body>
    <h2>可见性筛选选择器</h2>
    <h3>:visible/:hidden</h3>
    <div class="left">
        <div class="div">
            <a>display</a>
            <p id="div1" style="display:none;">display</p>
        </div>
        <div class="div">
            <a>width</a>
            <a>height</a>
            <p id="div2" style="width:0;height:0">width/height</p>
        </div>
        <div class="div">
            <a>visibility</a>
            <a>opacity</a>
            <p id="div3" style="visibility:hidden;opacity:0">visibility</p>
        </div>
    </div>


    <p id="show"></p>
<script type="text/javascript">
function show (ele) {
if (ele instanceof jQuery) {
$("#show").html('元素的长度的 = ' + ele.length)
} else {
alert(ele+' 不是jQuery对象')
}
}
</script>




    <script type="text/javascript">
    //查找id = div1的DOM元素,是否可见
    show( $('#div1:visible') );
    </script>


    <script type="text/javascript">
    //查找id = div2的DOM元素,是否可见
    show( $("#div2:visible") );
    </script>


    <script type="text/javascript">
    //查找id = div3的DOM元素,是否可见
    show(  $("#div3:visible") );
    </script>


    <script type="text/javascript">
    //查找id = div1的DOM元素,是否隐藏
    show( $("#div1:hidden") );
    </script>


    <script type="text/javascript">
    //查找id = div2的DOM元素,是否隐藏
    show( $("#div2:hidden") );
    </script>


    <script type="text/javascript">
    //查找id = div3的DOM元素,是否隐藏
    show( $("#div3:hidden") );
    </script>






</body>


</html>

0 0
原创粉丝点击