jquery学习笔记2-2：层次选择
<!DOCTYPE html> <html> <head> <title>jquery层次选择</title> <!-- 层次选择器，通过DOM元素间的层次关系获取元素 主要的层次关系包括，后代，父子，相邻，兄弟关系--><!-- 功能描述，在页面中设置四个DIV,在第二个DIV中增加一个span,然后其中再嵌一个span,全部元素初始值为隐藏，使用jquery分层选择器控制元素的显示 --><script language="javascript" type="text/javascript" src="../javaScriptSrc/jquery-1.9.1.min.js"></script><style type="text/css">body{front-size:12px;text-align:center}div,span{float:left;border:solid 2px #ccc; margin:8px;display:none}.clsFraA{width:65px;height:65px}.clsFraP{width:45px;height:45px;background-color:#eee}.clsFraC{width:25px;height:25px;background-color:#ddd}</style><script type="text/javascript">/*$(function(){//匹配后代元素$("#divMid").css("display","block");$("div span").css("display","block");})*//*$(function(){//匹配子元素$("#divMid").css("display","block");$("div>span").css("display","block");})*//*$(function(){//匹配后面元素$("#divMid+div").css("display","block");$("#divMid").next().css("display","block");})*//*$(function(){//匹配所有后面元素$("#divMid~div").css("display","block");$("#divMid").netxAll().css("display","block");})*/$(function(){//匹配所有相邻元素$("#divMid").siblings("div").css("display","block")})</script> </head> <body> <div class="clsFraA">left</div> <div class="clsFraA" id="divMid"> <span class="clsFraP" id="Span1"> <span class="clsFraC" id="Span2"></span> </span> </div> <div class="clsFraA">Right_1</div> <div class="clsFraA">Right_2</div> </body></html>