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

filter

filter 함수는 이미 선택된 항목에 대해서 다시 한번 더 선택을 하고자 할 때 사용합니다.

$('h1').css('background', '#ff0000').filter(':even').css({'color', '#00ff00');

인자를 함수 객체를 던져 처리하는 형태도 가능하며, 아래의 예는 h1 요소 중 짝수번째 요소들에 대한 처리입니다.

$('h1').filter(
    function(index) {
        return (index % 2) == 0;
    }
).css({'color', '#00ff00'});

eq, first, last

요소에 대한 위치 순서로 선택하는 선택자 함수입니다.

$('p').eq(3).css('color', '#00ff00'); // 4번째 요소
$('p').first().css('color', '#ff0000'); // 첫번째 요소
$('p').last().css('color', '#0000ff'); // 마지막 요소
$('p'').eq(-1).css('color', '#ff00ff'); // 끝에서 첫번째 요소

add

이미 선택된 요소들에 다른 요소를 추가하는 함수입니다.

$('p').css('color', '#ff0000').add('span').css('background', '#ffff00');

is

해당 요소가 선택 조건에 맞는지를 검사합니다.

$('h1').each(
    function() {
        if($(this).is('.a')) {
            $(this).css('color', '#ff0000');
        }
    }
);

find

특정 태그 또는 클래스를 갖는 요소를 선택하는 함수입니다.

var doc = $('
 ... 
 ... 
 ... 
');
doc.find('p').each(
    function(index) {
        $(this).css('background', '#0000ff');
    }
);

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