欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  新闻

jq获取最后一个子元素的方法（post和get请求的区别面试）

程序员文章站 2022-04-11 21:54:11
层次选择器
  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”>
  51. /* 层级选择器：
  52. 通过dom元素之间的层次关系来获取特定的元素，
  53. 例如后代元素，子元素，相邻元素和兄弟元素。
  54. 1.后代元素选择器：
  55. 选取这个div中所有的span(不论其中嵌了多少层)
  56. #div2 span、#div2 .span1、#div2 #span2
  57. 2.子元素选择器：
  58. 选中当前div下的第一层元素。->元素集合
  59. #div2 > span、#div2 > .span1
  60. 3.相邻元素：
  61. 当前元素同层级的相邻的兄弟元素。->元素集合
  62. #div2 + 、#div2 + div
  63. 4.兄弟元素：
  64. 当前元素同层级的所有兄弟元素。->元素集合
  65. */
  66. $(document).ready(function() {
  67. /* <input type=”button” id=”btn1″ value=”选取id为div2的所有span后代元素”> */
  68. // 后代选择器
  69. $(“#btn1”).click(function() {
  70. /*
  71. $(“#div2 “)：单一个空格，表示取所有的子元素；
  72. 如果要取特定标签的元素、特定id的元素或特定class的元素
  73. 要加上对应的名称。
  74. 注意：可以无限往后嵌套。
  75. */
  76. // $(“#div2 “).addclass(“cblack”);
  77. // $(“#div2 #span1”).addclass(“cblack”);
  78. // $(“#div2 .subdivcls”).addclass(“cblack”);
  79. $(“#div2 span”).addclass(“cblack”);
  80. });
  81. /* <input type=”button” id=”btn2″ value=”选取id为div2的所有span子元素”> */
  82. // 子元素选择器
  83. $(“#btn2”).click(function() {
  84. $(“#div2 > span”).addclass(“cblack”);
  85. });
  86. /* <input type=”button” id=”btn3″ value=”选取id为div2的下一个div兄弟元素”> */
  87. /*
  88. 下一个兄弟元素
  89. 相邻元素选择器，只能下一个
  90. */
  91. $(“#btn3”).click(function() {
  92. // $(“#div2 + div”).addclass(“cblack”);
  93. /* 在下觉得用上面的写法较好，因为是下一个兄弟元素
  94. 并不一定就是div，因为只能取next位置的元素节点，所以不如省略标签名称
  95. 正确率更高，也不容易引起歧义。*/
  96. // 注意：只有next：+；没有$(“#div2 -“).addclass(“cblack”);这种写法！ :(
  97. $(“#div2 +”).addclass(“cblack”);
  98. // 但是其实 #div2 + div 也有一个好处，先确认next元素为div元素才会选中，不然不会选中！
  99. });
  100. /* <input type=”button” id=”btn4″ value=”选取id为div2之后的所有div兄弟元素”> */
  101. // 兄弟选择器，只能从当前开始，同级往后。
  102. $(“#btn4”).click(function() {
  103. /*
  104. 此方法获取了当前div2之后的所有的兄弟节点元素(注意是之后的！)
  105. 什么都不写的话，就获取了所有，如果想要获取特定类型的标签节点。
  106. 就要加上对应的节点名称，例如题上的div2之后的所有的div
  107. */
  108. // $(“#div2 ~”).addclass(“cblack”);
  109. $(“#div2 ~ div”).addclass(“cblack”);
  110. });
  111. /* <input type=”button” id=”btn5″ value=”选取id为div2的所有div兄弟元素”> */
  112. /*
  113. 此方法不是层级选择器中有的，是拓展的，
  114. 为了补充上面的只能选择之后的兄弟标签，
  115. 那么现在通过这个补充的方法就可以选择
  116. 到所有的兄弟标签了。
  117. sbilings()：获取所有的兄弟标签的方法
  118. */
  119. $(“#btn5”).click(function() {
  120. // 选择所有的兄弟标签
  121. // $(“#div2”).siblings().addclass(“cblack”);
  122. // 只要兄弟标签中的div标签
  123. $(“#div2”).siblings(“div”).addclass(“cblack”);
  124. });
jq获取最后一个子元素的方法（post和get请求的区别面试）
  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>

上一篇： java面试技巧自我介绍（面试回答技巧）

下一篇： 互联网产品经理面试问题汇总（产品经理面试攻略）

推荐阅读