▷ DOM 객체 탐색 및 접근을 통해 조작하는 방법(이벤트)
→ on('이벤트명', 함수) 형식을 사용
▷ on('click', 함수)
- 특정 대상을 '클릭' 시 동작하는 이벤트
- 클릭 대상에 제한은 없음(버튼 외에 다른 요소도 가능)
- $('선택자').click(함수) 와 동일함
<%@ 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() {
// 모든 버튼에 click 이벤트 연결
// $(':button').on('click', function() {
// // alert('버튼 클릭');
// // 버튼들 중에서 포커스가 주어진 버튼을 탐색하여 해당 버튼의 value 속성값 가져오기
// // => 포커스 속성 확인은 가상선택자 ':focus' 사용 가능
// alert($('input[type=button]:focus').val() + "버튼 클릭됨");
// });
// 첫번째 버튼에만 click 이벤트 연결
// => 각 요소를 탐색하여 val() 함수를 통해 value 속성값 가져와서 출력
// => 아이디와 패스워드는 name 속성을 통해 탐색하고
// 셀렉트박스는 option 태그 중 selected 속성이 부여된 요소 탐색
$('input[type=button]').eq(0).on('click', function() {
$('#resultArea').html(
'아이디 : ' + $('input[name=id]').val() + '\n' +
'패스워드 : ' + $('input[name=password]').val() + '\n' +
'선택과목 : ' + $('#selectBox > option:selected').val()
);
});
// 버튼 외의 항목도 클릭이 가능
$('#clickDiv').on('click', function() {
alert('div 태그 클릭');
});
// 특정 요소에 포커스가 주어질 때 동작하는 이벤트 'focus'
$('#resultArea').on('focus', function() {
$('#resultArea').html('textarea focus in');
});
// 특정 요소에 포커스가 해제될 때 동작하는 이벤트 'blur'
$('#resultArea').on('blur', function() {
$('#resultArea').html('textarea focus out');
});
});
</script>
</head>
<body>
<h1>jQuery - test8.jsp</h1>
<div id="wrap">
<div id="inputBox">
아이디 : <input type="text" name="id"><br>
패스워드 : <input type="password" name="password">
</div>
<select id="selectBox" name="subject">
<option value="선택하세요">선택하세요</option>
<option value="자바">자바</option>
<option value="JSP">JSP</option>
<option value="스프링">스프링</option>
</select>
<br>
<textarea id="resultArea"></textarea>
<br>
<input type="button" value="확인">
<input type="button" value="취소">
</div>
====<div id="clickDiv"> </div>====
</body>
</html>'JSP' 카테고리의 다른 글
| AJAX (1) - 사용법 (0) | 2022.03.09 |
|---|---|
| JQuery (on 이벤트2) (0) | 2022.03.04 |
| JQuery (sumit() 함수) (0) | 2022.03.04 |
| JQuery (이벤트3) (0) | 2022.03.04 |
| JQuery (이벤트2) (0) | 2022.03.04 |
