jquery层级选择器

最新推荐文章于 2024-06-08 19:06:47 发布

原创最新推荐文章于 2024-06-08 19:06:47 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #单元测试 #HTML #ViewUI

JQuery文章专栏收录该内容

12 篇文章

订阅专栏

<%@ 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>