<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
import = "java.util.*"
%>
<%
request.setCharacterEncoding("utf-8");
String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery Filter</title>
<link rel="stylesheet" href="<%=path%>/a00_com/a00_com.css">
<script src="<%=path%>/a00_com/jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h3").text("filter 관련 기능 메서드");
$("#adr_tab01 tr").filter(":even").css("background-color","yellow"
).end().filter(":odd").css("background-color","orange"
).end().filter(".ck01").css("font-size","18px");
});
</script>
</head>
<body>
<h3 align="center"></h3>
<form id="frm01">
<table id = "adr_tab01">
<tr>
<td>번호</td> <td>이름</td> <td>전화번호</td><td>주소</td><td>우편번호</td>
</tr>
<tr class ="ck01"><td>1</td><td>임요한</td><td>010-2020-1010</td><td>경기도 성남시 중원구</td><td>51304</td></tr>
<tr class ="ck01"><td>2</td><td>이요한</td><td>010-2020-2010</td><td>경기도 성남시 분당구</td><td>51304</td></tr>
<tr><td>3</td><td>백지영</td><td>010-2020-3010</td><td>경기도 성남시 중원구</td><td>51304</td></tr>
<tr><td>4</td><td>성윤정</td><td>010-2020-4010</td><td>경기도 성남시 수정구</td><td>51304</td></tr>
<tr class ="ck02"><td>5</td><td>홍길동</td><td>010-2020-5010</td><td>경기도 성남시 중원구</td><td>51304</td></tr>
</table>
</form>
</body>
</html>
자~ 푹 쉬고 왔어욧!
이번시간에는 JQuery 활용을 위한 몸풀기 단계, Filter 사용법 알아봅시다.
Filter란 왜 사용하는 것일까?
화면에 사용자가 원하는 데이터를 뽑아 준다할지라도, 우리는 "그 중에" "더 중요한 데이터를 강조"하기 위해서
강조표현을 해주어야 하는 경우가 많습니다. 그럴때 사용하는 것이 이 filter선택자 입니다.
조금 더 상세하게 데이터를 "선택"할 수 있도록 도와주는 역할을 하는 것인데, 부모선택자 뿐만 아니라 하위에 있는
데이터를 선택할 수 있도록 "Filtering" 이 필요하기 때문입니다.
Filtering, 어떻게 사용할까?
쉽게말해 교실에서 서있는 아이들 중에, 키작은 친구 > 성이 김 인친구 > 고양시에 사는 친구순으로 더 세부적으로
선택할 수 있도록 역할하는 기능이 filter 입니다. 위의 형식을 따져본다면 filter 기능 메서드는 이렇게 활용됩니다.
1. 선택할 id / 태그 / class 를 선택하여 $() <- 괄호안에 넣어준다.
기본 filter("선택자형식")
2. 선택자에 따른 기능메서드를 연달아 작성할 수 있다.
$("요소선택자").기능메서드1().기능메서드2().기능메서드3()
이때 중요한 개념은
1. 기능메서드의 chainning
: jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있는데, 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다. 쉽게말해 키작은 친구 > 성이 김 인친구 > 고양시에 사는 친구순 으로 연속적으로 제어가 가능하다는 말이다.
2. chaing 끊어내기 - end () 메서드
:만약 이 연속적인 제어를 끊어내고 싶다면, 다시말해 키작은 친구 > 성이 김 인친구 > 고양시에 사는 친구순이 아니라
키작은 친구에 기능메서드 하나,
성이 김인 친구에 기능메서드 하나,
식으로 연속제어를 끊어주고 싶다면 end() 메서드를 사용하면 된다. 아래와 같이 #adr_tab01 열에서 홀수(:even) 값 중 css로 노란 배경색상을 입혀준 후,
선택했던 홀수 값을 제외하고 "새로" 선택하여 속성을 입히고 싶다면 .end() 메서드로 연속제어를 끊어내면 된다.
아래사진은 위 코드의 결과값이다.
'2. 웹' 카테고리의 다른 글
| [JSP]DB연결하여 성적리스트 뽑기 (0) | 2021.08.16 |
|---|---|
| [jquery] Jquery를 왜 사용하는가? (0) | 2021.08.14 |
| 홀로코스트와 현대성_지그만트 바우만 (0) | 2018.11.25 |
| 방법서설 (0) | 2018.11.24 |
| 과학과 성경의 대화 _버나드 램 (0) | 2018.10.27 |