获取dom对象(6)

<html>
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<title>获取dom对象</title>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
	<form>
		<input id="btn1" class="btn1" type="button" value="mybtn1" />
		<input name="btn1" class="btn1" type="button" value="mybtn2" />
		<img src="" alt="img1" />
		<img src="" alt="img2" />
		<div id="mydiv">
			<input class="btn2" type="button" data="test" value="mybtn3" />
			<input class="btn2" type="button" value="mybtn4" />
		</div>
	</form>
	<input class="btn2" type="button" data="test" value="mybtn5" />
</body>
</html>

<script type="text/javascript">
	/*
	jQuery根据层级获取
	*/

	//匹配某元素所有子元素,包括子子孙孙
	var btn = $("form input");
	for(var i = 0,len = btn.length; i < len; i++){
		console.log(btn[i].value);//mybtn1,mybtn2,mybtn3,mybtn4
	}

	//匹配某元素的子元素,只包含子
	var btn = $("form > input");
	for(var i = 0,len = btn.length; i < len; i++){
		console.log(btn[i].value);//mybtn1,mybtn2
	}

	//匹配某元素之后的元素
	var btn = $("form ~ input");
	for(var i = 0,len = btn.length; i < len; i++){
		console.log(btn[i].value);//mybtn5
	}

	//匹配某元素集合中的第一个
	var btn = $("input:first");
	for(var i = 0,len = btn.length; i < len; i++){
		console.log(btn[i].value);//mybtn1
	}

	//匹配某元素集合中的最后一个
	var btn = $("input:last");
	for(var i = 0,len = btn.length; i < len; i++){
		console.log(btn[i].value);//mybtn5
	}
</script>

 

你可能感兴趣的:(DOM对象)