[카테고리:] 프로그래밍

작성일자

jQuery 선택자 컨닝 페이퍼

늦깍이에 웹 개발의 험난한 파도 속에 허욱적 대고 있는 요즘.. jQuery에서 가장 많이 사용하는 선택자가 까마귀 고기로 보여 컨닝 페이퍼 만들어 봅니다.

전체 선택자

$('*').css('color', 'red');

Tag 선택자

$('h1').css('color', 'orange');

ID 선택자

$('#abc').css('color', 'orange');

여러 개의(OR 조건) 선택자

$('h1, p, #abc').css('color', 'orange');

class 선택자

$('.item').css('color', 'black');

AND 조건 선택자

$('.item.abc').css('color', 'black');

자식 선택자

$('div > p').css('color', 'black');

후손 선택자

$('div p').css('color', 'black');

속성 선택자

$('h1[tt').val('good'); // 속성을 가지는 것 선택
$('h1[tt=aa').val('good'); // 속성값 일치하는 것 선택
$('h1[tt~=aa').val('good'); // 속성값에 단어로써 포함하는 것 선택
$('h1[tt^=aa').val('good'); // 속성값의 시작에 일치하는 것 선택
$('h1[tt$=aa').val('good'); // 속성값의 끝에 일치하는 선택
$('h1[tt*=aa').val('good'); // 속성값에 포함하는 것 선택

input tag 중 특정 type 선택자

$(':button').val("BTN");
$('.a:button').attr("disabled", true);

input tag 중 특정 상태 선택자

$('.a:checked').val('good'); // checked된 input 요소
$('.a:disabled').val('good'); // 비활성화된 input 요소
$('.a:enabled').val('good'); // 활성화된 input 요소
$('.a:focus').val('good'); // 포커스 대상 input 요소
$('.a:input').val('good'); // input, textarea, button, select 요소
alert( $('.a > option:selected').val() ); // class 'a'를 가진 select 요소 자식 중 선택된 option 요소
작성일자

jQuery, 자주 묻는 질문들

(문제) class나 ID를 통해 어떻게 항목을 선택할 수 있나요?

아래의 코드는 ID가 #myDivId인 항목을 선택합니다.

$('#myDivId');

아래는 myCssClass라는 class 이름을 갖는 요소를 선택합니다.

$('.myCssClass');

(문제) 이 DOM 요소를 가지고 있을때, 이를 이용해 요소를 어떻게 선택하나요?

아래의 코드는 ID가 foo인 DOM 요소를 가지고, 이 요소에 포함된 모든 요소를 선택하고 있습니다.

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

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

아래의 코드를 통해 선택된 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 요소의 실제 배열을 반환합니다.