jQuery, 자주 묻는 질문들

var myDomElement = document.getElementById('foo');
$(myDomElement).find('a');

(문제) 특정 class가 지정되어져 있는 요소인지 확인은 어떻게 하나요?

아래의 코드처럼 hasClass를 사용하면 됩니다.

$( "div" ).click(function() {
    if ( $( this ).hasClass( "protected" ) ) {
        $( this )
            .animate({ left: -10 })
            .animate({ left: 10 })
            .animate({ left: -10 })
            .animate({ left: 10 })
            .animate({ left: 0 });
    }
});

또한 아래처럼 요소의 상태 확인이 가능한 is 함수를 사용해서도 가능합니다.

if ( $( "#myDiv" ).is( ".pretty.awesome" ) ) {
    $( "#myDiv" ).show();
}

is 함수는 선택된 요소가 숨김 상태인지를 다음처럼 확인할 수 있습니다.

if ( $( "#myDiv" ).is( ":hidden" ) ) {
    $( "#myDiv" ).show();
}

(문제) 선택 요소가 있는지 확인은 어떻게 하나요?

선택자로 얻은 결과에 대해 .length 속성으로 아래처럼 확인할 수 있습니다. length 속성은 선택자에 의해 몇개의 요소가 선택되었는지에 대한 개수를 반환합니다.

if ( $( "#myDiv" ).length ) {
    $( "#myDiv" ).show();
}

(문제) 토글(toggled)되어진 요소의 상태를 어떻게 결정할 수 있나요?

요소가 숨겨져 있는지에 확인하는 것은 :visible과 :hidden 선택자를 사용해 파악이 가능하다.

var isVisible = $( "#myDiv" ).is( ":visible" );
var isHidden = $( "#myDiv" ).is( ":hidden" );

가시성에 기반해 요소에 대한 간단한 조작을 하고자 한다면, 단지 선택자에서 :visible이나 :hidden을 사용합니다. 아래이 코드를 보시기 바랍니다.

$( "#myDiv:visible" ).animate({
    left: "+=200px"
}, "slow" );

(문제) 폼 요소에 대해 비활성화/활성화는 어떻게 하나요?

아래의 코드처럼 prop 함수를 사용해 폼 요소를 활성화 하거나 비활성화 할 수 있습니다.

// Disable #x
$( "#x" ).prop( "disabled", true );

// Enable #x
$( "#x" ).prop( "disabled", false );

(문제) 체크박스 또는 라디오버튼에 대한 체크나 언체크는 어떻게 하나요?

아래의 코드처럼 prop 함수를 사용해 체크 여부를 결정할 수 있습니다.

// Check #x
$( "#x" ).prop( "checked", true );

// Uncheck #x
$( "#x" ).prop( "checked", false );

(문제) 선택된 option의 텍스트 값은 어떻게 얻나요?

선택 요소는 일반적으로 얻을 수 있는 2가지 값이 있습니다. 첫번째는 서버로 보내지는 값이며, 아래처럼 간단히 얻을 수 있습니다.

$( "#myselect" ).val();
// => 1

두번째는 선택된 요소의 텍스트 값인데요. 예를들어 아래와 같은 코드와 같다고 합시다.

    Mr
    Mrs
    Ms
    Dr
    Prof

아래의 코드를 통해 선택된 option의 텍스트 값을 얻을 수 있습니다.

$( "#myselect option:selected" ).text();
// => "Mr"

(문제) 10개의 항목 리스트 중 3번째 요소의 텍스트값을 변경하기는?

:eq() 선택자 또는 eq 함수를 사용해 원하는 항목을 선택할 수 있습니다. 아래는 eq 함수를 사용한 경우입니다.

var thirdLink = $( this ).find( "li a" ).eq( 2 );
var linkText = thirdLink.text().replace( "foo", "bar" );
thirdLink.text( linkText );

(문제) jQuery 객체로부터 Native DOM 요소를 어떻게 얻나요?

선택자에 의한 jQuery 객체는 1개 이상의 DOM 요소를 배열처럼 감싼 객체입니다. 이 jQuery 객체에 대한 실제 DOM 요소에 대한 참조를 얻기 위한 방법은 2가지입니다. 첫번째는 배열 표기법으로 아래와 같습니다.

$( "#foo" )[ 0 ]; // document.getElementById( "foo" )와 동일한 코드

2번째 방법은 get 함수로 다음과 같습니다. (첫번째 방법보다 느림)

$( "#foo" ).get( 0 ); 

만약 get 함수에 인자를 지정하지 않고 호출하면, DOM 요소의 실제 배열을 반환합니다.