La différence entre les espaces et le signe supérieur à >, le signe plus et le tilde ~ dans le sélecteur jquery

Concept

Espace : $('parent childchild') signifie placer tous les nœuds enfantenfant sous parent

Signe supérieur à : $('parent > enfantenfant') signifie obtenir tout le niveau suivant enfantenfant

Signe plus : $('pre nextbrother') signifie obtenir le nœud frère suivant du nœud pré, ce qui est équivalent à la méthode next()

Signe Tilde : $('pre ~ brother ') signifie obtenir pré Tous les nœuds frères derrière le nœud sont équivalents à la méthode nextAll()

Description détaillée

Le code existant est le suivant

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

Utilisation des espaces

Si vous souhaitez récupérer toutes les balises a dans imgs_box, vous pouvez utiliser des espaces, le code est le suivant

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

L'effet Comme le montre l'image ci-dessous, vous pouvez voir que tous les éléments

sont obtenus en utilisant le signe supérieur à

Si vous voulez que tous les éléments ul au niveau suivant dans imgs_box, en excluant les éléments avec la classe test_first_child , vous pouvez utiliser le code suivant

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

Utilisation du signe plus

Si vous souhaitez obtenir l'élément adjacent suivant de l'élément imgs_source, vous pouvez utiliser le signe plus. Le code est le suivant Utilisation du tilde

Si vous souhaitez obtenir tous les éléments frères de l'élément imgs_source, vous pouvez utiliser l' tilde~. Le code est le suivant

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

Ce qui précède est la différence entre les espaces et le signe supérieur à>, plus le signe et le tilde~ dans le sélecteur jquery. Pour plus de contenu connexe, veuillez faire attention au PHP. Site chinois (www.php .cn) !