-
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