博客列表 >前端第十四课:javascript基础3-PHP培训九期线上班

前端第十四课:javascript基础3-PHP培训九期线上班

渡劫小能手
渡劫小能手原创
2019年12月22日 21:47:37522浏览

一、写出课堂上讲解的jquery 的6个选择器,并说明其含义,每个选择器至少写一个示例,作业发到博客上

选择器

  1. <div class="mydiv" style="background: #000;" id="div_back">黑色</div>
  2. <div class="mydiv" style="background: #ff0000;" id="div_red">红色</div>
  3. <div class="mydiv" style="background: #00ff00;" id="div_green">
  4. <p id="a">div中的p标签</p>
  5. <div>
  6. <p id="b">div中的divp标签</p>
  7. <p id="c">p3</p>
  8. </div>
  9. <p id="d">pd</p>
  10. <div style="background: yellow">第二个div</div>
  11. </div>
  12. <p id="4">我是p标签</p>

ID选择器

根据$(‘#ID值’)选择

  1. <script type="text/javascript">
  2. var div = $('#div_back');
  3. console.log(div);
  4. </script>

类选择器

根据$(‘.类名称’)选择

  1. <script type="text/javascript">
  2. var div = $('.mydiv');
  3. console.log(div);
  4. </script>

后代选择器

选择指定ID为div_green下的所有p标签

  1. <script type="text/javascript">
  2. var div = $('#div_green p');
  3. console.log(div);
  4. </script>

子代选择器

选择指定ID为div_green下的所有子代为p标签

  1. <script type="text/javascript">
  2. var ps = $('#div_green > p');
  3. console.log(ps);
  4. </script>

相邻选择器

选择紧跟在p标签后面的一个平级div

  1. <script type="text/javascript">
  2. var div = $('p + div');
  3. console.log(div);
  4. </script>

兄弟选择器

选择与ID为div_back之后的所有平级的div标签

  1. <script type="text/javascript">
  2. var div = $('#div_back ~ div');
  3. console.log(div);
  4. </script>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议