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

늦깍이에 웹 개발의 험난한 파도 속에 허욱적 대고 있는 요즘.. 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 요소

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

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

$('#myDivId');

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

$('.myCssClass');

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Mr
    Mrs
    Ms
    Dr
    Prof

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

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

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

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

jQuery의 플러그인 기능 중에 유틸리티 성격의 플러그인을 정리해 봅니다. 정리해 놓으면 딱 필요할때 익숙하게 사용할 수 있겠지요.

먼저 문자열 앞뒤의 공백 문자를 제거해 주는 코드입니다.

var s = '   You are, you will be good.      ';
s = $.trim(s);

다음은 배열의 값이나 객체의 키-값들을 순회하는 each 함수이며, 예제 코드는 아래와 같습니다.

$.each(['foo', 'bar', 'baz'], function (i, v) {
    alert(i + " : " + v);
});

$.each({ foo: 'bar', baz: 'bim' }, function (k, v) {
    alert(k + ' : ' + v);
});

그리고 어떤 값이 배열에 속해 있는지를 검사하는 플러그인입니다.

var myArray = [1, 2, 3, 4, 5];
if ($.inArray(4, myArray) !== -1) {
    alert('found.');
}

다음은 어떤 객체에 또 다른 객체의 키-값을 복사해 주는 플러그인입니다. $.extend의 첫번째 인자는 복사가 되어 값이 저장될 대상 객체입니다. 그리고 두번째 이후의 인자는 복사될 키-값을 담고 있는 객체들입니다. 아래의 코드는 secondObj의 키-값을 firstObj에 복사해 주는 코드인데요. 결국 firstObj.foo는 secondObj.foo의 값으로 변경됩니다. $.extend는 첫번째 인자를 반환하므로 newObject === firstObj는 true입니다.

var firstObj = { foo: 'bar', a: 'b' };
var secondObj = { foo: 'baz' };
var newObject = $.extend(firstObj, secondObj);

alert(firstObj.foo);

if (newObject === firstObj) {
    alert('equal');
}

다음 코드는 함수 호출시 내부의 this를 개발자가 의도한 객체로 하여 함수를 호출하도록 하는 플러그인입니다. 아래의 코드에서 myFunction는 전역 객체인 Window의 소유로 이 함수를 그대로 호출하면 함수 내부에서 this는 Window 객체가 됩니다. 그러나 12번 코드를 통해 myFunction 함수에 대한 내부 this를 myObject로 변경해주는 함수로 myProxyFunction를 생성하고 있습니다. 실제로 이 myProxyFunction를 13번 코드처럼 그대로 호출하면 함수 내부의 this는 myObject가 됩니다. JavaScript의 이벤트 리스너 함수에서 this 객체가 다소 혼란스러울 때가 있습니다. 이 혼란의 시기에 이 플러그인이 해결점이 될 수 있겠습니다.

var myFunction = function () {
    alert(this);
};

var myObject = {
    foo: 'bar',
    toString: function () { return 'myObject'; }
};

myFunction();

var myProxyFunction = $.proxy(myFunction, myObject);
myProxyFunction();

다음은 배열을 순회하면서 원하는 값들로 구성된 배열을 생성하는 플러그인입니다. 7번 코드의 실행을 통해 arr 배열의 요소 객체의 id 속성만으로 구성된 배열을 생성해 반환합니다. 11번 코드는 새롭게 생성된 배열의 값을 확인하는 코드입니다.

var arr = [
    { id: 'a', tagName: 'li' },
    { id: 'b', tagName: 'li' },
    { id: 'c', tagName: 'li' }
];

var result = $.map(arr, function (value, index) {
    return value.id;
});

$.each(result, function (i, v) {
    alert(i + ' : ' + v);
});

다음은 특정 객체의 타입이 무엇인지를 확인하는 플러그인입니다.

alert($.isArray([])); // true
alert($.isFunction(function () { })); // true
alert($.isNumeric(3.14)); // true

alert($.type(true)); // boolean
alert($.type(3)); // number
alert($.type('test')); // string
alert($.type(function () { })); // function
alert($.type([])); // array
alert($.type(null)); // null
alert($.type(/test/)); // regexp
alert($.type(new Date())); date