01. 셀렉터와 jQuery 함수를 사용하여 DOM 요소 선택하기
문제점
jQuery 메서드를 사용하여 요소를다루기 위해서 단일 DOM 요소나 DOM 요소의 집합을 선택할 필요가 있다.
해결방법
jQuery는 DOM에서 요소를 선택하기 위한 두 가지 방법을 제공하는데, 두 방법 모두 jQuery 함수(jQuery( ), 또는 $( ))를 사용한다. CSS 셀렉터와 사용자 정의 셀렉터를 사용하는 첫 번째 방법은 가장 많이 사용되며, 가장 훌륭한 해결방법이기도 하다. 셀렉터 식을 포함하는 문자열을 jQuery 함수에 전달하면 함수는 DOM을 탐색하여 표현식에 부합하는 DOM 노드들을 알아낼 것이다.
다음 예제 코드는 HTML 문서에 존재하는 모든 <a> 요소를 선택할 것이다.
| ex01.html |
<html> |
출력결과 |
웹 브라우저로 이 HTML 페이지를 실행한다면 페이지에 6개의 <a> 요소가 있다고 알려주는 alert( )울 보게 될 것이다. 우선 모든 <a> 요소를 선택하도록 그 값('a')을 jQuery에게 전달했으며, 그 다음 jQuery 래퍼 집합에 속해있는 요소들의 수를 알아내기 위해서 length 속성을 사용하고 있다.
jQuery 함수의 첫 번째 매개변수는 다양한 표현식을 가질 수 있다는 점에 주목하자. 그렇게 하려면 단지 jQuery 함수에 첫 번째 매개변수로 전달되는 문자열에다가 다양한 셀렉터를 쉼표로 나누어 지정하기만 하면 된다. 이는 다음 예제와 같이 표현할 수 있다.
jQuery('selector1, selector2, selector3').length; |
DOM 요소를 선택하기 위한 두 번째 방법이자 그다지 일반적이지 않은 방법으로는 DOM 요소를참조하는 실제 자바스크립트를 jQuery 함수에 전달하는 방법이 있다. 예를 들자면, 다음 코드도 HTML 문서 안에 있는 모든 <a> 요소를 선택할 것이다. 다만 jQuery 함수에 getElementByTagName 이라는 DOM 메서드를 사용하여 구성한 <a> 요소 배열을 전달하고 잇다는 점에 주목하기 바란다. 이 예제는 이전 예제와 완전히 동일한 결과를 제공한다.
ex02.html |
<html> |
| 출력결과 |
논의
jQuery를 유명하게 만든 공로자 중에는 HTML 문서에서 DOM 요소를 찾아내는 역할을 하는 Sizzle(http://sizzlejs.com/)이라는 셀렉터 엔진이 큰 몫을 차지하고 있다.
각각의 방법들이 융용하게 사용도리 수 있겠지만 jQuery 함수에 DOM 참조를 전달하는 것은 모든 이들이 좋아할만한 방식은아닐 것이다. 그보다는 셀렉터를 사용하는 쪽이 훨씬 강력하고도 광범위한 선택일 것이며, 셀렉터야말로 jQuery를 특별하게 만드는 훌륭한 기능이다.
02. 특정 컨텍스트 안에서 DOM 요소 선택하기
문제점
document나 다른 DOM 요소의 컨텍스트 안에 있는 DOM 요소나 DOM 요소 집합에 대한 참조를 얻어올 필요가 있다.
해결방법
CSS 표현식을 갖는 jQuery 함수는 두 번째 매개변수를 가질 수도 있다. 이 매개변수는 어떤 컨텍스트에 대해서 표현식을 기반으로 DOM 요소를 찾아야 하는지를 jQuery 함수에게 알려주는 역할을 한다. 이러한 두 번째 매개변수는 DOM 참조이거나 jQuery 래퍼 또는 document 일 수 있다. 다음 예제에는 12개의 <input> 요소가 놓여져 있다. <form> 요소를 기반으로 하여 특정 <input> 요소를 선택하기 위해 컨텍스트를 어떻게 사용하고 있는지에 주목하기 바란다.
ex03.html |
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ex03</title> <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script> </head> <body> <form> <input name = "" type = "checkbox" /> <input name = "" type = "radio" /> <input name = "" type = "text" /> <input name = "" type = "button" /> </form> <form> <input name = "" type = "checkbox" /> <input name = "" type = "radio" /> <input name = "" type = "text" /> <input name = "" type = "button" /> </form> <input name = "" type = "checkbox" /> <input name = "" type = "radio" /> <input name = "" type = "text" /> <input name = "" type = "button" /> <script type="text/JavaScript"> // 컨텍스트 래퍼를 사용하여 모든 form 요소 안에서 input 요소를 찾는다. 8개의 input을 출력 alert('selected ' + jQuery('input', $('form')).length + ' inputs'); // 컨텍스트로 DOM 참조를 사용하여 첫 번째 from 요소 안에서 input 요소를 찾는다. // 4개의 input을 출력 alert('selected ' + jQuery('input', document.forms[0]).length + ' inputs'); // 표현식을 사용하여 body 요소 안에 있는 모든 input 요소를 찾는다 12개의 input을 출력 alert('selected ' + jQuery('input', 'body').length + ' inputs'); </script> </body> </html> |
출력결과 ① |
출력결과 ② |
출력결과 ③ |
논의
앞서 설명한 것처럼 검색을 위한 컨텍스트로서 document를 지정하는 것도 가능하다 .예를 들면, XHR 요청(Ajax 요청)의 응답으로 가져온 XML 문서의 컨텍스트 안에서 검색하는 것도 가능하다는 것이다.
03. DOM 요소의 래퍼 집합 필터링하기
문제점
jQuery 래퍼 집합 안에 선택한 DOM 요소들이 들어있다. 하지만 추가적으로 새로운 표현식을 지정하여 표현식과 일치하지 않는 DOM 요소들을 그 집합에서 제거하고 그들이 제거된 새로운 요소 집합을 만들고자 한다.
해결방법
jQuery의 filter 메서드는 지정된 표현식과 일치하지 않는 요소를 제외하는 역할을 한다. 간단히 말해서 filter( ) 메서드는 현재의 요소 집합을 필터링 할 수 있게 한다는 것이다 .이는 jQuery의 find 메서드와는 상당히 다르다. find( ) 메서드는 현재 래퍼 집합의 자식 요소들을 대상으로 하여 새로운 요소를 찾음으로써(새로운 셀렉터 표현식을 사용하여) DOM 요소 래퍼집합을 줄여나가는 매서드이니 말이다.
필터 메서드를 이해하기 위해서 다음의 코드를 살펴보도록 하자
ex04.html |
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ex04</title> <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script> </head> <body> <a href = "#" class = "external">link</a> <a href = "#" class = "external">link</a> <a href = "#"></a> <a href = "#" class = "external">link</a> <a href = "#" class = "external">link</a> <a href = "#"></a> <a href = "#">link</a> <a href = "#">link</a> <a href = "#">link</a> <a href = "#">link</a> <script type="text/JavaScript"> // 집합에는 4개가 남아있다고 출력된다. alert(jQuery('a').filter('.external').length + ' external links'); </script> </body> </html> |
| 출력 결과 |
예제 코드에 있는 HTML 페이지는 10개의 <a> 요소를 가지고 있다. 그리고 외부 링크인 <a>요소에는 external 이라는 이름의 클래스 명이 지정되어 있다. 우리는 jQuery 함수를 사용하여 페이지의 모든 <a> 요소를 선택하였으며, filter 메서드를 사용하여 class 어트리뷰트 값이 exteranl로 설정되어 있지 않은 모든 요소를 원본 집합에서 제거하고 있다. filter( ) 메서드를 사용하여 초기 DOM 요소집합을 변경하고 난 뒤에는 length 속성을 호출하고 있는데, 이는 filter가 적용된 새로운 집합에 얼마나 많은 요소가 존재하는 지를 알려줄 것이다.
논의
또한 filter( ) 메서드에 표현식이 아닌 함수를 전달하는 것도 가능한데, 그런 경우 함수는 래퍼 집합을 필터링하는 동작을 수행해야 할 것이다. 앞의 예제 코드에서는 문자열 표현식을 filter( ) 메서드에 전달했었는데, 이는 다음과 같이 함수를 사용하는 방식으로 변경도리 수 있다.
ex05.html |
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ex05</title> <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script> </head> <body> <a href = "#" class = "external">link</a> <a href = "#" class = "external">link</a> <a href = "#"></a> <a href = "#" class = "external">link</a> <a href = "#" class = "external">link</a> <a href = "#"></a> <a href = "#">link</a> <a href = "#">link</a> <a href = "#">link</a> <a href = "#">link</a> <script type="text/JavaScript"> // 집합에는 4개가 남아있다고 출력된다. alert(jQuery('a').filter(function(index) {return ${this}.hasClass('external');}).length + ' external links'); </script> </body> </html> |
| 출력 결과 |
filter( ) 메서드에 익명 함수가 전달되고 잇는 것에 주목하자. 이 함수는 현재 요소와 동일한 컨텍스트를 가지고 호출된다. 함수 안에서 $(this)를 사용한다면, 그는 래퍼 집합 안에 있는 각각의 DOM 요소를 참조한느 것이다 .함수 안에서는 래퍼 집합 안에 있는 각각의 <a> 요소들이 external이라는 클래스 값을 가지는지(hassClass( )) 확인하고 있다. 만일 true라면 해당 요소가 집합에 유지될 것이지만, 그 값이 false라면 해당 요소는 집합에서 제거도리 것이다. 다른 방법으로는 함수가 false를 반환한느 경우에 요소를 제거해 나가는 방식도 있다. 함수가 false가 아닌 다른 데이터 값을 반환한다면 요소는 래퍼 집합 안에 남아있게 될 것이다.
예제에서 사용하지는 않고 있지만 index라는 이름의 매개변수를 함수에 전달하고 있는 부분도 주목해야 한다. 이 매개변수는 jQuery 래퍼 집합 안에서 요소의 인덱스를 숫자형식으로 참조하기 위해 사용될 수 있다.
'jQuery' 카테고리의 다른 글
| [jQuery] jQuery Ajax 부가 메서드 (0) | 2015.05.10 |
|---|---|
| [jQuery] jQuery Ajax의 기초 (0) | 2015.05.10 |
| [jQuery] 페이지 로드 전에 jQuery / 자바스크립트 실행하기 (0) | 2015.04.21 |
| [jQuery] jQuery를 사용한 객체 확장 (0) | 2013.09.10 |
| [jQuery] jQuery를 사용한 배열 관리 (0) | 2013.09.10 |
