jQuery

4. 필터 메서드

몽이코딩 2024. 8. 21. 10:34
반응형

필터 메서드

  • 선택된 문서객체를 다시 재선택하는 메서드입니다.

 

메서드 종류 설명
first( ) 선택된 문서객체 중 첫번째 객체를 재선택하는 메서드
last( ) 선택된 문서객체 중 마지막 객체를 재선택하는 메서드
even( ) 선택된 문서객체 중 짝수 객체를 재선택하는 메서드
odd( ) 선택된 문서객체 중 홀수 객체를 재선택하는 메서드
eq(n) 선택된 문서객체 중 배열번호가 n번인 객체를 재선택하는 메서드
filter(기준) 선택된 문서객체 중 매개변수의 기준에 맞는 객체를 재선택하는 메서드
not(기준) 선택된 문서객체 중 매개변수의 기준이 아닌 것을 재선택하는 메서드
add('선택자') 선택된 문서객체와 매개변수의 선택자를 추가로 선택하는 메서드

 

 

first( ) 메서드, last( ) 메서드 

<!-- HTML -->
<body>
    <h1>제목태그</h1>
    <h1>제목태그</h1>
    <h1>제목태그</h1>
    <h1>제목태그</h1>
    <h1>제목태그</h1>
</body>
//javascript
$(document).ready(function(){
    //선택자방식으로 첫번째 요소만 선택
    $('h1:first').css('color','red');
    
    //first
    $('h1').first().css('color','red');

    //last
    $('h1').last().css('color','red');
});

 

 

even() 메서드, odd() 메서드 

//javascript
$(document).ready(function(){
		//even
    $('h1').even().css('background','pink');

    //odd
    $('h1').odd().css('background','lightblue');
});

 

 

eq( ) 메서드 

//javascript
$(document).ready(function(){
    //eq
    $('h1').eq(2).css('text-decoration','underline');
});

 

 

filter( ) 메서드, not() 메서드 

<!- HTML -->
<body>
    <h1>제목태그</h1>
    <h1 class="second">제목태그</h1>
    <h1>제목태그</h1>
    <h1>제목태그</h1>
    <h1>제목태그</h1>
</body>
//javascript
$(document).ready(function(){
    //filter
    $('h1').filter('.second').css('font-weight','normal');

    //not
    $('h1').not('.second').css('font-style','italic');
});

 

 

add( ) 메서드 

<!-- HTML -->
<body>
    <h2>제목태그</h3>
    <h4>제목태그</h4>
    <h5>제목태그</h5>
    <h6>제목태그</h6>
</body>
//javascript
$(document).ready(function(){
    //add
    $('h1').add('h2').css('font-size',30);
});
반응형