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

2024年11月24日 03:41:57 • 投稿 • 阅读 35

<!DOCTYPE html><html><head><title>层次选择器</title><meta http-equiv=”content-type” content=”text/html; charset=UTF-8″><script type=”text/javascript” src=”js/jquery-1.11.3.js”></script><style type=”text/css”>body{font-family: “Microsoft YaHei”}.divCls {width:180px;height:180px;color: white;border: solid 1px white;margin-left: 10px;float: left;}.subDivCls {width:60px;height:60px;color:white;border: solid 1px white;font-size: 12px;margin: 5px;float: right;}.spanCls{color:white;border: solid 1px white;margin: 5px;float: left;height: 50px;}div span{border: solid 1px white;font-size: 12px;margin:5;}.cGreen{background-color: #4CA902}.cPink{background-color: #ED4A9F}.cBlue{background-color: #0092E7}.cCyan{background-color: #01A6A2}.cYellow{background-color: #DCA112}.cRed{background-color: #B7103B}.cPurple{background-color: #792F7C}.cBlack{background-color: #110F10}.hide{display: none;}</style><script type=”text/javascript”>/* 层级选择器：通过DOM元素之间的层次关系来获取特定的元素，例如后代元素，子元素，相邻元素和兄弟元素。1.后代元素选择器：选取这个div中所有的span(不论其中嵌了多少层)#div2 span、#div2 .span1、#div2 #span22.子元素选择器：选中当前div下的第一层元素。->元素集合#div2 > span、#div2 > .span13.相邻元素：当前元素同层级的相邻的兄弟元素。->元素集合#div2 + 、#div2 + div4.兄弟元素：当前元素同层级的所有兄弟元素。->元素集合*/$(document).ready(function() {/* <input type=”button” id=”btn1″ value=”选取id为div2的所有span后代元素”> */// 后代选择器$(“#btn1”).click(function() {/*$(“#div2 “)：单一个空格，表示取所有的子元素；如果要取特定标签的元素、特定id的元素或特定class的元素要加上对应的名称。注意：可以无限往后嵌套。*/// $(“#div2 “).addClass(“cBlack”);// $(“#div2 #span1”).addClass(“cBlack”);// $(“#div2 .subDivCls”).addClass(“cBlack”);$(“#div2 span”).addClass(“cBlack”);});/* <input type=”button” id=”btn2″ value=”选取id为div2的所有span子元素”> */// 子元素选择器$(“#btn2”).click(function() {$(“#div2 > span”).addClass(“cBlack”);});/* <input type=”button” id=”btn3″ value=”选取id为div2的下一个div兄弟元素”> *//*下一个兄弟元素相邻元素选择器，只能下一个*/$(“#btn3”).click(function() {// $(“#div2 + div”).addClass(“cBlack”);/* 在下觉得用上面的写法较好，因为是下一个兄弟元素并不一定就是div，因为只能取next位置的元素节点，所以不如省略标签名称正确率更高，也不容易引起歧义。*/// 注意：只有next：+；没有$(“#div2 -“).addClass(“cBlack”);这种写法！ :($(“#div2 +”).addClass(“cBlack”);// 但是其实 #div2 + div 也有一个好处，先确认next元素为div元素才会选中，不然不会选中！});/* <input type=”button” id=”btn4″ value=”选取id为div2之后的所有div兄弟元素”> */// 兄弟选择器，只能从当前开始，同级往后。$(“#btn4”).click(function() {/*此方法获取了当前div2之后的所有的兄弟节点元素(注意是之后的！)什么都不写的话，就获取了所有，如果想要获取特定类型的标签节点。就要加上对应的节点名称，例如题上的div2之后的所有的div*/// $(“#div2 ~”).addClass(“cBlack”);$(“#div2 ~ div”).addClass(“cBlack”);});/* <input type=”button” id=”btn5″ value=”选取id为div2的所有div兄弟元素”> *//*此方法不是层级选择器中有的，是拓展的，为了补充上面的只能选择之后的兄弟标签，那么现在通过这个补充的方法就可以选择到所有的兄弟标签了。sbilings()：获取所有的兄弟标签的方法*/$(“#btn5”).click(function() {// 选择所有的兄弟标签// $(“#div2”).siblings().addClass(“cBlack”);// 只要兄弟标签中的div标签$(“#div2”).siblings(“div”).addClass(“cBlack”);});

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

</div><div id=”div3″ class=”divCls cBlue” title=”itcast”>id 为div3 的div，title为itcast，包含隐藏输入框<input type=”hidden” value=”hello”></div><span class=”spanCls cRed”>div3的兄弟元素span</span><div id=”div4″ class=”divCls cYellow”>id 为div4 的div<br><div class=”subDivCls” style=”float:left;”>subDivCls<br><span id=”span2″>span4</span></div><div class=”subDivCls” title=”itcast”>title为itcast</div><div class=”subDivCls” style=”float:left;”>class为subDivCls的div</div><div class=”subDivCls”></div></div><div class=”divCls cCyan hide”>class设置为隐藏的，隐藏div</div><div class=”divCls cPurple” style=”display: none”>style的display为none的隐藏div</div><div style=”clear: both;”></div><br><br><hr><input type=”button” id=”btn1″ value=”选取id为div2的所有span后代元素”><input type=”button” id=”btn2″ value=”选取id为div2的所有span子元素”><input type=”button” id=”btn3″ value=”选取id为div2的下一个div兄弟元素”><input type=”button” id=”btn4″ value=”选取id为div2之后的所有div兄弟元素”><input type=”button” id=”btn5″ value=”选取id为div2的所有div兄弟元素”></body></html>

原创文章，作者：admin，如若转载，请注明出处：https://www.qq65hfghe5.com/tg/145665.html

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

相关推荐