JS jQuery (part. 10) - 기본 필터 메서드

jQuery의 선택자를 사용하면 원하는 문서 객체 대부분 선택 가능하다

기본적으로 지원하지 않는 필터로 문서 객체를 선택해야 한다면 filter( ) 메서드를 사용해야 한다

$(function () {
    $('h2:even').css({ background: 'Gray', color: 'white' })
});

여러가지 css를 객체로 만들어 한번에 사용

$(function () {
    $('h2').filter(':even').css({ background: 'Gray', color: 'white' })
});

filter( )를 이용해서 사용가능

$(function () {
    $('h2').filter(function (index){
    	return index % 3 == 0;
    }).css({ background: 'Gray', color: 'white' })
});

filter( ) 메서드의 매개변수로 함수 사용가능

index가 3의 배수인 h2 태그를 선택한다

$(function () {
    $('h2').css('background','orange').filter(':even').css('color','red');
});

체이닝을 사용해서 한 줄로 서로 다른 문서 객체에 스타일을 적용가능

코드가 간결해진다

$(function () {
    $('h1').css('background', 'orange').filter(':even').css('color','white').end().filter(':odd').css('color','red');
});

end( ) 메서드로 체이닝 연장가능

특정 위치에 존재하는 문서 객체를 선택하는 필터 선택자는 자주 사용하므로 간단한 메서드로 제공해준다

$(function () {
    $('h1').eq(0).css('background','orange');
    $('h1').eq(-1).css('background','red');
});

add( ) 메서드를 사용하면 현재 선택한 문서 객체의 범위를 확장할 수 있다

$(function () {
    $('h1').css({ background: 'Gray', color: 'white' }).add('h2').css('float','left');
});

is( ) : 문서 객체의 특징을 판별

<body>
    <h3 class="select">Header-0</h3>
    <h2>Header-1</h2>
    <h3 class="select">Header-2</h3>
</body>

$(function () {
  $('h3').each(function () {
    if ($(this).is(".select")) {
  	  $(this).css('background', "orange");
    }
  })
});

JS jQuery (part. 12) - 문서 객체 조작 addClass( ), attr( ) (0)	2020.08.03
JS jQuery (part. 11) - 특정 태그 선택 (0)	2020.08.03
JS jQuery (part. 09) - 옵션 객체 보완 (0)	2020.07.30
JS jQuery (part. 08) - 충돌 방지 (0)	2020.07.30
JS jQuery (part. 07) - 객체 확장 (0)	2020.07.30

Maeng's