lonelycat's cellar

// eq() 함수는 직접 배열에 속한 구성 요소를 참조할 때 사용한다.

// 이 경우 세 번째 문단(당연히 0이 시작 기준이다)을 얻은 다음에 감춘다.

$("p").eq(2).hide();



// slice() 함수는 배열에서 처음과 끝 색인을 받아서 새끼 배열을 친다.

// 다음은 페이지에서 세 번째부터 다섯 번째까지 문단을 감춘다.

$("p").slice(2,5).hide();

<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");

    });

}

<!-- 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();

    });

}