Hi

문서 객체 선택과 탐색 본문

WEB(웹)/jQuery

문서 객체 선택과 탐색

SharingWorld 2018. 6. 30. 11:19

문서 객체 선택과 탐색

기본 필터 메서드

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()는 클릭한 대상의 부모를 의미합니다.


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

문서 객체의 스타일  (0) 2018.06.30
문서 객체의 속성  (0) 2018.06.30
문서 객체의 클래스 속성 제거  (0) 2018.06.30
문서 객체의 클래스 속성 추가  (0) 2018.06.30
(jquery) 배열 관리  (0) 2018.06.27
'WEB(웹)/jQuery' Related Articles more