概念

空格：$('parent childchild')表示獲取parent下的所有的childchild節點

大於號：$('parent > childchild')表示獲取parent下的所有下一級childchild

加號：$('pre + nextbrother')表示獲得pre節點的下一個兄弟節點，相當於next()方法

波浪號：$('pre ~ brother')表示獲取pre節點的後面的所有兄弟節點，相當於nextAll()方法

詳解描述

現有程式碼如下

<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<div id="imgs_box">
	<ul class="play_imgs_width  imgs_source">
		<li><a href="javascript:;"><img src="./images/banner1.jpg" idth="610" height="390"/></a></li>
		<li><a href="javascript:;"><img src="./images/banner1.jpg" idth="610" height="390"/></a></li>
		<li><a href="javascript:;"><img src="./images/banner1.jpg" idth="610" height="390"/></a></li>
	</ul>
	<ul class="imgs_buttons play_imgs_width">
		<li><a href="" class="buttons_ahover">1</a></li>
		<li><a href="" class="buttons_default">2</a></li>
		<li><a href="" class="buttons_default">3</a></li>
	</ul>	
	<ul class="test">
		<li>
			<ul class="test_first_child">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</li>
	</ul> 
</div>
 

空格的使用

如果要獲取imgs_box中的所有a標籤，可以使用空格，程式碼如下

//獲取imgs_box下的所有元素
$(function(){
	$('#imgs_box a').each(function(){
		console.log(this);
	});
});

大於號的使用

$(function(){
	$('#imgs_box > ul').each(function(){
		console.log(this);
	});
});
 

加號的使用

$(function(){
	$('.imgs_source + ul').each(function(){
		console.log(this);
	});
});

波浪號的使用

$(function(){
	$('.imgs_source ~ ul').each(function(){
		console.log(this);
	});
});