<%@ 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="层级选择器" οnclick="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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
