jquery层级选择器

<%@ page language="java" pageEncoding="GBK"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>JQuery单元测试</title>
    <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
    <script type="text/javascript">
    	function selTest()
    	{
    		//可以取到form中所有的input标记
    		//form是祖先级的元素
    		//结果是1、5、2、3
    		$("form input").each(function(){alert($(this).val());});
    		
    		//只可以取到form中的input标记
    		//取不到fieldset中的input标记
    		//也就是说只能取到儿子辈的,取不到孙子辈的
    		//form是父级元素
    		//结果是1、5、3
    		$("form > input").each(function(){alert($(this).val());});
    		
    		//取紧跟着label标记的input标记,并且label标记后不能有换行标记,否则也是取不到的
    		//结果是1和2,取不到5
    		$("label + input").each(function(){alert($(this).val());});
    		
    		//取与form同级的input标记
    		//结果是4
    		$("form ~ input").each(function(){alert($(this).val());});
    	}
    </script>
  </head>
  
  <body>
  	<input type="button" name="btn" value="层级选择器" onclick="selTest();">
    <form action="#">
    	<label>label1</label>
    	<input type="text" value="1" name="text1" />
    	<input type="text" value="5" name="text5" /><br/>
    	<fieldset>
    		<label>label2</label>
    		<input type="text" name="text2" value="2" /><br/>
    	</fieldset>
    	<input type="text" value="3" name="text3"/><br/>
    </form>
    <input type="text" value="4" name="text4"/>
  </body>
</html>

 

你可能感兴趣的:(JavaScript,html,jquery,单元测试)