문서 객체 탐색

jQuery 기본 셀렉터
예제 설명
filter() 문서 객체를 필터링합니다.
end() 문서 객체 선택을 한 단계 뒤로 돌립니다.
eq() 특정 위치에 있는 문서 객체를 선택합니다.
first() 첫 번째 문서 객체를 선택합니다.
last() 마지막 문서 객체를 선택합니다.
add() 문서 객체를 추가로 선택합니다.
is() 문서 객체의 특징을 판별합니다.
find() 특정 태그를 선택합니다.

1. 기본 필터링 메서드

$(selector).filter(seletor);
$(selector).filter(function() { });

  • test1
  • test2
  • test3
  • test4
  • test5
  • test6
						// ready 함수
						$(document).ready(function(){
							// 예제 1
							var testBtn = document.getElementById("testBtn");
							testBtn.onclick = function  () {
								// :even 선택자를 사용한 경우.
								$("div.sample ul li:even").css({
									backgroundColor:'black',
									color:'white'
								});							
							};
							
							// 예제2
							var testBtn2 = document.getElementById("testBtn2");
							testBtn2.onclick = function  () {
								// filter() 메서드에 :odd 선택자를 사용해서 필터링한 경우.
								$("div.sample ul li").filter(":odd").css({
									backgroundColor:'crimson',
									color:'white'
								});									
							};

							// 예제3
							var testBtn3 = document.getElementById("testBtn3")
							testBtn3.onclick = function  () {
								// filter() 메서드의 인자로 함수를 사용해서 필터링한 경우.
								// 인자로 설정된 함수의 인자값 index를 사용해서 함수의 내용에 의거해서 객체를 필터링함.
								$("div.sample ul li").filter(function (index) {
									return index%3 == 0;
								})
								.css({
									backgroundColor:'blue',
									color:'white'
								});
							};
						});														
						

2. 문서 객체 탐색 종료 - end()

아래의 소스를 filter(), end()를 이용해서 체이닝

						$(document).ready(function(){
							var testBtn4 = document.getElementById("testBtn4");
							testBtn4.onclick = function  () {
								$("div.sample ul li").css("background","Orange");
								$("div.sample ul li:even").css("color","white");
								$("div.sample ul li:odd").css("color","red");
							};
						});																	
						

filter(), end()를 이용한 체이닝

						$(document).ready(function(){
							var testBtn4 = document.getElementById("testBtn4");
							testBtn4.onclick = function  () {
								$("div.sample ul li").css("background","Orange")
								.filter(':even').css('color','white')
								.end()
								.filter(':odd').css('color','red');
							};
						});																	
						

3. 특정 위치의 문서 객체 선택 - eq(), first(), last()

eq() 매서드의 매개변수로 음수값을 넣을 경우, 맨 뒤의 문서 객체가 -1번째 입니다.

  • test1
  • test2
  • test3
  • test4
  • test5
  • test6

paragraph 1

							$(document).ready(function(){
								var testBtn5 = document.getElementById("testBtn5");
								testBtn5.onclick = function  () {
									$("div.sample2 ul li").eq(1).css('background','orange');
								};

								var testBtn6 = document.getElementById("testBtn6");
								testBtn6.onclick = function  () {
									$("div.sample2 ul li").eq(-2).css('background','crimson');
								};

								var testBtn7 = document.getElementById("testBtn7");
								testBtn7.onclick = function  () {
									$("div.sample2 ul li").first().css({
										background:"blue",
										color:"white"
									});
								};

								var testBtn8 = document.getElementById("testBtn8");
								testBtn8.onclick = function  () {
									$("div.sample2 ul li").last().css({
										background:"black",
										color:"white"
									});
								};
							});						
						

4. 문서 객체 추가 선택

add() 메서드를 사용하면 현재 선택한 문서 객체의 범위를 확장할 수 있습니다.

							$(document).ready(function(){
								var testBtn9 = document.getElementById("testBtn9");
								testBtn9.onclick = function  () {
									$("div.sample2 ul li").css('background','gray').add("div.sample2 p").css("float","left");
								};
							});							
						

5. 문서 객체의 특징 판별

							$(document).ready(function(){
								var testBtn10 = document.getElementById("testBtn10");
								testBtn10.onclick = function  () {
									$("div.sample2 ul li").each(function () {
										if ($(this).is(".selected")) {
											$(this).css("border","2px solid red");
										}
									});
								};
							});								
						

6. 특정 태그 선택

							// 변수를 선언
							var xml = '';
							xml += '';
							xml += '		';
							xml += '			연하진';
							xml += '			Ruby';
							xml += '		';
							xml += '		';
							xml += '			윤명월';
							xml += '			Basic';
							xml += '		';
							xml += '		';
							xml += '			윤하린';
							xml += '			C#';
							xml += '		';
							xml += '';

							$(document).ready(function(){
								// 변수 선언
								var xmlDoc = $.parseXML(xml);
								$(xmlDoc).find('friend').each(function (index) {
									// 변수 선언
									var output = '';
									output += '
'; output += '

'+$(this).find('name').text()+'

'; output += '

'+$(this).find('language').text()+'

'; output += '
'; // 출력 document.body.innerHTML += output; }); });

7. filter - 매개변수 function을 이용하여 특성을 갖는 요소 선택하기

다른 요소와의 관계 또는 단순한 어트리뷰트 값, 혹은 셀렉터 식으로는 표현할 수 없는 프로그램적인 상태 같은 가변적인 특성을 기반으로 요소를 선택할 필요가 있습니다.
jQuery의 filter() 메서드는 문자열(즉, 셀렉터 식)이나 함수를 인자로 가실 수 있습니다. 만약 함수를 지정한다면 그의 반환값은 어떠한 요소가 선택되었는지 여부를 나타내게 됩니다. 지정된 함수는 현재 선택된 모든 요소에 대해 동작합니다. 함수가 false를 반환할 때마다 해당하는 요소는 컬렉션으로부터 제거되며, true를 반환하는 경우에만 해당 요소가 켈력션에 그대로 남아 있게 됩니다.

							jQuery('*').filter(function() {
								return !!jQuery(this).css('backgroundImage');
							});																			
						

상기의 코드는 배경 이미지를 갖는 모든 요소를 선택할 것입니다.
상기 소스의 경우 초기 컬렉션은 모든 요소(*)가 되며, 이어서 함수가 지정된 filter() 메서드가 호출되고 있습니다. 이 함수는 대상 요소에 backgroundImage가 지정되어 있는 경우 true를 반환할 것입니다. !!는 자바스크립트의 어떤 형식을 Boolean 식으로 빠르게 변환할 수 있는 방법입니다. false라는 것은 빈 문자열, 숫자 0, undefined 값, null 형식 그리고 false 불린 값 그 자체가 될 수 있습니다. 이들 중 하나가 backgroundImage를 질의한 것으로부터 반환된다면 함수는 false를 반환할 것이며, 그 결과 컬렉션으로부터 background 이미지가 없는 모든 요소는 제거될 것입니다. 방금 이야기한 내용의 대부분은 사실 jQuery의 고유 특징이 아니라 자바스크립트의 기본적인 내용입니다.
사실 jQuery가 반환 값을 불린 자체로 제공하기에, !!가 꼭 필요한 것은 아닙니다. 그러나 이 방식을 유지하는 것은 좋은 생각입니다. 누군가 여러분의 코드를 볼 때, 여러분의 의도를 확실히 알 수 있을테니 말입니다(가독성이 좋아진다는 의미입니다).

아래는 여러가지 필터링 예제입니다.

							// 너비가 100px 에서 200px 사이에 있는 모든 div 요소 선택
							jQuery('div').filter(function () {
								var width = jQuery(this).width();
								return width > 100 && width <200;
							});

							// 일반적인 이미지 확장자를 갖는 모든 이미지 선택
							jQuery('img').filter(function () {
								return /\.(jpe?g|png|bmp|gif)(\?.+)?$/.test(this.src);
							});

							// 자식의 수가 10 또는 20인 모든 요소 선택
							jQuery('*').filter(function () {
								var children = jQuery(this).children().length;
								return children === 10 || children ===20;
							});																			
						

※ 참고 - jQuery object를 javascript object로 변환하기

http://johnjianfang.blogspot.com/2009/04/convert-jquery-object-to-dom-object.html 번역

jQuery 객체는 javascript 객체의 확장집합이다. 하지만 그 자체가 DOM 객체는 아니다. jQuery 객체로 부터 DOM객체를 얻기 위해서는 get() 메서드를 이용해야 한다.

예를 들어 jQuery 객체가 오직 하나의 DOM객체를 가지고 있다(jQuery객체는 배열로 반환된다.)면 아래와 같이 get()를 이용하면 된다.

$("div").get(0) 혹은

$("div")[0]

하지만, 다수의 DOM object들을 가지길 원한다면 아래처럼 할 수 있다.

$("div").get()

※ 참고 - map()

							
								var idArray = $("div.test > div").map(function () {
									return this.id;
								}).get();
								alert(idArray);