문서 객체 선택과 탐색

기본 필터 메서드

filter()
문서 객체를 필터링합니다.

1. $(selector).filter(selector);
2. $(selector).filter(function(){});

1번 예시

$(document).ready(function() {
	$('h3').filter(':even').css({
		backgroundColor: 'black',
		color: 'white'
	});
});

2번 예시

$(document).ready(function() {
	$('h3').filter(function (index) {
		return index % 3 == 0;
	}).css({
		backgroundColor: 'black',
		color: 'white'
	});
});

문서 객체 탐색 종료

end()
문서 객체 선택을 한 단계 뒤로 돌립니다.

체이닝 할 때 유용하게 쓰임

$('h1').css('background', 'orange').filter(':even').css('color', 'white').end().filter(':odd').css('color', 'red');

특정 위치의 문서 객체 선택

메서드 이름	설명
eq()	특정 위치에 존재하는 문서 객체를 선택합니다.
first()	첫 번째에 위치하는 문서 객체를 선택합니다.
last()	마지막에 위치하는 문서 객체를 선택합니다.

$(document).ready(function() {
	$('h1').eq(0).css('background', 'orange');
	$('h1').eq(-1).css('background', 'red');
)};

문서 객체 추가 선택

add()
문서 객체를 추가적으로 선택합니다.

$(document).ready(function() {
	$('h1').css('background', 'Gray').add('h2').css('float', 'left');
});

문서 객체의 특징 판별

is()
문서 객체의 특징을 판별합니다

$(document).ready(function() {
	$('h1').each(function() {
		if ($(this).is('.select')) {
			$(this).css('background', 'orange');
		}
	});
});

특정 태그 선택

find()

: 특정 태그를 선택합니다.

XML 문서에서 데이터를 추출하는 데 많이 사용

$.parseXML()

: 문자열을 XML 문서 객체로 변경

// 변수를 선언합니다.
var xml = '';
xml += '<friends>';
xml += '	<friend>';
xml += '		<name>연하진</name>';
xml += '		<language>Ruby</language>';
xml += '	</friend>';
xml += '	<friend>';
xml += '		<name>윤명월</name>';
xml += '		<language>Basic</language>';
xml += '	</friend>';
xml += '	<friend>';
xml += '		<name>윤하린</name>';
xml += '		<language>C#</language>';
xml += '	</friend>';

$(document).ready(function() {
	// 변수를 선언합니다.
	var xmlDoc = $.parseXML(xml);

	$(xmlDoc).find('friend').each(function(index) {
		// 변수를 선언합니다
		var output ='';
		output += '<div>';
		output += '		<h1>' + $(this).find('name').text() + '</h1>';
		output += '		<p>' + $(this).find('language').text() + '</p>';
		output += '<div>';		
		
		// 출력합니다.
		document.body.innerHTML += output;
	});
});

parent() 메서드

특정 태그의 부모 태그를 선택한다

<body>
	<script>
		$(document).ready(function() {
			// 버튼을 클릭하면
			$('button').click(function() {
				// 자신의 글자를 변경합니다.
				$(this).text('비활성화하기');
				
				// 자신의 부모
				$(this).parent().css('background', 'red');
				$(this).parent().find('span').text('활성화');
			});
		});
	</script>
	<div>
		<span>비활성화</span>
		<button>활성화하기</button>
	</div>
	<div>
		<span>비활성화</span>
		<button>활성화하기</button>
	</div>
</body>

이벤트 리스터에서 this 키워드 : '이벤트를 발생시킨 객체'

-> $(this).parent()는 클릭한 대상의 부모를 의미합니다.