[jQuery] jQuery로 작업하기, Part 1

출처: http://www.ibm.com/developerworks/kr/library/wa-jquery1/#main
IBM에 올라오는 내용을 따라하면서 첨삭한 것임...

1. 적절하게 jQuery 함수를 호출하는 방법

// 틀림 <script language=JavaScript> $("div").addClass("a"); </script> // 바름 $(document).ready(function(){ $("div").addClass("a"); }); // - 또는 - $(document).ready(function(){ myAddClass(); }); function myAddClass() { $("div").addClass("a"); }

결국
$(document).ready(function() {
    // 여기서 하라는 얘기

});

2. jQuery 체인 연결

$("div").addClass("a").show().text("manipulated");

3. jQuery 충돌 해결
jQuery나 다른 자바스크립트 라이브러리를 사용할 때, 서로 어울려 동작하지 않을 경우가 있다는 사실이다. 다시 말해, 라이브러리 두 개 이상을 사용할 경우, 라이브러리 둘 이상에서 변수 "$"를 사용한다면 엔진은 어떤 라이브러리가 "$" 호출을 참조해야 할지 모르는 사태가 벌어진다.이런 문제를 해결하기 위해 jQuery는 "$" 변수를 다른 변수로 사상하는 방법을 제공한다.

j$ = jQuery.noConflict(); j$("div").addClass("a");

4. 선택
모든 jQuery 루트는 페이지에서 특정 엘리먼트를 선택해 다룰 수 있는 능력이 있다. 루트에서, jQuery 선택 과정은 정말 거대한 필터 과정이다. 페이지에 존재하는 모든 엘리먼트를 명령에서 제공하는 필터에 밀어넣은 다음에, 일치하는 객체 자체나 탐색이 가능한 객체 배열을 반환한다. 첫 세 가지 예제가 가장 널리 쓰인다. HTML 태그, ID, CLASS로 객체를 찾아내는 방법이다.

(1) HTML

// 이 예제는 페이지에서 모든 <div> 태그를 보여준다. 여기서 // 처음이나 마지막에 걸리는 태그가 아니라 모든 <div> 태그를 보여줌에 주목하자. // 배열 탐색은 이 기사 후반부에 다룬다. $("div").show(); // 페이지에 존재하는 모든 <p> 태그에 붉은 배경색을 부여한다. $("p").css("background", "#ff0000");

(2) ID

// 이 예제는 "sampleText"라는 id가 달린 innerHTML이나 span 엘리먼트를 찾아서 id를 "Hi"로 바꾼다. // 명령어 처음에 나오는 "#"에 주목하자. 이는 jQuery가 사용하는 구문으로, ID를 찾는다. // "#"은 반드시 있어야 하며, 만일 빠뜨리면 jQuery는 HTML 태그를 대신 찾으며, // <sampleText> 태그가 페이지에 없으므로 결국 아무런 결과도 반환하지 않는다. // 이럴 경우 아주 찾기 어려운 버그에 직면한다. $("#sampleText").html("Hi");

페이지 디자인을 제대로 하려면 페이지에 있는 모든 ID를 유일하게 만들어야 한다. 물론 이런 규칙이 (의도적이든 의도적이지 않든) 종종 깨지긴 하지만 말이다. jQuery가 ID 선택 과정에서 첫 번째 일치하는 엘리먼트만 반환하는 이유는 적절한 페이지 디자인을 따른다고 가정하고 있기 때문이다. 동일한 페이지에 존재하는 여러 엘리먼트에 태그를 붙일 필요가 있다면 CLASS 태그가 좀 더 적절한 선택이다.

(3) CLASS

// 특정 페이지에서 "redBack"이라는 CLASS로 지정된 모든 엘리먼트 배경을 붉은색으로 만든다. // 이 "redBack" CLASS 태그가 어떤 HTML 엘리먼트에 붙어있는지 상관하지 않음에 주목하자. // 또한 질의 용어 앞에 붙은 .에 주목하자. CLASS 이름을 찾기 위한 jQuery 구문이다. $(".redBack").css("background", "#ff0000"); <p class="redBack">This is a paragraph</p> <div class="redBack">This is a big div</div> <table class="redBack"><tr><td>Sample table</td></tr></table>

CLASS는 ID와 비슷하지만 페이지에 들어있는 엘리먼트 한 개 이상을 위해 쓰일 수 있다. 따라서 페이지에 ID당 엘리먼트 하나만 존재한다는 제약을 풀어야 한다면 페이지에 동일한 CLASS로 표시한 여러 엘리먼트를 배치할 수 있다. CLASS를 활용하면 CLASS 이름 하나만 전달하는 방식으로 페이지에 존재하는 광범위한 엘리먼트를 돌면서 함수를 실행하는 자유를 얻는다.

(4) 검색 기준 결합하기

// 모든 <p>, <span>, or <div> 태그를 가린다. $("p, span, div").hide();

(5) 다른 필터
페이지에서 원하는 엘리먼트를 빨리 찾도록 도와주는 다른 필터도 존재한다. 이런 필터는 모두 jQuery 검색 단어에서 필터를 나타내는 ":" 글자로 시작한다. 검색 범주에서 단독으로 사용이 가능하지만, 주로 원하는 구체적인 엘리먼트를 찾기 위해 검색 기준을 튜닝하는 방식으로 앞서 소개한 세 가지 검색 기준과 함께 사용하도록 설계되었다.

// 페이지에서 모든 <p> 태그를 가린다. $("p").hide(); // 페이지에서 HTML 태그에 무관하게 첫 엘리먼트를 가린다. $(":first").hide(); // 검색 기준을 좀 더 정교하게 튜닝하게 다듬는 기능을 제공하기 위해 섞어서 사용하는 // 방법을 보여준다. 특정 페이지에서 첫 번째 <p> 태그만 감춘다. $("p:first").hide();

API 페이지 참조: http://docs.jquery.com/Selectors

(6) 폼 엘리먼트 필터
추가 필터와 마찬가지로 폼 필터도 필터임을 알려주는 ":" 문자로 시작한다. 또한 검색 결과를 좀 더 정교하게 얻기 위해 다른 검색 필터와 섞어서 사용하기도 한다. 따라서 ":text"라는 검색 필터는 페이지에 존재하는 모든 텍스트 필터를 반환하며, ".largeFont:text"라는 검색 필터는 페이지에서 "largeFont" 클래스인 텍스트 필드만 반환한다. 이는 폼 엘리먼트를 정교하게 조작하기 위한 기능을 제공한다.
폼 필터는 또한 개발자가 알아 두면 좋은 내용인 엘리먼트의 개별 속성을 포함한다. 따라서 ":checked", ":disabled", ':selected"와 같은 필터는 검색 기준을 정교하게 지정하도록 사용할 수 있다.
-API 페이지 참고할 것

// class가 deleteCheck인 체크박스 중에서 체크된 것들만 선택 $(".deleteCheck:checked").each(function() {     // Do Something });

5. 탐색
each() 함수. 이 함수는 엘리먼트 각각을 순회하며 루프를 돌 때마다 엘리먼트를 하나씩 처리하기에 프로그래밍 측면에서 "for loop"와 동일하다. 추가적으로 "this"(일반적인 자바스크립트 구문을 사용할 경우)나 $(this)(jQuery 명령어를 사용할 경우)로 루프 내에서 각 엘리먼트를 참조할 수 있다.

// 페이지에 있는 각 <p> 태그를 대상으로 순회한다. 여기서 인라인 함수 사용에 주목하자. // 자바에서 anonymous 클래스와 비슷한 기능이다. // 개별 함수를 호출하거나 이와 같이 인라인 함수를 작성할 수 있다. var increment = 1; $("p").each(function(){ // 이제 태그를 만날 때마다 문단 카운터를 하나씩 더한다. $(this) 변수를 사용해 // 개별 문단 엘리먼트를 참조하는 방법에 주목하자. $(this).text(increment + ". " + $(this).text()); increment++; });

(1) 추가적인 배열 함수

// eq() 함수는 직접 배열에 속한 구성 요소를 참조할 때 사용한다. // 이 경우 세 번째 문단(당연히 0이 시작 기준이다)을 얻은 다음에 감춘다. $("p").eq(2).hide(); // slice() 함수는 배열에서 처음과 끝 색인을 받아서 새끼 배열을 친다. // 다음은 페이지에서 세 번째부터 다섯 번째까지 문단을 감춘다. $("p").slice(2,5).hide();

(2) next() 함수

<input type=text class=validate><span></span> function validateForm() { $(".validate:text").each(function(){ if ($(this).val()=="") // 페이지에서 "validate" 클래스로 정의된 각 textfiled를 순회한다. // 비어 있다면, <span> 바로 뒤에 오류 메시지를 집어 넣는다. $(this).next().html("This field cannot be blank"); }); }

6. 이 기사에서 배운 내용을 하나로 합치기
웹 메일 테이블에 있는 좌상단 컬럼에 보이는 "Select All"/"Deselect All" 체크 박스에 초점을 맞춘다(아래에 강조했다). 이 체크 박스를 선택하면, 컬럼에 있는 모든 체크 박스를 선택하며, 체크 박스 선택을 해제하면, 컬럼에 있는 모든 체크 박스 선택을 해제한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> <title>JQuery Test 01</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function() {     }); function checkAll() {     //alert($("#allCheck").attr("checked"));     if($("#allCheck").attr("checked") == true) {         // 체크 안 된 개별 선택을 찾아서 갯수 카운트         var cnt = 0;         $(".priCheck").each(function() {             //alert($(this).val() + " : " + $(this).attr("checked"));             if($(this).attr("checked") != true) {                 cnt++;             }         });         //alert("false : " + cnt);         // 모두 checked로         $(".priCheck").each(function() {             $(this).attr("checked", true);         });     }     else {         // 체크된 개별 선택을 찾아서 갯수 카운트         var cnt = 0;         $(".priCheck:checked").each(function() {             //alert($(this).val() + " : " + $(this).attr("checked"));             cnt++;         });         //alert("false : " + cnt);         // 모두 unchecked로         $(".priCheck").each(function() {             $(this).attr("checked", false);         });     } } </script> </head> <body> <table>     <tr>         <td><input type="checkbox" id="allCheck" onclick="checkAll();" value="AAA"></td>         <td>전체 선택</td>     </tr>     <tr>         <td><input type="checkbox" class="priCheck" value="1"></td>         <td>개별 선택1</td>     </tr>     <tr>         <td><input type="checkbox" class="priCheck" value="2"></td>         <td>개별 선택2</td>     </tr>     <tr>         <td><input type="checkbox" class="priCheck" value="3"></td>         <td>개별 선택3</td>     </tr> </table> </body> </html>

- :unchecked와 같은 필터는 없음.
- 체크상태로 만들려면 checkbox플러그인을 쓰던가, 아님 $("XXX").attr("checked", true) 사용. attr("속성명", "값")으로 아무 속성이나 설정가능

<!-- 1 단계는 Select All 체크박스 자체 생성이다. 페이지에서 체크박스에 유일한 ID를 부여한다. --> <input type=checkbox id=selectall> <!-- 2 단계는 체크박스에 속한 각 행을 만들어낸다. 각 행에 속한 체크박스에 'selectable' 클래스를 지정한다. 행이 여러 개며 또한 행에 속한 각 체크박스가 동일한 행동 방식을 보이기를 원하기 때문이다. --> <input type=checkbox class=selectable> <!-- 3 단계(마지막)는 jQuery 코드를 사용해서 하나로 합친다. --> // 모든 jQuery 설정 코드는 이 document.ready() 함수에 있어야 함을 기억하자. // 아니면 올바르게 동작하기 위해 자체 함수에 포함되어 있어야 한다. $(document).ready(function(){ // 페이지에서 selectall 체크박스를 찾기 위해 jQuery 선택 구문을 활용한다. // (ID를 지정하는 '#'에 주목하자) 그리고 jQuery에게 selectAll() 함수를 // 누군가 체크박스에 클릭할 때마다 호출하도록 알려준다.(이벤트는 다음 기사에서 // 다루겠다). $("#selectall").click(selectAll); }); // 이 함수는 누군가 selectall 체크박스를 누를 때마다 호출될 것이다. function selectAll() { // 이 행은 selectall 체크박스가 체크되었는지 아닌지를 판단한다. // 다음번 기사에 소개할 attr() 함수는 넘어온 객체에서 속성을 반환한다. // 여기서 체크 되었으면 true를, 그렇지 않으면 undefined를 반환한다. var checked = $("#selectall").attr("checked"); // 이제 jQuery 선택 구문을 활용해서 페이지에 속한 모든 체크박스를 찾는다. // 여기서 (각 행의 체크박스인) selectable class를 지정하는 방법을 쓴다. // 선택 결과 넘어오는 배열을 얻어서 each() 함수를 사용해서 순회한다. // 이렇게 되면 한번에 하나씩 결과 항목을 처리할 수 있다. each() 함수 내부에서 // $(this) 변수를 사용해서 개별 결과를 참조할 수 있다. 따라서 루프 내부에서 // 각 체크박스 값을 찾아서 selectall 체크박스와 일치하도록 만든다. $(".selectable").each(function(){ var subChecked = $(this).attr("checked"); if (subChecked != checked) $(this).click(); }); }