jQuery :: 필터링 관련 선택자 및 메소드

김병철·2022년 11월 27일
0

jQuery

목록 보기
4/7

# jQuery

# jQuery 필터링 관련 선택자 및 메소드

# 필터 관련 선택자

  • html 코드 :
<h3>필터 관련 선택자</h3>
<table border="1">
    <!-- (tr>td*3)*5 -->
    <tr>
        <th>이름</th>
        <th>혈액형</th>
        <th>거주지</th>
    </tr>
    <tr>
        <td>박명수</td>
        <td>AB</td>
        <td>서울</td>
    </tr>
    <tr>
        <td>유재석</td>
        <td>O</td>
        <td>경기</td>
    </tr>
    <tr>
        <td>노홍철</td>
        <td>B</td>
        <td>인천</td>
    </tr>
    <tr>
        <td>정준하</td>
        <td>A</td>
        <td>부산</td>
    </tr>
    <tr>
        <td colspan="2">총 인원</td>
        <td>4명</td>
    </tr>
</table>
  • 스크립트 실행 전 html 출력 :

tr요소 중 첫 번째 요소와 마지막 요소의 속성 변경

$(function(){
    $("tr:first").css("background-color","black").css("color","white");
    $("tr:last").css({backgroundColor:"red",color:"darkblue"});
})
  • 스크립트 실행 후 html 출력 :

tr요소 중 짝수번, 홀수번 요소의 속성 변경

$(function(){
    $("tr:even").css("backgroundColor","lightgray");//짝수번째 행 (0부터 시작)
	$("tr:odd").css("backgroundColor","lightyellow");//홀수번째 행
})
  • 스크립트 실행 후 html 출력 :

# 필터링 관련 메소드

기준이 되는 요소 중에 특정 요소만 걸러 선택해주는 메소드

  • first()
  • last()
  • filter()
  • eq()
  • not()
  • html 코드 :
<h4 class="test">test-1</h4>
<h4 class="test">test-2</h4>
<h4 class="test">test-3</h4>
<h4 class="test">test-4</h4>
<h4>test-5</h4>
<h4 class="test">test-6</h4>
  • 스크립트 실행 전 html 출력 :

h4태그 중 첫 번째 요소, 마지막 요소, 2번 인덱스의 속성 변경

  • jQuery 코드 :
$(function(){
 	//h4요소들 중 가장 처음요소를 선택
	$("h4").first().css("font-size","20px");
	//h4요소들 중 가장 마지막요소 선택
	$("h4").last().css("font-size","10px");
	//0부터 시작해서 해당 요소를 선택
	$("h4").eq(2).text("eq로 선택됨");

});
  • 스크립트 실행 후 html 출력 :

h4태그 중 클래스명이 test인 것과 test가 아닌 것의 속성 변경

  • jQuery 코드 :
	//h4요소중 test클래스를 가진 요소 선택
	$("h4").filter(".test").html("선택받았습니다..");
	//h4요소중 test클래스 아닌 요소 선택
	$("h4").not(".test").css("color","red");
  • 스크립트 실행 후 html 출력 :

profile
keep going on~

0개의 댓글