The difference between spaces and greater than sign >, plus sign + and tilde ~ in jquery selector

Concept

##Space: $('parent childchild') means to get all childchild nodes under parent

##Greater than sign: $('parent >

childchild

') means to get all the lower levels under parent childchildPlus sign: $('pre + nextbrother') means to get the next sibling node of the pre node, which is equivalent to the next() method

Tilde sign: $('pre ~ brother') means to get All sibling nodes behind the pre node are equivalent to the nextAll() method

Detailed description

The existing code is as follows

<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<p 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> 
</p>

Use of spaces

If you want to get all a tags in imgs_box, you can use spaces, the code is as follows

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

The effect is as shown below, As you can see, all elements were obtained

##Use of greater than sign

If you want all ul elements at the next level in imgs_box, excluding elements with class test_first_child, you can use the following code

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

##Use of plus sign

#If you want to get the next adjacent element of the imgs_source element, you can use the plus sign. The code is as follows

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

Use of tilde

If you want to get all the sibling elements of the class

imgs_source element, you can use the tilde~. The code is as follows

##

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

The above is the difference between the space and the greater than sign >, the plus sign + and the tilde ~ in the jquery selector. For more related content, please pay attention to the PHP Chinese website (www.php. cn)!