2-16 综合案例
本节编程练习不计算学习进度,请电脑登录imooc.com操作

综合案例

这是一个综合的案例,主要就是展示选择器的使用,案例中的选择器是相对比较复杂的,很多时候我们不需要写这么复杂的选择器,但是案例是为了展示整个选择器的知识点的运用

右边是一段文本,我们通过不同的选择器给指定的文字赋予颜色

分析一段复杂的选择器:

$("#menu_con div.tag dd > p:first-child")

这段组合的选择器表达式用到了几个之前学到的选择器:ID、Class、元素、层级、子元素筛选器

当用到筛选器 :first-child的时候我们就知道了,这肯定是一组合集,意味着p元素是有多个,而且是分布在不同父元素dd里面的

圈圈中就是选择器对应的选择到的元素:

这个选择器其实挺复杂的,现实的开发中,我们应该要避免出现这么冗余繁琐的选择器,可以最简单的在a元素的父元素上加一个id,或者class直接定位即可。当然这样的处理可能无形中可能要多出一个无意义的属性了

PS:本节主要是对选择器使用的练习,有其他需后期学到的知识提前出现,童鞋们可以酌情去研究和思考。

任务

分别在66、73、79、85、90行填写对应的代码使其效果如下图:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jQuery标签切换效果</title>
  6. <link rel="stylesheet" href="imooc.css" type="text/css">
  7. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  8. </head>
  9.  
  10. <body>
  11. <!--代码部分begin-->
  12. <div id="menu">
  13. <!--tag标题-->
  14. <div id="menu_female">
  15. <h3>女装</h3>
  16. <div class="tag" style="display: block;">
  17. <dl>
  18. <dd>
  19. <p>第一类</p>
  20. <a>1.衬衫</a>
  21. <a>2.T恤</a>
  22. <a>3.雪纺衫</a>
  23. <a>4.针织衫</a>
  24. <a>5.短外套</a>
  25. <a>6.卫衣</a>
  26. <a>7.小西裤</a>
  27. <a>8.风衣</a>
  28. <a>9.吊带背心</a>
  29. <a>10.连衣裙</a>
  30. <a name="setColor">11.蕾丝连衣裙</a>
  31. <a>12.复古连衣裙</a>
  32. <a>13.印花连衣裙</a>
  33. <a>14.真丝连衣裙</a>
  34. <a>更多</a>
  35. </dd>
  36. </dl>
  37. </div>
  38. <div class="tag_More" style="display:block">
  39. <dl>
  40. <dd>
  41. <p>第二类</p>
  42. <a>1.背带裤</a>
  43. <a>2.哈伦裤</a>
  44. <a>3.牛仔裤</a>
  45. <a>4.休闲裤</a>
  46. <a>5.小脚裤</a>
  47. <a>6.西装裤</a>
  48. <a>7.打底裤</a>
  49. <a>8.阔脚裤</a>
  50. <a>9.短裤</a>
  51. <a>10.马甲/背心</a>
  52. <a>11.羽绒服</a>
  53. <a>12.棉服</a>
  54. <a>13.夹克</a>
  55. <a>14.POLO衫</a>
  56. <a>更多</a>
  57. </dd>
  58. </dl>
  59. </div>>
  60. </div>
  61. <div id="menu_con">
  62. <h3>男装</h3>
  63. <div class="tag" style="display:block">
  64. <dl>
  65. <dd>
  66. <p>第一类</p>
  67. <a>1.衬衫</a>
  68. <a>2.T恤</a>
  69. <a>3.牛仔裤</a>
  70. <a>4.休闲裤</a>
  71. <a>5.短裤</a>
  72. <a>6.针织衫</a>
  73. <a>7.西服</a>
  74. <a>8.西裤</a>
  75. <a>9.嘻哈裤</a>
  76. <a>10.西服套装</a>
  77. <a>11.马甲/背心</a>
  78. <a name="setColor">12.羽绒服</a>
  79. <a>13.棉服</a>
  80. <a>14.夹克</a>
  81. <p>更多</p>
  82. </dd>
  83. </dl>
  84. </div>
  85. <div class="tag_More" style="display:block">
  86. <dl>
  87. <dd>
  88. <p>第二类</p>
  89. <a>1.衬衫</a>
  90. <a>2.T恤</a>
  91. <a>3.牛仔裤</a>
  92. <a name='setColor'>4.休闲裤</a>
  93. <a>5.短裤</a>
  94. <a>6.针织衫</a>
  95. <a>7.西服</a>
  96. <a>8.西裤</a>
  97. <a>9.嘻哈裤</a>
  98. <a>10.西服套装</a>
  99. <a>11.马甲/背心</a>
  100. <a>12.羽绒服</a>
  101. <a>13.棉服</a>
  102. <a>14.夹克</a>
  103. <p>更多</p>
  104. </dd>
  105. </dl>
  106. </div>>
  107. </div>
  108. </div>
  109.  
  110. <script type="text/javascript">
  111. //找到男装下第一类衣服中的第一个p元素,并改变颜色
  112. //可以通过子类选择器 p:first-child 筛选出第一个p元素
  113. ?.css('color','#9932CC');
  114. </script>
  115.  
  116. <script type="text/javascript">
  117. //找到男装下第一类衣服把a元素从顺序1-4加上颜色
  118. //可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素
  119. //注意了index是从0开始计算,所以选在1-4,为对应的index就是4
  120. ?.css('color','red');
  121. </script>
  122.  
  123. <script type="text/javascript">
  124. //找到男装所有a元素中属性名name="setColor"的元素,并设置颜色
  125. //这里用的属性选择器[attribute='value']选择指定属性是给定值的元素
  126. ?.css('color','blue');
  127. </script>
  128.  
  129. <script type="text/javascript">
  130. //不分男女,选中第一类衣服中第9个a元素,并改变颜色
  131. //这里用了nth-child 选择的他们所有父元素的第n个子元素
  132. ?.css('color','#66CD00');
  133. </script>
  134.  
  135. <script type="text/javascript">
  136. //找到女装下第一类衣服,把a元素中包含文字"更多"的节点,改变颜色
  137. ?.css('color','#C71585');
  138. </script>
  139.  
  140.  
  141.  
  142. </body>
  143.  
  144. </html>
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. list-style: none;
  5. }
  6.  
  7. body {
  8. font-size: 12px;
  9. }
  10.  
  11. #menu {
  12. width: 360px;
  13. overflow: hidden;
  14. margin: 100px auto;
  15. border: 1px solid #BF9660;
  16. }
  17.  
  18. #menu_con {
  19. width: 358px;
  20. height:160px;
  21. border-top: none
  22. }
  23. a{
  24. margin: 5px;
  25. }
下一节