[jQuery] Traversing

티스토리 뷰

WEB/jQuery

[jQuery] Traversing

춘햄 2021. 6. 7. 14:14

jQuery의 트래버싱은 요소 선택을 좀 더 편리하게, id 속성 값을 굳이 주지 않아도 부모나 자식 요소의 관계나 인덱싱을 통해 요소에 접근하는 방법이다.

바로 확인해보자.

1. n 번째 index

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>n번째 요소 가져오기</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
        // 특정 요소 중 첫번째: first
        //	마지막: last
        //	n번째: 
        // 	1. 선택기: $('p:eq(2)') --> p 태그의 형제 요소 중 2번
        // 	2. 함수  : $('p').eq(2)
			alert($('p:eq(2)').text());
			alert($('p').eq(2).text());
        });

    </script>
</head>

<body>

	<p>C#</p>		<!-- 0번 -->
	<p>ASP.NET</p>	<!-- 1번 -->
	<p><sup>jQuery</sup></p>	<!-- 2번 -->

	<p>jQuery<sup>1</sup></p> <!-- 3번 -->
	
	<p>jQuery<sub>1</sub></p> <!-- 4번 -->

</body>

</html>

2. 지정된 표현식 존재 여부

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>지정된 표현식이 있는지 없는지 검사</title>

 

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
			// is() : 존재 여부를 true / false 로 반환
			// children() : 특정 요소의 자식 요소들
			
			if($('#myForm').children().is("input[type=submit]")) {
				alert("존재!!");
			} else {
				alert("없음!!");
			}
        });

    </script>

</head>

<body> 

	<div id="myForm">
	    <input type="checkbox" />
        <input type="submit"/>
	</div> 

</body> 

</html>

3. 지정된 표현식을 제외한 요소 가져오기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지정된 표현식을 제외한 요소 가져오기</title>

<style type="text/css">
.Yellow {
	background-color: Yellow;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// not() : ~ 이 아닌 요소
		$('input').not("input[type=radio]").each(function(index){
			$(this).addClass("Yellow");
		})
	});
</script>

</head>

<body>

	<div id="myform">
		<input type="text" /> <input type="password" /> 
		<input type="radio" />
	</div>

</body>

</html>

4. 방금 실행한 요소의 직전 요소 반환

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>방금 실행한 요소의 직전으로 되돌리기</title>

<style type="text/css">
.Yellow {
	background-color: Yellow;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		var html = $('div').find('p:last').find('b').end().html();
		// 1. div   <==  <div id="myForm"> ~ </div>
		
		// 2. .find('p:last')  <== <p><b>jQuery</b></p>
		// 3. .find('b') <== <b>jQuery</b>
		
		// 4. .end()  <== <p><b>jQuery</b></p>
		// 5. .html()  <== <b>jQuery</b>
	});
</script>
</head>

<body>

	<div id="myForm">
		<p>
			<b>JavaScript</b>
		</p>
		<p>
			<b>jQuery</b>
		</p>
	</div>

</body>

</html>

'WEB > jQuery' 카테고리의 다른 글

[jQuery] Effects (0)	2021.06.07
[jQuery] 동적으로 요소 추가 (0)	2021.06.07
[jQuery] bind & unbind (0)	2021.06.07
[jQuery] 다양한 Selector 이용 (0)	2021.06.07
[jQuery] 요소의 반복 each() (0)	2021.06.07