ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • jQuery_필터링 메소드
    jQuery 2022. 4. 19. 00:11

    객체 탐색

    필터링 메소드

    : 필터 메소드를 통해 문서 객체 선택

     

    <예시>

    <body>
    	<h2>필터링 메소드</h2>
    	<h4 class="test">test-a</h4>
    	<h4 class="test">test-b</h4>
    	<h4 class="test">test-c</h4>
    	<h4 class="test">test-d</h4>
    	<h4>test-e</h4>
    	<h4 class="test">test-f</h4>
    	
    	<script>
    		$(function(){
    // 			$('h4:even').css('background', 'black');
    			//h4의 짝수번째에 배경컬러를 블랙으로 변경
    			$('h4').filter(':even').css({'background':'tomato','color':'white'});
               	 	//h4에 짝수번째에 배경 토마토색+글자컬러 흰색으로 변경
    			$('h4').filter(':odd').css({'background':'yellowgreen', 'color':'white'});
                		//h4에 홀수번째 배경에 연두색과 글자컬러는 흰색으로 변경
    			$('h4').first().css('font-size', '25px');
               	 	//h4의 첫번째 폰트사이즈를 25px로 변경
    			console.log($('h4').last().text());//text()=innerText 
    			$('h4').last().text($('h4').last().text() + " : 마지막 요소");
               	 	//h4의 마지막 텍스트의 : 마지막요소라는 텍스트 추가
    			$('h4').eq().text($('h4').eq(3).text() + " : eq()메소드로 필터링"); 
    			//지정한 인덱스 3번째 eq()메소드로 필터링이라는 텍스트 추가
    	        	$('h4').not('.test').css({'background':'yellow','color':'black'});
    			//test라는 클래스 존재하지 않는 곳에만 배경 노랑색과 글자 검정으로 변경.
    			
    		});
    	</script>
    	
    </body>

    'jQuery' 카테고리의 다른 글

    jQuery_manipulation_객체조작  (0) 2022.04.19
    jQuery_sideways메소드  (0) 2022.04.19
    jQuery_Descendants메소드  (0) 2022.04.19
    jQuery_Ancestors메소드  (0) 2022.04.19
    jQuery_기본 개념  (0) 2022.04.18
Designed by Tistory.