Der Unterschied zwischen Leerzeichen und Größer-als-Zeichen >, Pluszeichen + und Tilde ~ im JQuery-Selektor

Konzept

Leerzeichen: $('parent childchild') bedeutet, dass alle untergeordneten Knoten unter dem übergeordneten

Größer-als-Zeichen: $('parent >

childchild') bedeutet, dass alle childchildPluszeichen: $('pre + nextbrother') bedeutet, den nächsten Geschwisterknoten des Vorknotens abzurufen, was der next()-Methode entspricht

Tildezeichen: $('pre ~ Bruder‘) bedeutet, alle Geschwisterknoten nach dem Vorknoten abzurufen, die der nextAll()-Methode entsprechen

Detaillierte Beschreibung

Der vorhandene Code lautet wie folgt

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

Verwendung von Leerzeichen

Wenn Sie alle a-Tags in imgs_box erhalten möchten, können Sie Leerzeichen verwenden Code ist wie folgt

Der Effekt ist wie unten gezeigt. Sie können sehen, dass alle Elemente

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

werden mithilfe des Größer-als-Zeichens ermittelt

Wenn Sie alle ul-Elemente auf der nächsten Ebene in imgs_box haben möchten, mit Ausnahme von Elementen mit der Klasse test_first_child, Sie können den folgenden Code verwenden

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

Verwendung von Pluszeichen

Wenn Sie das nächste Element neben dem imgs_source-Element erhalten möchten, können Sie das Pluszeichen verwenden. Der Code lautet wie folgt: Verwenden der Tilde

Wenn Sie alle Geschwisterelemente des imgs_source-Elements erhalten möchten, können Sie das verwenden Tilde~. Der Code lautet wie folgt:

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

Das Obige ist der Unterschied zwischen Leerzeichen und Größer-als-Zeichen> sowie dem Pluszeichen + und der Tilde~ im JQuery-Selektor. Weitere verwandte Inhalte finden Sie unter PHP chinesische Website (www. php.cn)!