반응형
1. jQeury 이벤트 처리 함수
1) jQeury 이벤트 처리 함수 등록법
12_event.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery Event Handle</h1>
<hr>
<button type="button" id="btn">버튼을 눌러보세요.</button>
<div id="displayDiv"></div>
<script type="text/javascript">
//1.
//👑$(selector).click(callback)
// => 선택자로 검색된 태그에서 클릭 이벤트가 발생되면 콜백함수
// => (이벤트 처리 함수)를 호출하는 메소드 - 이벤트 처리 함수를 등록하는 메소드
// => 단축형 : 검색 태그에서 발생되는 "하나의 이벤트"에 대한 이벤트 처리 함수 등록
/*
$("#btn").click(function() {
$("#displayDiv").text("이벤트 처리 명령 실행");
});
*/
/*
//2.
//👑$(selector).on(event,callback)
// => 선택자로 검색된 태그에서 클릭 이벤트가 발생되면 콜백함수
// => (이벤트 처리 함수)를 호출하는 메소드 - 이벤트 처리 함수를 등록하는 메소드
// => 일반형 : 검색 태그에서 발생되는 "다수의 이벤트"에 대한 이벤트 처리 함수 등록
$("#btn").on("click",function() {
$("#displayDiv").text("이벤트 처리 명령 실행");
});
*/
//태그에서 발생되는 다수의 이벤트에 대한 이벤트 처리 함수를 등록하기 위해 on 메소드의
//매개변수에 JSON 형식의 Object 객체의 요소로 전달하여 등록
$("#btn").on({
"click":function() {
$("#displayDiv").text("이벤트 처리 명령 실행");
},
"":function(){},
"":function(){},
"":function(){},
"":function(){}
});
</script>
</body>
</html>2) jQeury 이벤트 처리 함수 내 this 키워드
13_event_this.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style type="text/css">
ul li { font-size: 1.2em; margin: 10px; }
div { font-size: 1.5em; color: green; }
#menu { font-weight: bold; color: red; }
</style>
</head>
<body>
<h1>jQuery Event Handle</h1>
<hr>
<h2>저녁 메뉴를 선택해 주세요.</h2>
<ul>
<li>가정식 백반</li>
<li>짜장면</li>
<li>짬뽕</li>
<li>설렁탕</li>
<li>순대국</li>
<li>삼계탕</li>
<li>쌀국수</li>
<li>돈까스</li>
</ul>
<div>선택한 저녁 메뉴는 <span id="menu">???</span>입니다.</div>
<script type="text/javascript">
$("ul li").click(function() {
//👑이벤트 처리 함수에서 this 키워드는 이벤트가 발생된 태그(Element 객체) 표현
var choice=$(this).text();//선택한 태그의 태그내용을 반환받아 변수에 저장
$("#menu").text(choice);//태그의 태그내용 변경
});
</script>
</body>
</html>
3) 이벤트 처리함수 등록 on키워드(일반형)
14_event_on.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style type="text/css">
div { width: 350px; margin: 0 auto; padding: 50px; font-size: 1.2em; text-align: center; border: 1px solid black; }
</style>
</head>
<body>
<h1>jQuery Event Handle</h1>
<hr>
<div>마우스를 클릭하거나 이동해 보세요.</div>
<script type="text/javascript">
/*
$("div").click(function() {
$(this).css("color","red");
});
//👑$(selector).mouseover(callback)
// => 선택자로 검색된 태그에 마우스 커서가 진입한 경우 콜백함수를 호출하는 메소드
$("div").mouseover(function() {
$(this).css("background","yellow");
});
//👑$(selector).mouseout(callback)
// => 선택자로 검색된 태그에 마우스 커서가 벗어날 경우 콜백함수를 호출하는 메소드
$("div").mouseout(function() {
//css 메소드로 다수의 CSS 스타일을 변경할 경우 Object 객체로 표현하여 전달 가능
$(this).css({"color":"black","background":"white"});
});
*/
//👑$(selector).on(event,callback)
// => 선택자로 검색된 태그에서 발생되는 다수의 이벤트에 대한 이벤트 처리 함수는 on 메소드를
//호출하여 등록하는 것을 권장
// => 다수의 이벤트에 대한 이벤트 처리 함수를 Object 객체의 요소로 표현하여 전달
$("div").on({
"click":function() {$(this).css("color","red");},
"mouseover":function() {$(this).css("background","yellow");},
"mouseout":function() {$(this).css({"color":"black","background":"white"});}
});
</script>
</body>
</html>
4) 이벤트 처리함수 제거 off키워드
15_event_off.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery Event Handle</h1>
<hr>
<button type="button" id="eventOn">이벤트 처리 함수 등록 버튼</button>
<button type="button" id="eventOff">이벤트 처리 함수 제거 버튼</button>
<hr>
<button type="button" id="btn">버튼을 눌러보세요.</button>
<div id="displayDiv"></div>
<script type="text/javascript">
/*
//1.
//[버튼을 눌러보세요.]을 누르면 "무조건 실행"됨
$("#btn").click(function() {
$("#displayDiv").text("이벤트 처리 함수의 명령 실행");
});
*/
//2.
//종속 관계의 이벤트 발생으로 다시 만들기
// => [이벤트 처리 함수 등록 버튼] 을 누른 후 [버튼을 눌러보세요.]을 눌러야 실행됨
$("#eventOn").click(function() {
$("#displayDiv").text("이벤트 처리 함수 등록 성공");
$("#btn").click(function() {
$("#displayDiv").text("이벤트 처리 함수의 명령 실행");
});
});
//3.
//[off]키워드로 이벤트 등록 제거하기
// => [이벤트 처리 함수 제거 버튼] 을 누르면 [버튼을 눌러보세요.]에 등록된 이벤트 함수 제거되고
// => "이벤트 처리함수의 제거 성공" 출력됨
$("#eventOff").click(function() {
//👑$(selector).off(event): 선택자로 검색된 태그의 이벤트를 제거하는 메소드
// => 태그에 등록된 이벤트에 대한 이벤트 처리 함수 제거
$("#btn").off("click");
$("#displayDiv").text("이벤트 처리 함수 제거 성공");
});
</script>
</body>
</html>5) jQeury 이벤트 처리함수 내 false 반환
16_event_false.html
- 자식한테 발생한 이벤트는 부모한테도 전달됨
- 실제 이벤트는 캡쳐링 단계(부모->자식)를 통해 원하는 자식까지 전달해야
- 자식이 받아서 이벤트 처리가 가능함
- 문제는 버블링 단계(자식->부모)
- 즉, 부모에도 자식과 같은 이벤트가 등록되어있다면 부모의 이벤트도 발생된다는 것
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style type="text/css">
div { width: 300px; margin: 0 auto; padding: 20px; text-align: center; border: 3px solid blue;}
a, a:visited { text-decoration: none; padding: 10px; border: 3px solid red; }
</style>
</head>
<body>
<h1>jQuery Event Handle</h1>
<hr>
<div>
<!-- a 태그는 클릭 이벤트에 의해 브라우저의 URL 주소를 변경하고 웹프로그램을 요청하여
실행 결과를 응답받아 출력하는 태그 - 태그의 기본 이벤트 -->
<a href="https://www.daum.net">다음(Daum)</a>
</div>
<script type="text/javascript">
$("div").click(function() {
$(this).css("background","aqua");
//그런데, 자식 태그 a는 white로해주세요
//(자식에게 상속 적용을 없애기 위해 스타일 따로 적용함)
$(this).find("a").css("background","white");
});
$("div").find("a").click(function() {
$(this).css("background","yellow");
/*
event.preventDefault();//태그의 기본 이벤트 제거
event.stopPropagation();//태그의 이벤트 전달 중지
*/
//이벤트 처리 함수에서 [false]를 반환하면 태그의 기본 이벤트를 제거하고 이벤트 전달 중지
return false;
});
</script>
</body>
</html>
2. 이벤트 함수
1) 마우스 이벤트
🖱 17_mouse_event.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style type="text/css">
div { font-size: 1.5em; margin: 10px; width: 200px; }
.mystyle { border: 2px solid red; background: yellow; }
/*span:hover { border: 2px solid red; background: yellow; }*/
</style>
</head>
<body>
<h1>Mouse Event</h1>
<hr>
<!-- <div><span class="mystyle">마우스 이벤트-1</span></div> -->
<div><span>마우스 이벤트-1</span></div>
<div><span>마우스 이벤트-2</span></div>
<div><span>마우스 이벤트-3</span></div>
<div><span>마우스 이벤트-4</span></div>
<div><span>마우스 이벤트-5</span></div>
<script type="text/javascript">
/*
//👑click : 태그에서 마우스 버튼을 누른 경우 발생되는 이벤트
$("span").click(function() {
//👑$(selector).addClass(name) : 선택자로 검색된 태그의 class 속성값을 추가하는 메소드
//$(this).addClass("mystyle");
//👑$(selector).removeClass(name) : 선택자로 검색된 태그의 class 속성값을 제거하는 메소드
//$(this).removeClass("mystyle");
//👑$(selector).toggleClass(name) : 선택자로 검색된 태그의 class 속성값이 없으면 추가
//하고 class 속성값이 있는면 제거하는 메소드
$(this).toggleClass("mystyle");
});
*/
//dblclick : 태그에서 마우스 버튼을 두번 연속 누른 경우 발생되는 이벤트
//$("span").dblclick(function() {$(this).toggleClass("mystyle");});
//👑mouseenter : 마우스 커서가 태그에 진입한 경우 발생되는 이벤트 - 이벤트 전달(버블링) 미발생
//👑mouseleave : 마우스 커서가 태그에 벗어난 경우 발생되는 이벤트 - 이벤트 전달(버블링) 미발생
//$("span").mouseenter(function() {$(this).addClass("mystyle");});
//$("span").mouseleave(function() {$(this).removeClass("mystyle");});
//👑mouseover : 마우스 커서가 태그에 진입한 경우 발생되는 이벤트 - 이벤트 전달(버블링) 발생
//👑mouseout : 마우스 커서가 태그에 벗어난 경우 발생되는 이벤트 - 이벤트 전달(버블링) 발생
//$("span").mouseover(function() {$(this).addClass("mystyle");});
//$("span").mouseout(function() {$(this).removeClass("mystyle");});
//👑hover : 마우스 커서가 태그에 진입하거나 벗어난 경우 발생되는 이벤트
$("span").hover(function() {//태그에 진입한 경우 호출되는 콜백함수
$(this).addClass("mystyle");
}, function() {//태그를 벗어난 경우 호출되는 콜백함수
$(this).removeClass("mystyle");
});
</script>
</body>
</html>2) 키보드 이벤트
⌨ 18_key_event.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h1>Key Event</h1>
<hr>
<form method="post" name="loginForm" id="loginForm">
<table>
<tr><td>아이디</td><td><input type="text" name="id" id="id"></td></tr>
<tr><td>비밀번호</td><td><input type="password" name="passwd" id="passwd"></td></tr>
<tr><td colspan="2"><button type="button" id="loginBtn">로그인</button></td></tr>
</table>
</form>
<hr>
<div>현재 작성된 글자수 : <span id="count">0</span></div>
<textarea rows="7" cols="80" id="content"></textarea>
<script type="text/javascript">
//form 태그와 입력태그(input, select, textarea)의 name 속성값을 Element 객체로 사용 가능
// => 입력태그의 Element 객체로 focus() 메소드를 호출하면 입력태그에 입력촛점 제공
//loginForm.id.focus();
//👑$(selector).focus() : 선택자로 검색된 태그(입력태그)에 입력촛점을 제공하는 메소드
//$(loginForm.id).focus();
$("#id").focus();
$("#loginBtn").click(function() {
/*
//입력태그의 Element 객체에 value 프로퍼티를 이용하여 입력값 사용 가능
if(loginForm.id.value=="") {
alert("아이디를 입력해 주세요.");
loginForm.id.focus();
return;
}
*/
//👑$(selector).val() : 선택자로 검색된 태그(입력태그)의 입력값을 반환하는 메소드
if($("#id").val()=="") {
alert("아이디를 입력해 주세요.");
$("#id").focus();
return;
}
if($("#passwd").val()=="") {
alert("비밀번호를 입력해 주세요.");
$("#passwd").focus();
return;
}
//form 태그의 Element 객체로 submit 메소드를 호출하여 제출 이벤트 발생 - form 태그 실행
//loginForm.submit();
//👑$(selector).submit() : 선택자로 검색된 태그(form 태그)에서 제출 이벤트를 발생하는 메소드
$("#loginForm").submit();
});
//👑keydown : 태그에서 키보드를 누른 경우 발생되는 이벤트
//👑keypress : 태그에서 키보드를 누르고 있는 경우 발생되는 이벤트 - KeyCode 제공
$("#id").keypress(function() {
//👑event.keyCode : 이벤트가 발생된 키보드의 코드값(ASCII Code)를 제공하는 프로퍼티
//alert(event.keyCode);
if(event.keyCode==13) {//이벤트가 발생된 키보드가 [Enter]인 경우
$("#passwd").focus();
}
});
$("#passwd").keypress(function() {
if(event.keyCode==13) {//이벤트가 발생된 키보드가 [Enter]인 경우
if($("#id").val()=="") {
alert("아이디를 입력해 주세요.");
$("#id").focus();
return;
}
if($("#passwd").val()=="") {
alert("비밀번호를 입력해 주세요.");
$("#passwd").focus();
return;
}
$("#loginForm").submit();
}
});
//👑keyup : 태그에서 키보드를 뛴 경우 발생되는 이벤트 - KeyCode 제공
$("#content").keyup(function() {
//입력태그에 입력된 문자 갯수를 제공받아 변수에 저장
var count=$(this).val().length;
$("#count").text(count);
});
</script>
</body>
</html>
3) 스크롤 이벤트 (무한스크롤 만들기)
19_scroll_event.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h1>Scroll Event</h1>
<hr>
<div id="displayDiv"></div>
<script type="text/javascript">
function displayImage() {
for(i=0;i<=9;i++) {
$("#displayDiv").append("<div><img src='images/"+i+".png' width='100'></div>");
}
}
displayImage();
//👑$(selector).scroll(callback) : 선택자로 검색된 태그(window 객체)에서 스크롤을 움직이는
//이벤트가 발생된 경우 콜백함수를 호출하는 메소드
$(window).scroll(function() {
//alert("스크롤 이벤트 발생");
//👑$(selector).height() : 선택자로 검색된 태그의 높이를 반환하는 메소드
var docH=$(document).height(); //브라우저의 높이 = 937
//alert(docH);
//alert($(window).height()); //도큐먼트의 높이 = 1359
//=> 스크롤이 만들어졌기 때문에 브라우저보다 훨씬 높음
//alert("브라우저의 스크롤 상단 위치값 = "+$(window).scrollTop()); //브라우저의 스크롤 상단 위치값 = 100
//👑$(selector).scrollTop() : 선택자로 검색된 태그의 스크롤 상단 위치값을 반환하는 메소드
var scrollH=$(window).height()+$(window).scrollTop();
//스크롤이 출력영역(document 객체) 하단에 위치한 경우
if(scrollH >= docH) {displayImage();}
});
</script>
</body>
</html>4) 폼 이벤트
💌20_form_event.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style type="text/css">
fieldset {width: 800px;margin: 10px auto;}
legend {font-size: 1.2em;}
#joinForm ul li {list-style-type: none;margin: 15px 0;}
#joinForm label {width: 100px;text-align: right;float: left;margin-right: 10px; }
#btnFs {text-align: center;}
.error {color: red;margin-left: 10px;}
</style>
</head>
<body>
<h1>Form Event</h1>
<hr>
<form id="joinForm">
<fieldset>
<legend>회원가입정보</legend>
<ul>
<li><label for="id">아이디</label><input type="text" name="id" id="id"><span id="idMsg" class="error"></span></li>
<li><label for="passwd">비밀번호</label><input type="password" name="passwd" id="passwd"><span id="passwdMsg" class="error"></span></li>
<li><label for="name">이름</label><input type="text" name="name" id="name"><span id="nameMsg" class="error"></span></li>
<li><label for="email">이메일</label><input type="text" name="email" id="email"><span id="emailMsg" class="error"></span></li>
</ul>
</fieldset>
<fieldset id="btnFs">
<button type="button" id="submitBtn">회원가입</button>
<button type="button" id="resetBtn">다시입력</button>
</fieldset>
</form>
<script type="text/javascript">
$("#id").focus();
/*
//[회원가입]을 클릭한 경우 호출될 이벤트 처리 함수 등록
// => 사용자 입력값을 검증하고 모든 입력값에 대한 검증이 성공한 경우 제출 이벤트
//(Submit Event) 발생 - form 태그 실행
$("#submitBtn").click(function() {
$(".error").text("");//모든 입력태그의 에러 메세지에 대한 초기화 처리
if($("#id").val()=="") { $("#idMsg").text("아이디를 입력해 주세요."); $("#id").focus(); return; }
if($("#passwd").val()=="") { $("#passwdMsg").text("비밀번호를 입력해 주세요."); $("#passwd").focus(); return; }
if($("#name").val()=="") { $("#nameMsg").text("이름을 입력해 주세요."); $("#name").focus(); return; }
if($("#email").val()=="") { $("#emailMsg").text("이메일을 입력해 주세요."); $("#email").focus(); return; }
$("#joinForm").attr("action", "20_form_event.html");
$("#joinForm").attr("method", "post");
//👑$(selector).submit() : 선택자로 검색된 태그(form)로 제출 이벤트를 발생하는 메소드
$("#joinForm").submit();
});
*/
$("#submitBtn").click(function() {
$(".error").text("");
//검증 관련 상태를 저장하기 위한 변수 - false : 검증 실패, true : 검증 성공
var result=true;
if($("#id").val()=="") {$("#idMsg").text("아이디를 입력해 주세요.");result=false;}
if($("#passwd").val()=="") {$("#passwdMsg").text("비밀번호를 입력해 주세요.");result=false;}
if($("#name").val()=="") {$("#nameMsg").text("이름을 입력해 주세요.");result=false;}
if($("#email").val()=="") {$("#emailMsg").text("이메일을 입력해 주세요.");result=false;}
if(!result) return;//검증이 실패한 경우 이벤트 처리 함수 종료
$("#joinForm").attr("action", "20_form_event.html");
$("#joinForm").attr("method", "post");
$("#joinForm").submit();
});
//👑$(selector).blur(callback) : 선택자로 검색된 태그(입력태그)에서 입력촛점이 다른 태그로
//이동된 경우 콜백함수를 호출하는 메소드 - focusout 메소드와 동일
$("#id").blur(function() {
if($("#id").val()=="") {
$("#idMsg").text("아이디를 입력해 주세요.");
return;
}
$("#idMsg").text("");
});
//[다시입력]을 클릭한 경우 호출될 이벤트 처리 함수 등록
// => 모든 입력태그의 입력값 및 에러 메세지에 대한 초기화 처리
$("#resetBtn").click(function() {
//👑$(selector).val(value) : 선택자로 검색된 태그(입력태그)의 입력값을 변경하는 메소드
//$("#id").val("");//입력태그 초기화 처리
//👑$(selector).reset() : 선택자로 검색된 태그(form 태그)의 모든 입력태그를 초기화 처리하는 메소드
$("#joinForm")[0].reset();
$(".error").text("");
$("#id").focus();
});
</script>
</body>
</html>
5) submit 이벤트 & reset 이벤트 사용해 동일 기능 재구현
💌21_submit_event.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style type="text/css">
fieldset { width: 800px; margin: 10px auto;}
legend { font-size: 1.2em;}
#joinForm ul li { list-style-type: none; margin: 15px 0;}
#joinForm label { width: 100px; text-align: right; float: left; margin-right: 10px;}
#btnFs { text-align: center;}
.error { color: red; margin-left: 10px;}
</style>
</head>
<body>
<h1>Form Event</h1>
<hr>
<form action="21_submit_event.html" method="post" id="joinForm">
<fieldset>
<legend>회원가입정보</legend>
<ul>
<li><label for="id">아이디</label><input type="text" name="id" id="id"><span id="idMsg" class="error"></span></li>
<li><label for="passwd">비밀번호</label><input type="password" name="passwd" id="passwd"><span id="passwdMsg" class="error"></span></li>
<li><label for="name">이름</label><input type="text" name="name" id="name"><span id="nameMsg" class="error"></span></li>
<li><label for="email">이메일</label><input type="text" name="email" id="email"><span id="emailMsg" class="error"></span></li>
</ul>
</fieldset>
<fieldset id="btnFs">
<button type="submit" id="submitBtn">회원가입</button>
<button type="reset" id="resetBtn">다시입력</button>
</fieldset>
</form>
<script type="text/javascript">
$("#id").focus();
//👑$(selector).submit(callback) : 선택자로 검색된 태그(form 태그)에서 제출 이벤트(Submit
//Event)가 발생된 경우 콜백함수를 호출하는 메소드
$("#joinForm").submit(function() {
$(".error").text("");
//검증 관련 상태를 저장하기 위한 변수 - false : 검증 실패, true : 검증 성공
var result=true;
if($("#id").val()=="") {
$("#idMsg").text("아이디를 입력해 주세요.");
result=false;
}
if($("#passwd").val()=="") {
$("#passwdMsg").text("비밀번호를 입력해 주세요.");
result=false;
}
if($("#name").val()=="") {
$("#nameMsg").text("이름을 입력해 주세요.");
result=false;
}
if($("#email").val()=="") {
$("#emailMsg").text("이메일을 입력해 주세요.");
result=false;
}
//result 변수에 [false]가 저장된 경우 태그의 기본 이벤트를 제거되고 이벤트 전달 중지
// => form 태그의 제출 이벤트가 취소되어 form 태그 미실행
return result;
});
$("#resetBtn").click(function() {
$(".error").text("");
$("#id").focus();
});
</script>
</body>
</html>
6) form 태그의 required 속성값 사용해 동일 기능 재구현
💌22_input_required.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style type="text/css">
fieldset { width: 800px; margin: 10px auto;}
legend { font-size: 1.2em;}
#joinForm ul li { list-style-type: none; margin: 15px 0;}
#joinForm label { width: 100px; text-align: right; float: left; margin-right: 10px;}
#btnFs { text-align: center;}
.error { color: red; margin-left: 10px;}
</style>
</head>
<body>
<h1>Form Event</h1>
<hr>
<form action="22_input_required.html" method="post" id="joinForm">
<fieldset>
<legend>회원가입정보</legend>
<ul>
<li>
<label for="id">아이디</label>
<!-- 입력태그에 required 속성을 설정하면 입력값이 없는 경우 form 태그 미실행 -->
<!-- <input type="text" name="id" id="id" required="required"> -->
<input type="text" name="id" id="id" class="required">
<span id="idMsg" class="error"></span>
</li>
<li><label for="passwd">비밀번호</label><input type="password" name="passwd" id="passwd" class="required"><span id="passwdMsg" class="error"></span></li>
<li><label for="name">이름</label><input type="text" name="name" id="name" class="required"><span id="nameMsg" class="error"></span></li>
<li><label for="email">이메일</label><input type="text" name="email" id="email" class="required"><span id="emailMsg" class="error"></span></li>
</ul>
</fieldset>
<fieldset id="btnFs">
<button type="submit" id="submitBtn">회원가입</button>
<button type="reset" id="resetBtn">다시입력</button>
</fieldset>
</form>
<script type="text/javascript">
$("#id").focus();
$("#joinForm").submit(function() {
$(".error").text("");
var result=true;
//에러 메시지가 요소값으로 저장된 Object 객체 생성
var message={"id":"아이디를 입력해 주세요.","passwd":"비밀번호를 입력해 주세요."
,"name":"이름을 입력해 주세요.","email":"이메일을 입력해 주세요."};
//태그의 class 속성값이 [required]로 설정된 태그(입력태그)를 검색하여 명시적 반복
$(this).find(".required").each(function() {
if($(this).val()=="") {//입력태그의 입력값이 없는 경우
//입력태그의 id 속성값을 반환받아 변수에 저장
var value=$(this).attr("id");
//에러 메세지가 출력될 태그를 검색하여 에러 메세지로 태그내용 변경
$("#"+value+"Msg").text(message[value]);
result=false;
}
});
return result;
});
</script>
</body>
</html>7) form 태그의 checkbox(단일선택)
💌23_checkbox_event.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style type="text/css">
#terms { width: 400px; margin: 0 auto; padding: 5px 10px; border: 1px solid black;}
h3 { text-align: center;}
#agree { width: 400px; margin: 0 auto; text-align: center;}
#agree div { margin: 10px;}
</style>
</head>
<body>
<h1>Checkbox Event</h1>
<hr>
<div id="terms">
<h3>약관</h3>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
<p>무슨 내용인지 이해할 수 없는 어려운 내용입니다.</p>
</div>
<div id="agree">
<form action="22_input_required.html" method="post" id="termsForm">
<div><input type="checkbox" name="agreeCheck" id="agreeCheck" value="0">약관에 동의해 주세요.</div>
<button type="submit">확인</button>
<div id="message" style="color: red;"></div>
</form>
</div>
<script type="text/javascript">
//약관에 대한 동의 여부를 확인하기 위한 값을 저장하기 위한 변수
// => 0 : 약관 미동의, 1 : 약관 동의
var check=0;
//👑$(selector).change(callback) : 선택자로 검색된 태그(입력태그)의 입력값이 변경된 경우
//콜백함수를 호출하는 메소드
$("#agreeCheck").change(function() {
//👑$(selector).is(status) : 선택자로 검색된 태그(입력태그)의 상태를 비교하여
//[false] 또는 [true]를 반환하는 메소드
// => input 태그(type 속성값 - checkbox 또는 radio), select 태그(option)에서만 사용
if($(this).is(":checked")) {//이벤트가 발생된 태그(checkbox, radio)가 선택상태(checked)인 경우
check=1;
} else {
check=0;
}
//입력태그의 입력값 변경
$(this).val(check);
});
$("#termsForm").submit(function() {
if(check==0) {
$("#message").text("약관을 읽고 동의해 주세요.");
return false;//제출 이벤트 취소
}
});
</script>
</body>
</html>
8) form 태그의 checkbox(다중선택)
💌24_all_check.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h1>Checkbox Event</h1>
<hr>
<h3>좋아하는 계절을 선택해 주세요.(다중 선택 가능)</h3>
<hr>
<input type="checkbox" id="allCheck">전체 선택(취소)
<div id="checkboxList">
<input type="checkbox" name="session" value="봄">봄
<input type="checkbox" name="session" value="여름">여름
<input type="checkbox" name="session" value="가을">가을
<input type="checkbox" name="session" value="겨울">겨울
</div>
<button type="button" id="btn">선택완료</button>
<hr>
<div id="displayDiv"></div>
<script type="text/javascript">
$("#btn").click(function() {
//검색태그의 자식태그(checkbox)중 선택된 태그를 반환받아 저장
var $check=$("#checkboxList").children(":checked");
if($check.length==0) {//선택된 태그가 없는 경우
$("#displayDiv").text("당신이 좋아하는 계절은 없습니다.");
return;
}
var output="당신은 [";//처리결과를 저장하기 위한 변수
$check.each(function(i) {//선택된 태그의 갯수만큼 콜백함수 반복 호출 - 명시적 반복
output+=$(this).val();//처리중인 태그의 입력값을 반환받아 변수에 추가하여 저장
if($check.length-1!=i) {//처리중인 태그가 마지막 태그가 아닌 경우
output+=",";//입력값을 구분하기 위한 구분자를 변수에 추가하여 저장
}
});
output+="]을 좋아합니다.";
$("#displayDiv").text(output);
});
$("#allCheck").change(function() {
if($(this).is(":checked")) {//전체 선택인 경우
//👑$(selector).prop(name, value) : 선택자로 검색된 태그(입력태그)의 상태를 변경하는 메소드
// => input 태그(type 속성값 - checkbox 또는 radio), select 태그(option)에서만 사용
$("#checkboxList").children().prop("checked", true);
} else {//전체 취소인 경우
$("#checkboxList").children().prop("checked", false);
}
});
</script>
</body>
</html>
3. 애니메이션 기능
1) 애니메이션 기능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h1>Effect - Hide And Show</h1>
<hr>
<button type="button" id="btn1">Hide And Show</button>
<button type="button" id="btn2">SlideUp And SlideDown</button>
<button type="button" id="btn3">FadeOut And FadeIn</button>
<hr>
<div id="displayDiv">
<img alt="코알라" src="images/Koala.jpg" width="400">
</div>
<script type="text/javascript">
/*
$("#btn1").click(function() {
if($("#displayDiv").css("display")=="none") {//태그가 배치되지 않은 경우
$("#displayDiv").css("display","block");//태그를 블럭레벨로 배치되도록 변경
} else {//태그가 배치된 경우
$("#displayDiv").css("display","none");//태그를 배치되지 않도록 변경
}
});
*/
$("#btn1").click(function() {
/*
if($("#displayDiv").css("display")=="none") {
//👑$(selector).show([duration]) : 선택자로 검색된 태그를 배치되도록 설정하는 메소드
// => 매개변수에 지속시간(ms)을 전달하여 설정된 시간동안 변화되는 효과 제공
//$("#displayDiv").show();
$("#displayDiv").show(1000);
} else {
//👑$(selector).hide([duration]) : 선택자로 검색된 태그를 배치되지 않도록 설정하는 메소드
//$("#displayDiv").hide();
$("#displayDiv").hide(1000);
}
*/
//👑$(selector).toggle([duration]) : 선택자로 검색된 태그가 배치되지 않은 경우 배치되도록
//설정하고 배치되어 있는 경우 배치되지 않도록 설정하는 메소드
$("#displayDiv").toggle(1000);
});
$("#btn2").click(function() {
/*
if($("#displayDiv").css("display")=="none") {
//👑$(selector).slideDown([duration]) : 선택자로 검색된 태그를 배치되도록 설정하는 메소드
$("#displayDiv").slideDown(1000);
} else {
//👑$(selector).slideUp([duration]) : 선택자로 검색된 태그를 배치되지 않도록 설정하는 메소드
$("#displayDiv").slideUp(1000);
}
*/
//👑$(selector).slideToggle([duration]) : 선택자로 검색된 태그가 배치되지 않은 경우 배치되도록
//설정하고 배치되어 있는 경우 배치되지 않도록 설정하는 메소드
$("#displayDiv").slideToggle(1000);
});
$("#btn3").click(function() {
/*
if($("#displayDiv").css("display")=="none") {
//👑$(selector).fadeIn([duration]) : 선택자로 검색된 태그를 배치되도록 설정하는 메소드
$("#displayDiv").fadeIn(1000);
} else {
//👑$(selector).fadeOut([duration]) : 선택자로 검색된 태그를 배치되지 않도록 설정하는 메소드
$("#displayDiv").fadeOut(1000);
}
*/
//👑$(selector).fadeToggle([duration]) : 선택자로 검색된 태그가 배치되지 않은 경우 배치되도록
//설정하고 배치되어 있는 경우 배치되지 않도록 설정하는 메소드
$("#displayDiv").fadeToggle(1000);
});
</script>
</body>
</html>
2) Animate
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<style type="text/css">
#box { width: 150px; height: 150px; background: orange; margin-bottom: 20px; position: relative; top: 0; left: 0;}
</style>
</head>
<body>
<h1>Effect - Animate</h1>
<hr>
<select id="easing">
<option>linear</option>
<option>easeInCubic</option>
<option>easeOutCubic</option>
<option>easeInBack</option>
<option>easeOutBack</option>
<option>easeInElastic</option>
<option>easeOutElastic</option>
</select>
<hr>
<div id="box"></div>
<button type="button" id="left">◀</button>
<button type="button" id="right">▶</button>
<script type="text/javascript">
//선택자로 검색된 태그를 비활성화 처리
$("#left").attr("disabled", "disabled");
$("#left").click(function() {
//select 태그의 자식태그(option 태그) 중 선택된 태그의 태그내용을 반환받아 변수에 저장
var easing=$("#easing").children(":selected").text();
$("#left").attr("disabled", "disabled");
//👑$(selector).removeAttr(name) : 선택자로 검색된 태그의 태그속성을 제거하는 메소드
$("#right").removeAttr("disabled");
//👑$(selector).animate(properties, duration[, easing][, callback]) : 선택자로 검색된
//태그에 애니메이션 효과를 제공하는 메소드
// => properties : 태그의 CSS 스타일 속성과 속성값을 Object 객체의 요소로 표현하여 전달
// => duration : 애니메이션 효과의 적용시간(ms) 전달
// => easing : 애니메이션 효과의 적용속도 전달 - https://easings.net 사이트 참조 >> jquery-ui 라이브러리 필요
// => callback : 애니메이션 효과 적용 후 실행될 명령이 작성된 함수 전달
//👑$(selector).stop() : 선택자로 검색된 태그에 적용된 애니메이션 효과를 중지하는 메소드
$("#box").stop().animate({"left":0}, 3000, easing);
});
$("#right").click(function() {
var easing=$("#easing").children(":selected").text();
$("#right").attr("disabled", "disabled");
$("#left").removeAttr("disabled");
//👑$(selector).width() : 선택자로 검색된 태그의 폭을 반환하는 메소드
$("#box").stop().animate({"left":$(window).width()-170}, 3000, easing);
});
</script>
</body>
</html>
3) 예시
반응형
'web > javascript' 카테고리의 다른 글
| [js - ajax] 15. ajax엔진 1개 vs 다수 | 응답 데이터 XML vs JSON vs XML&JSON (0) | 2024.05.21 |
|---|---|
| [js - ajax] 14. Asynchronus + Javascript (0) | 2024.05.20 |
| [js - jquery] 12. jquery 개념 | 선택자 | each() | css() | attr() | text() | html() | 태그 추가,삭제,이동 (0) | 2024.05.19 |
| [js] 11. 자바스크립트 쿠키(Cookie) 사용법 (0) | 2024.05.19 |
| [js] 10. 자바스크립트 예외처리(Exception Handle) (0) | 2024.05.18 |
