                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /jQuery
                        
                        /jQuery基礎(chǔ) (一)—樣式篇

設(shè)置了display:block，還是無(wú)法選中：visible元素

<!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="https://code.jquery.com/jquery-3.2.1.min.js"?integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="?crossorigin="anonymous"></script>
</head>

<body>
????<h2>可見(jiàn)性篩選選擇器</h2>
????<h3>:visible/:hidden</h3>
????<div?class="left">
????????<div?class="div">
????????????<a>display</a>
????????????<p?id="div1"?style="display:block;">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)?{????????//instanceof監(jiān)測(cè)類(lèi)型
????????????????$("#show").html('元素的長(zhǎng)度的?=?'?+?ele.length)
????????????}?else?{
????????????????$("#show").html(ele+'?不是jQuery對(duì)象')
????????????}
????????}
????</script>


????<script?type="text/javascript">
????????//查找id?=?div1的DOM元素,是否可見(jiàn)
????????show(?$(".div1:visible")?);
????????//元素的長(zhǎng)度的?=?0
????????//display:none;
????</script>

????<script?type="text/javascript">
????????//查找id?=?div2的DOM元素,是否可見(jiàn)
????????show(?$(".div2:visible")?);
????????//元素的長(zhǎng)度的?=?0
????????//width:0;height:0
????</script>

????<script?type="text/javascript">
????????//查找id?=?div3的DOM元素,是否可見(jiàn)
????????show(??$(".div3:visible")?);
????????//元素的長(zhǎng)度的?=?0
????????//visibility:hidden;opacity:0
????</script>

????<script?type="text/javascript">
????????//查找id?=?div1的DOM元素,是否隱藏
????????show(?$("#div1:hidden")?);
????????//元素的長(zhǎng)度的?=?1
????</script>

????<script?type="text/javascript">
????????//查找id?=?div2的DOM元素,是否隱藏
????????show(?$("#div2:hidden")?);
????????//元素的長(zhǎng)度的?=?1
????</script>

????<script?type="text/javascript">
????????//查找id?=?div3的DOM元素,是否隱藏
????????show(?$("#div:hidden")?);
????????//元素的長(zhǎng)度的?=?0
????</script>



</body>

</html>

為何<p id="div1" style="display:block;">display</p>這里的display已經(jīng)設(shè)置成block了，但是元素的長(zhǎng)度還是等于0。