▷ 버튼 등의 특정 대상에 대한 클릭 이벤트(기본)
→ $('선택자').click(함수(){});
▷ 특정 요소에 대한 조작 이벤트
1. html()
- HTML 문서에서 지정된 범위(선택자)안의 모든 요소를 가져오거나 추가하는 함수
- 요소를 가져올 때 주석까지 포함해서 가져옴
- 단, XML 문서를 대상으로 사용 불가
2. text()
- html() 함수와 달리 HTML 문서 및 XML 문서에서도 적용 가능
- 모든 문자열을 가져오거나 추가 가능
- 브라우저마다 줄바꿈이나 공백 등이 달라질 수 있음
3. empty()
- 지정된 선택자 내의 하위 요소 제거(비움)
4. remove()
- 지정된 선택자 및 선택자 내의 하위 요소 모두 제거
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// => 버튼 중 첫번째 버튼에 대한 클릭 이벤트 처리
// $('input[type=button]:first').click(function() {
// alert("시계 표시 버튼 클릭!");
// });
// h3 태그 내의 HTML 요소 가져오기
// var h3Element = $('h3').html(); // 첫번째 h3 태그의 요소("제목1" 텍스트) 가져오기
// alert(h3Element);
// id 선택자 #h3_2 인 태그의 모든 요소 가져오기
// var h3Element = $('#h3_2').html(); // 제목2 <span>제목2-1</span> <span>제목2-2</span>
// alert(h3Element);
// id 선택자 #h3_2 인 태그의 모든 텍스트 가져오기(공백 적용됨 = 눈에 실제 보이는 형태)
// var h3Text = $('#h3_2').text(); // 제목2 제목2-1 제목2-2
// alert(h3Element);
// ------------------------------------------------------------
// html() 함수를 호출하여 #h3_1 선택자의 요소 내용 바꾸기(= 태그 적용 가능)
$('#h3_1').html('<i>italic 적용된 제목1</i>');
// text() 함수를 호출하여 #h3_1 선택자의 요소 내용(텍스트만) 바꾸기(= 태그 적용 불가능)
// $('#h3_1').text('<i>italic 적용된 제목1</i>');
// ------------------------------------------------------------
// 모든 h3 태그의 텍스트에 내용 추가
// => html() 함수 내에 익명 함수를 구현하여 함수 호출이 반복되도록 수행
// => 이 때, index 파라미터는 해당 요소의 인덱스 번호가 전달되며
// oldHtml 파라미터는 해당 요소의 내용이 전달됨
// $('h3').html(function(index, oldHtml) {
// alert(index + ", " + oldHtml); // 각 인덱스에 해당하는 요소의 내용이 차례대로 출력
// });
// 모든 h3 태그의 뒷부분에 "입니다" 텍스트 추가(= return 문 활용하여 값 설정)
$('h3').html(function(index, oldHtml) {
return oldHtml + " 입니다";
});
// ------------------------------------------------------------
// empty() 함수를 사용하여 선택자 내의 하위 요소 제거
// $('#h3_2').empty(); // h3 태그는 남아있음
// remove() 함수를 사용하여 선택자 및 선택자 내의 하위 요소 제거
$('#h3_2').remove(); // h3 태그도 제거됨
// TextArea 내부에 "wrap" id 선택자의 요소 출력
// $('#ta').val($('#wrap').html()); // 해당 태그에 값을 설정
$('#ta').html($('#wrap').html()); // 해당 태그에 HTML 요소 설정(TextArea 는 동일함)
});
// =============================================================
function getTime() {
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
return hour + " : " + min + " : " + sec;
}
$(document).ready(function() {
var isStop = false; // setInterval() 함수를 중단하기 위한 신호(true 가 되면 중단)
// 시계 표시 버튼 클릭 시 현재 시각(getTime() 함수 리턴값)을 timer 선택자 위치에 표시
$('input[type=button]:first').click(function() {
isStop = false;
// id 선택자가 timer 인 요소에 HTML 태그 출력
$('#timer').html('<h1>' + getTime() + "</h1>");
// 시계 표시를 1초마다 갱신
setInterval(function() {
// 단, 타이머 중단 신호(isStop)가 false 일 때만 타이머 갱신
if(!isStop) {
$('#timer').html('<h1>' + getTime() + "</h1>");
} else {
// setInterval() 함수를 중단하기 위해서는 clearInterval() 함수 호출
// => 이 때, 파라미터로 현재 함수(객체)를 전달
clearInterval(this); // 익명함수이므로 자신(this)을 직접 전달
}
}, 1000);
});
// 시계 제거 버튼 클릭 시 timer 선택자 내의 요소 제거
$('input[type=button]:last').click(function() {
$('#timer').empty();
// 타이머 중단하기 위해 중단 신호(isStop)을 true 로 변경
isStop = true;
});
});
</script>
</head>
<body>
<h1>jQuery/test4.jsp</h1>
<div id="wrap">
<!-- 제목을 출력하는 공간 -->
<h3 id="h3_1">제목1</h3>
<h3 id="h3_2">제목2 <span>제목2-1</span> <span>제목2-2</span></h3>
<h3 id="h3_3">제목3</h3>
</div>
<textarea id="ta" rows="5" cols="50"></textarea>
<hr>
<input type="button" value="시계 표시"> <input type="button" value="시계 제거">
<div id="timer">
<!-- 시계가 표시될 공간 -->
</div>
</body>
</html>※ <script src="../js/jquery-3.6.0.js"></script>
$(document).ready(function() {});
이 두문장은 필수!
위 문장은 제이쿼리를 사용하기 위한 문장
밑에 문장은 안적으면 밑에 함수들이 시작이 안됌(document가 준비가 되면 코드 시작)
'JSP' 카테고리의 다른 글
| JQuery (이벤트3) (0) | 2022.03.04 |
|---|---|
| JQuery (이벤트2) (0) | 2022.03.04 |
| Jquery (css()함수) (0) | 2022.03.04 |
| JQuery (선택자) (0) | 2022.03.04 |
| JQuery (사용방법) (0) | 2022.03.04 |
