jQuery选择器之可见性选择器,可见性选择器

作者:计算机知识

图片 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
                <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }

            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }

            div.hide {
                display: none;
            }            
        </style>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                $("#btn1").click(function(){
                    $("div:visible").css("background", "#ffbbaa");
                });
                $("#btn2").click(function(){
                    //alert($("div:hidden").length);
                    //show(time): 可以使不可见的元素变为可见, time 表示时间, 以
                    //毫秒为单位
                    //jQuery 的很多方法支持方法的连缀, 即一个方法的返回值来时调用该
                    //方法的 jQuery 对象: 可以继续调用该对象的其他方法. 
                    $("div:hidden").show(2000).css("background", 
                            "#ffbbaa");
                });
                $("#btn3").click(function(){
                    //val() 方法可以返回某一个表单元素的 value 属性值. 
                    alert($("input:hidden").val());
                });

            });

        </script>
    </head>
    <body>        
        <input type="button" value="选取所有可见的  div 元素" id="btn1">
        <input type="button" value="选择所有不可见的 div 元素" id="btn2" />
        <input type="button" value="选择所有不可见的 input 元素" id="btn3" />

        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div
            <input type="hidden" value="123456789000" size="8">
        </div>
        <div id="mover">正在执行动画的div元素.</div>
    </body>
</html>

jQuery选择器之可见性选择器,可见性选择器。jQuery选用器之可见性接纳器,jquery采取器可见

图片 2

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://www.crhled.com/uploads/allimg/190530/0524536254-2.jpg"></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>

show()函数的意思
function show (ele) {
   if (ele instanceof jQuery) {//如果是jQuery元素
    $("#show").append('元素的长度的 = '   ele.length) // 显示“元素的长度 = (ele的个数)”
   } else {//如果不是jQuery元素
    alert(ele ' 不是jQuery对象')
   }
  }
执行结果:元素的长度的 = 0元素的长度的 = 0元素的长度的 = 1元素的长度的 = 1元素的长度的 = 1元素的长度的 = 0
show( $("#div1:visible") ); //div1的CSS display值为none,所以获取不到visible的元素,结果为0
show( $("#div2:visible") ); //div2的宽度和高度都显式设置为0 ,所以获取不到visible的元素,结果为0
show(  $("#div3:visible") ); //div3的visibility: hidden 或 opacity: 0被认为是可见的,因为他们仍然占用空间布局,结果1
show( $("#div1:hidden") ); // 该元素hidden了,获取到一个hidden元素,结果1
show($("#div2:hidden") ); // 该元素hidden了,获取到一个hidden元素,结果1
show( $("#div3:hidden")); // 该元素是visible的,获取不到hidden元素,结果0

! DOCTYPE html html head meta http-equiv ="Content-type" content ="text/html; charset=utf-8" / title / title link rel =...

本文由bwin必赢发布,转载请注明来源

关键词: