2-9 jQuery选择器之可见性筛选选择器
本节编程练习不计算学习进度,请电脑登录imooc.com操作

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

元素有显示状态与隐藏状态,jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden

描述如下:

这2个选择器都是 jQuery 延伸出来的,看起来比较简单,但是元素可见性依赖于适用的样式

:hidden选择器,不仅仅包含样式是display="none"的元素,还包括隐藏表单、visibility等等

我们有几种方式可以隐藏一个元素:

  1. CSS display的值是none。
  2. type="hidden"的表单元素。
  3. 宽度和高度都显式设置为0。
  4. 一个祖先元素是隐藏的,该元素是不会在页面上显示
  5. CSS visibility的值是hidden
  6. CSS opacity的指是0
如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度,是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的,因为他们仍然占用空间布局。

不在文档中的元素是被认为是不可见的,如果当他们被插入到文档中,jQuery没有办法知道他们是否是可见的,因为元素可见性依赖于适用的样式

任务

在代码编辑器中第46行填写相应代码

$('#div1:visible')

在代码编辑器中第51行填写相应代码

$('#div2:visible') 

在代码编辑器中第56行填写相应代码

$('#div3:visible')

在代码编辑器中第61行填写相应代码

$('#div1:hidden')

在代码编辑器中第66行填写相应代码

$('#div2:hidden')

在代码编辑器中第71行填写相应代码

$('#div3:hidden')
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6. <title></title>
  7. <link rel="stylesheet" href="imooc.css" type="text/css">
  8. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  9. </head>
  10.  
  11. <body>
  12. <h2>可见性筛选选择器</h2>
  13. <h3>:visible/:hidden</h3>
  14. <div class="left">
  15. <div class="div">
  16. <a>display</a>
  17. <p id="div1" style="display:none;">display</p>
  18. </div>
  19. <div class="div">
  20. <a>width</a>
  21. <a>height</a>
  22. <p id="div2" style="width:0;height:0">width/height</p>
  23. </div>
  24. <div class="div">
  25. <a>visibility</a>
  26. <a>opacity</a>
  27. <p id="div3" style="visibility:hidden;opacity:0">visibility</p>
  28. </div>
  29. </div>
  30.  
  31. <p id="show"></p>
  32. <script type="text/javascript">
  33. function show (ele) {
  34. if (ele instanceof jQuery) {
  35. $("#show").html('元素的长度的 = ' + ele.length)
  36. } else {
  37. alert(ele+' 不是jQuery对象')
  38. }
  39. }
  40. </script>
  41.  
  42.  
  43. <script type="text/javascript">
  44. //查找id = div1的DOM元素,是否可见
  45. show( ? );
  46. </script>
  47.  
  48. <script type="text/javascript">
  49. //查找id = div2的DOM元素,是否可见
  50. show( ? );
  51. </script>
  52.  
  53. <script type="text/javascript">
  54. //查找id = div3的DOM元素,是否可见
  55. show( ? );
  56. </script>
  57.  
  58. <script type="text/javascript">
  59. //查找id = div1的DOM元素,是否隐藏
  60. show( ? );
  61. </script>
  62.  
  63. <script type="text/javascript">
  64. //查找id = div2的DOM元素,是否隐藏
  65. show( ? );
  66. </script>
  67.  
  68. <script type="text/javascript">
  69. //查找id = div3的DOM元素,是否隐藏
  70. show( ? );
  71. </script>
  72.  
  73.  
  74.  
  75. </body>
  76.  
  77. </html>
  1. .left {
  2. width: auto;
  3. height: 120px;
  4. }
  5.  
  6. .left div {
  7. width: 100px;
  8. height: 70px;
  9. padding: 5px;
  10. margin: 5px;
  11. float: left;
  12. background: #bbffaa;
  13. border: 1px solid #ccc;
  14. }
  15.  
  16. .bottom {
  17. width: 800px;
  18. }
  19.  
  20. .bottom div,
  21. .bottom span {
  22. display: block;
  23. width: 80px;
  24. height: 80px;
  25. margin: 5px;
  26. background: #bbffaa;
  27. float: left;
  28. font-size: 14px;
  29. }
  30.  
  31. .bottom .small {
  32. width: 60px;
  33. height: 25px;
  34. font-size: 12px;
  35. background: #fab;
  36. }
下一节