> 웹 프론트엔드 > JS 튜토리얼 > jquery 선택기에서 공백과 큼 기호 >, 더하기 기호 + 및 물결표 ~의 차이

jquery 선택기에서 공백과 큼 기호 >, 더하기 기호 + 및 물결표 ~의 차이

黄舟
풀어 주다: 2017-03-01 14:47:32
원래의
1446명이 탐색했습니다.

개념

Space: $('parent childchild')는 상위 아래의 모든 하위 하위 노드를 얻는 것을 의미합니다

보다 큼 기호: $('parent > childchild')는 부모 아래의 다음 레벨 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>
<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>
로그인 후 복사

공백 사용

imgs_box의 모든 태그를 가져오려면 공백을 사용할 수 있습니다. 코드는 다음과 같습니다. 다음과 같습니다

//获取imgs_box下的所有元素
$(function(){
	$(&#39;#imgs_box a&#39;).each(function(){
		console.log(this);
	});
});
로그인 후 복사

효과는 아래와 같습니다. 보시다시피 모든 요소는

보다 큼 기호를 사용하여 얻습니다.

imgs_box의 다음 수준에 있는 모든 ul 요소를 원할 경우 test_first_child 클래스의 요소를 제외하고 다음을 사용할 수 있습니다. 다음 코드

$(function(){
	$(&#39;#imgs_box > ul&#39;).each(function(){
		console.log(this);
	});
});
로그인 후 복사


더하기 기호 사용

imgs_source 클래스 요소의 다음 인접 요소를 가져오려면 더하기 기호를 사용할 수 있습니다. 코드는 다음과 같습니다

$(function(){
	$(&#39;.imgs_source + ul&#39;).each(function(){
		console.log(this);
	});
});
로그인 후 복사


물결표 사용

imgs_source 요소의 모든 형제 요소를 가져오려면 물결표~를 사용할 수 있습니다. 코드는 다음과 같습니다

$(function(){
	$(&#39;.imgs_source ~ ul&#39;).each(function(){
		console.log(this);
	});
});
로그인 후 복사



위 내용은 jquery 선택기의 공백과 초과 기호>, 더하기 기호 + 및 물결표~의 차이입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트( www.php.cn)!



관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿