jq获取最后一个子元素的方法(post和get请求的区别面试)
&<!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&”}.pCls {width:180px;height:180px;color: white;border: solid 1px white;margin-left: 10px;float: left;}.subpCls {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;}p 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.后代元素选择器:选取这个p中所有的span(不论其中嵌了多少层)#p2 span、#p2 .span1、#p2 #span22.子元素选择器:选中当前p下的第一层元素。-&>元素集合#p2 &> span、#p2 &> .span13.相邻元素:当前元素同层级的相邻的兄弟元素。-&>元素集合#p2 + 、#p2 + p4.兄弟元素:当前元素同层级的所有兄弟元素。-&>元素集合*/$(document).ready(function() {/* &<input type=&”button&” id=&”btn1&″ value=&”选取id为p2的所有span后代元素&”&> */// 后代选择器$(&“#btn1&”).click(function() {/*$(&“#p2 &“):单一个空格,表示取所有的子元素;如果要取特定标签的元素、特定id的元素或特定class的元素要加上对应的名称。注意:可以无限往后嵌套。*/// $(&“#p2 &“).addClass(&“cBlack&”);// $(&“#p2 #span1&”).addClass(&“cBlack&”);// $(&“#p2 .subpCls&”).addClass(&“cBlack&”);$(&“#p2 span&”).addClass(&“cBlack&”);});/* &<input type=&”button&” id=&”btn2&″ value=&”选取id为p2的所有span子元素&”&> */// 子元素选择器$(&“#btn2&”).click(function() {$(&“#p2 &> span&”).addClass(&“cBlack&”);});/* &<input type=&”button&” id=&”btn3&″ value=&”选取id为p2的下一个p兄弟元素&”&> *//*下一个兄弟元素相邻元素选择器,只能下一个*/$(&“#btn3&”).click(function() {// $(&“#p2 + p&”).addClass(&“cBlack&”);/* 在下觉得用上面的写法较好,因为是下一个兄弟元素并不一定就是p,因为只能取next位置的元素节点,所以不如省略标签名称正确率更高,也不容易引起歧义。*/// 注意:只有next:+;没有$(&“#p2 -&“).addClass(&“cBlack&”);这种写法! :($(&“#p2 +&”).addClass(&“cBlack&”);// 但是其实 #p2 + p 也有一个好处,先确认next元素为p元素才会选中,不然不会选中!});/* &<input type=&”button&” id=&”btn4&″ value=&”选取id为p2之后的所有p兄弟元素&”&> */// 兄弟选择器,只能从当前开始,同级往后。$(&“#btn4&”).click(function() {/*此方法获取了当前p2之后的所有的兄弟节点元素(注意是之后的!)什么都不写的话,就获取了所有,如果想要获取特定类型的标签节点。就要加上对应的节点名称,例如题上的p2之后的所有的p*/// $(&“#p2 ~&”).addClass(&“cBlack&”);$(&“#p2 ~ p&”).addClass(&“cBlack&”);});/* &<input type=&”button&” id=&”btn5&″ value=&”选取id为p2的所有p兄弟元素&”&> *//*此方法不是层级选择器中有的,是拓展的,为了补充上面的只能选择之后的兄弟标签,那么现在通过这个补充的方法就可以选择到所有的兄弟标签了。sbilings():获取所有的兄弟标签的方法*/$(&“#btn5&”).click(function() {// 选择所有的兄弟标签// $(&“#p2&”).siblings().addClass(&“cBlack&”);// 只要兄弟标签中的p标签$(&“#p2&”).siblings(&“p&”).addClass(&“cBlack&”);});
&</p&>&<p id=&”p3&″ class=&”pCls cBlue&” title=&”itcast&”&>id 为p3 的p,title为itcast,包含隐藏输入框&<input type=&”hidden&” value=&”hello&”&>&</p&>&<span class=&”spanCls cRed&”&>p3的兄弟元素span&</span&>&<p id=&”p4&″ class=&”pCls cYellow&”&>id 为p4 的p&<br&>&<p class=&”subpCls&” style=&”float:left;&”&>subpCls&<br&>&<span id=&”span2&″&>span4&</span&>&</p&>&<p class=&”subpCls&” title=&”itcast&”&>title为itcast&</p&>&<p class=&”subpCls&” style=&”float:left;&”&>class为subpCls的p&</p&>&<p class=&”subpCls&”&>&</p&>&</p&>&<p class=&”pCls cCyan hide&”&>class设置为隐藏的,隐藏p&</p&>&<p class=&”pCls cPurple&” style=&”display: none&”&>style的display为none的隐藏p&</p&>&<p style=&”clear: both;&”&>&</p&>&<br&>&<br&>&<hr&>&<input type=&”button&” id=&”btn1&″ value=&”选取id为p2的所有span后代元素&”&>&<input type=&”button&” id=&”btn2&″ value=&”选取id为p2的所有span子元素&”&>&<input type=&”button&” id=&”btn3&″ value=&”选取id为p2的下一个p兄弟元素&”&>&<input type=&”button&” id=&”btn4&″ value=&”选取id为p2之后的所有p兄弟元素&”&>&<input type=&”button&” id=&”btn5&″ value=&”选取id为p2的所有p兄弟元素&”&>&</body&>&</html&>