返回
生活资讯
jq获取最后一个子元素的方法（post和get请求的区别面试）
2022-11-05 23:38  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>层次选择器</title>
  5. <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
  6. <script type=”text/javascript” src=”js/jquery-1.11.3.js”></script>
  7. <style type=”text/css”>
  8. body{
  9. font-family: “Microsoft YaHei”
  10. }
  11. .divCls {
  12. width:180px;
  13. height:180px;
  14. color: white;
  15. border: solid 1px white;
  16. margin-left: 10px;
  17. float: left;
  18. }
  19. .subDivCls {
  20. width:60px;
  21. height:60px;
  22. color:white;
  23. border: solid 1px white;
  24. font-size: 12px;
  25. margin: 5px;
  26. float: right;
  27. }
  28. .spanCls{
  29. color:white;
  30. border: solid 1px white;
  31. margin: 5px;
  32. float: left;
  33. height: 50px;
  34. }
  35. div span{
  36. border: solid 1px white;
  37. font-size: 12px;
  38. margin:5;
  39. }
  40. .cGreen{background-color: #4CA902}
  41. .cPink{background-color: #ED4A9F}
  42. .cBlue{background-color: #0092E7}
  43. .cCyan{background-color: #01A6A2}
  44. .cYellow{background-color: #DCA112}
  45. .cRed{background-color: #B7103B}
  46. .cPurple{background-color: #792F7C}
  47. .cBlack{background-color: #110F10}
  48. .hide{display: none;}
  49. </style>
  50. <script type=”text/javascript”>
  52. $(document).ready(function() {
  54. // 后代选择器
  55. $(“#btn1”).click(function() {
  57. // $(“#div2 “).addClass(“cBlack”);
  58. // $(“#div2 #span1”).addClass(“cBlack”);
  59. // $(“#div2 .subDivCls”).addClass(“cBlack”);
  60. $(“#div2 span”).addClass(“cBlack”);
  61. });
  63. // 子元素选择器
  64. $(“#btn2”).click(function() {
  65. $(“#div2 > span”).addClass(“cBlack”);
  66. });
  69. $(“#btn3”).click(function() {
  70. // $(“#div2 + div”).addClass(“cBlack”);
  72. // 注意：只有next：+；没有$(“#div2 -“).addClass(“cBlack”);这种写法！ :(
  73. $(“#div2 +”).addClass(“cBlack”);
  74. // 但是其实 #div2 + div 也有一个好处，先确认next元素为div元素才会选中，不然不会选中！
  75. });
  77. // 兄弟选择器，只能从当前开始，同级往后。
  78. $(“#btn4”).click(function() {
  80. // $(“#div2 ~”).addClass(“cBlack”);
  81. $(“#div2 ~ div”).addClass(“cBlack”);
  82. });
  85. $(“#btn5”).click(function() {
  86. // 选择所有的兄弟标签
  87. // $(“#div2”).siblings().addClass(“cBlack”);
  88. // 只要兄弟标签中的div标签
  89. $(“#div2”).siblings(“div”).addClass(“cBlack”);
  90. });
  1. </div>
  2. <div id=”div3″ class=”divCls cBlue” title=”itcast”>
  3. id 为div3 的div，title为itcast，包含隐藏输入框
  4. <input type=”hidden” value=”hello”>
  5. </div>
  6. <span class=”spanCls cRed”>div3的兄弟元素span</span>
  7. <div id=”div4″ class=”divCls cYellow”>id 为div4 的div<br>
  8. <div class=”subDivCls” style=”float:left;”>subDivCls<br>
  9. <span id=”span2″>span4</span></div>
  10. <div class=”subDivCls” title=”itcast”>title为itcast</div>
  11. <div class=”subDivCls” style=”float:left;”>class为subDivCls的div</div>
  12. <div class=”subDivCls”></div>
  13. </div>
  14. <div class=”divCls cCyan hide”>class设置为隐藏的，隐藏div</div>
  15. <div class=”divCls cPurple” style=”display: none”>style的display为none的隐藏div</div>
  16. <div style=”clear: both;”></div>
  17. <br><br>
  18. <hr>
  19. <input type=”button” id=”btn1″ value=”选取id为div2的所有span后代元素”>
  20. <input type=”button” id=”btn2″ value=”选取id为div2的所有span子元素”>
  21. <input type=”button” id=”btn3″ value=”选取id为div2的下一个div兄弟元素”>
  22. <input type=”button” id=”btn4″ value=”选取id为div2之后的所有div兄弟元素”>
  23. <input type=”button” id=”btn5″ value=”选取id为div2的所有div兄弟元素”>
  24. </body>
  25. </html>
发表评论
0评