event1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('label').css({"color":"#ff00ff", "background":"#ffffcc"});
$('h1').css({"color":"red", "text-decoration":"underline"});
// 자료 넣기
$("#message").wrap("<h2> 요소 안에 자료 넣기</h2>");
// 이벤트
// 포커스가 가면 클레스를 추가한다.
$("input").focus(function(e) {
$(this).addClass("focused");
})
// 포커스를 제외하면 제거하는 것이다.
$("input").blur(function(e) {
$(this).removeClass("focused");
});
$("#frm").submit(function(e) {
e.preventDefault(); // 이벤트를 무효화시킨다.
var new_ele = $("<li>" + $("#data").val() + "</li>");
$("#disp").append(new_ele);
});
$("a").click(function(e) {
e.preventDefault(); // 이벤트를 무효화시킨다.
alert("이동 권한이 없습니다.. 다른 용도로 사용하세요.");
});
});
</script>
<style type="text/css">
.focused {
backgoround:orange;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>jQuery 메소드 실습</h1>
<div id="message"></div>
<form action="a.jsp" id="frm" method="post">
<label for="data">자료입력</label><input type="text" id="data" name="data">
<input type="submit" value="확인">
</form>
<ul id="disp"></ul>
<p/>
<a href="http://www.naver.com">NAVER</a>
</body>
</html>
a.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8;"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String data = request.getParameter("data");
%>
<b>입력한 데이터<%= data %></b>
</body>
</html>
event2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/* function tdClick(obj) {
//alert(obj);
} */
$(document).ready(function() {
$("td").click(function() {
alert($(this).text());
});
// dblclick : 두번 연속 누르는 것
$("div").dblclick(function() {
alert($(this).text());
});
// function(e) : 이벤트 값을 받아올 때 써준다
$("#txtA").keydown(function(e) {
$("#txtCode").val(e.keyCode); // txtCode값에 아스키 코드값을 출력한다.
});
// bind : 확장성이 좋다, 여러 개의 이벤트를 사용할 수 있다.
//$("#btn").click(function() {
$("#btn").bind("click", function() {
alert($(this).text());
});
// mouseenter: 마우스가 진입하였을 때, mouseleave: 마우스가 떠났을 때
var count = 0;
var countEnter = 0, countLeave = 0;
// 방법 1
/* $("#mouseArea").bind("mouseenter mouseleave", function(e) {
count++;
$("#mResult").text(count + " enter or leave");
if (e.type == "mouseenter") {
countEnter++;
$("#mResult2").text(countEnter+" MouseEnter");
} else if (e.type == "mouseleave") {
countLeave++;
$("#mResult2").text(countLeave+" MouseLeave");
}
}); */
// 방법 2
$("#mouseArea").bind({
mouseenter: function() {
countEnter++;
$("#mResult2").text(countEnter+" MouseEnter!!");
},
mouseleave: function() {
countLeave++;
$("#mResult2").text(countLeave+" MouseLeave!!");
}
});
$("#btnAdd").click(function() {
$('ul').append('<li>요소 추가('+ $('li').length +')</li>');
});
// 동적으로 이벤트 추가
$('li').live('click', function() {
alert($(this).text());
});
$('#btnDie').click(eventDiefunc);
});
function eventDiefunc() {
// li에 적용된 모든 이벤트 해제
//$('li').die();
// 여러가지 이벤트가 있을 때, 특정 이벤트만 해제하는 경우
$('li').die('click');
}
</script>
</head>
<body>
** 이벤트 이해 **<br/>
<p>클릭 이벤트 연습</p>
<table>
<tr>
<td onclick="tdClick('k');">kbs</td>
<td>mbc</td>
<td>sbs</td>
</tr>
</table>
<br/>
<div>더블 클릭 대상</div>
<p>키보드 이벤트 연습</p>
<div>
문자 입력 : <input type="text" id="txtA">
<input type="text" id="txtCode">
</div>
<p>바인드 이벤트 연습</p>
<button id="btn">버튼 클릭</button>
<p/>
<div id="mouseArea">
마우스 올리고 내리기 : <span id="mResult"></span>
</div>
<div id="mResult2"></div>
<p>라이브 이벤트 연습</p>
<div>
<ul>
<li>list item 0</li>
</ul>
<input type="button" id="btnAdd" value="요소 추가하기">
<input type="button" id="btnDie" value="bind 이벤트 해제">
</div>
<div id="liveDisp"></div>
</body>
</html>
event3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="event3_style.css" type="text/css">
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="event3_script.js"></script>
</head>
<body>
<div id="container">
<div id="switcher">
<h3>이벤트 처리</h3>
<div class="button selected" id="switcher-default">보통</div>
<div class="button" id="switcher-narrow">좁게</div>
<div class="button" id="switcher-large">크게</div>
</div>
<div id="header">
<h2>연봉협상</h2>
<h2 class="subtitle">21억 로또 당첨자 후기</h2>
<div class="author">해럴드 경제</div>
</div>
<div class="chapter" id="chapter-preface">
<h3 class="chapter-title">서문 </h3>
<p>[헤럴드생생뉴스]21억원의 당첨금을 받은 로또 1등 당첨자가 올린 후기가 네티즌들 사이에서 화제가 되고 있다.</p>
</div>
<div class="chapter" id="chapter-1">
<h3 class="chapter-title"></h3>
<p>
지난 16일 한 로또정보업체 사이트(www.lottorich.co.kr)에 ‘511회 1등 됐어요. 하나님 감사합니다!’라는 제목으로 올라 온 이 글은 19일 오전 현재 4만명이 넘는 사람들이 열람했으며, 댓글은 600여건을 돌파했는 관심을 끌고 있다.
행운의 주인공은 서울에 살고 있는 40대 A씨로 511호 추첨에서 21억6500만원의 당첨금을 받았고, 관련 사이트에 자신의 로또복권 사진과 부인이 당첨 당시 상황을 전달하고 있다.
“남편과 함께 마트에서 장을 보고 있었는데, 남편이 전화를 받으러 저쪽으로 가더니 통화를 하다 갑자기 저를 막 부르는 거예요. ‘왜 저러지? 나쁜 일이라도 생겼나?’하고 가보니 조용히 하는 말이 OO리치 전화라고… 우리가 로또 1등에 당첨됐다고 하더라고요. 순간 머릿속도 먹먹해지고 심장이 뛰다가 멎는 줄 알았습니다.”
</p>
<p>
집안 형편이 넉넉지 않은 상황에서도 한 주는 A씨가 , 다음 주는 아내가, 그 다음 주는 딸이 번갈아 가며 꾸준히 로또를 구입했다. 당첨되기 몇 일 전에는 양 씨의 큰 딸이 이벤트에 당첨되어 20억원을 받는 꿈을 꿨는데, 이 후 딸이 구입한 로또가 1등에 당첨되는 신기한 일이 벌어졌다.
양 씨의 아내는 “당첨금을 받으면 가장 먼저 하나님께 감사 헌금을 올리기로 남편과 상의 했고요, 지금 집이 없어서 세 들어 살고 있는데 집부터 마련하고 빚도 갚고 그렇게 하려고 합니다. 희망을 잃지 않고 열심히 살다 보니 죽으란 법은 없나 봅니다. 먼저 1등 당첨 돼서 다른 분들에게 감사하고 미안하기도 해요. 여러분께도 꼭 이런 행운이 찾아가길 기도하겠습니다.”라며 글을 마무리했다.
이 글을 본 네티즌들은 축하와 부러움의 댓글로 화답했다.
아이디가 suk*****는 “정말 축하드립니다. 경제적으로 힘들었던 맘 알 것 같아요. 저도 그래서 눈물이 나네요. 부럽기도 하고요. 가족 분들 항상 건강하시고 행복하세요~”라고 했고, 별이***는 “힘든 고난 속에서도 가족간의 사랑이 이렇게 크나큰 행운을 가져다 준 게 아닌가 합니다. 가족의 사랑이 묻어난 님의 글을 보고 저도 희망을 가져봅니다.”며 진심 어린 축하를 보냈다.
아이디 서*는 “먼저 1등에 당첨돼서 미안하다는 말씀에 눈물이 핑 도네요. 맘이 착한 분들인 거 같아요. 그래서 하늘도 도우셨을 겁니다. 축하 드립니다. 저 또한 어려운 상황에 있는데 이런 행운이 저에게도 오기를 바랄 뿐입니다.”며 로또 당첨에 대한 기대감을 나타냈다.
단하나**는 “역시 끈기 있는 사람이 꿈을 성취함을 느꼈습니다. 안 된다고 몇 번을 빼먹곤 했던 자신을 뒤돌아보며 조용히 은근과 끈기로 기다리겠습니다”고 꾸준한 로또 구매를 다짐했다.
</p>
</div>
</div>
</body>
</html>
event3_css.css
@CHARSET "UTF-8";
html, body {
margin: 1px;
padding: 0px;
}
#container {
font-size: lem; /* em : 몇 배의 수 */
margin: 10px 2em;
}
h1 {
font-size: 2.5em;
margin-bottom: 0px;
}
h2 {
font-size: 1.3em;
margin-bottom: 0.5em;
}
h3 {
font-size: 1.1em;
margin-bottom: 0px;
}
.chapter {
margin: 1em;
}
#switcher {
float: right;
background-color: #ffffcc;
border: 1px solid #0000ff;
margin: 10px;
padding: 10px;
}
#switcher .button {
width: 70px;
float: left;
text-align: center;
margin: 10px;
padding: 10px;
background-color: #ffffff;
border-top: 3px solid #888888;
border-left: 3px solid #888888;
border-bottom: 3px solid #4444;
border-right: 3px solid #4444;
}
#header {
clear: both;
}
body.large .chapter {
font-size: 1.5em;
}
body.narrow .chapter {
width: 400%;
}
.selected {
font-weight: bold;
}
.hidden {
display: none;
}
#switcher .hover {
cursor: pointer;
background-color: #ffccff;
}
event3_script.js
$(document).ready(function() {
/* '크게' 버튼을 클릭하면 배경색 변환 */
$('#switcher-large').bind('click', function() {
$('body').addClass('large');
$('body').css('background', '#ccffff');
});
/* '크게' 버튼에 마우스를 가져가면 배경색이 #ffffcc으로 변환하였다가
* 마우스가 버튼 밖으로 나오면 배경색이 #ffffff으로 변환된다. */
$('#switcher-large').bind('mouseover', function() {
$('body').css('background', '#ffffcc');
});
$('#switcher-large').bind('mouseout', function() {
$('body').css('background', '#ffffff');
});
/* '보통' 클릭 시 - '좁게', '크게'에 해당하는 부분을 제거한다.
* '좁게' 클릭 시 - '좁게'를 삽입하고, '크게'에 해당하는 부분을 제거한다.
* '크게' 클릭 시 - '크게'를 삽입하고, '좁게'에 해당하는 부분을 제거한다. */
/* 방법 1 */
/* $('#switcher-default').bind('click', function() {
$('body').removeClass('narrow');
$('body').removeClass('large');
});
$('#switcher-narrow').bind('click', function() {
$('body').addClass('narrow');
$('body').removeClass('large');
});
$('#switcher-large').bind('click', function() {
$('body').addClass('large');
$('body').removeClass('narrow');
});*/
/* 방법 2 */
/* $('#switcher-default').bind('click', function() {
// $('body').removeClass('narrow');
// $('body').removeClass('large');
// 해당 속성 연이어 주기 : 위 표현식과 같은 표현식
$('body').removeClass('narrow').removeClass('large');
$('#switcher .button').removeClass('selected');
버튼 클릭 시, 해당 버튼에 selected 속성 적용
$(this).addClass('selected');
});
$('#switcher-narrow').bind('click', function() {
// $('body').addClass('narrow');
// $('body').removeClass('large');
// 해당 속성 연이어 주기 : 위 표현식과 같은 표현식
$('body').addClass('narrow').removeClass('large');
$('#switcher .button').removeClass('selected');
버튼 클릭 시, 해당 버튼에 selected 속성 적용
$(this).addClass('selected');
});
$('#switcher-large').bind('click', function() {
// $('body').addClass('large');
// $('body').removeClass('narrow');
// 해당 속성 연이어 주기 : 위 표현식과 같은 표현식
$('body').addClass('large').removeClass('narrow');
$('#switcher .button').removeClass('selected');
버튼 클릭 시, 해당 버튼에 selected 속성 적용
$(this).addClass('selected');
});*/
/* 방법 3 - 간소화 시킨 이벤트 */
$('#switcher .button').click(function() {
$('body').removeClass();
if (this.id == 'switcher-narrow') {
$('body').addClass('narrow');
} else if (this.id == 'switcher-large') {
$('body').addClass('large');
}
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
/* toggle은 두 개의 인자(함수)를 갖는다.
* 두 개의 함수는 교대로 실행된다. */
$('#switcher h3').toggle(function() {
$('#switcher .button').addClass('hidden');
}, function() {
$('#switcher .button').removeClass('hidden');
});
$('#switcher .button').hover(
function() {
// .hover는 두 개의 인자(함수)를 갖는다.
// 두 개의 함수는 교대로 수행된다.
$(this).addClass('hover');
},
function() {
$(this).removeClass('hover');
}
);
$(document).keyup(function(e) {
switch(String.fromCharCode(e.keyCode)) {
case 'd':
case 'D':
$('#switcher-default').click();
break;
case 'n':
case 'N':
$('#switcher-narrow').click();
break;
case 'l':
case 'L':
$('#switcher-large').click();
break;
}
});
});
'Study > HTML5,CSS,JQuery' 카테고리의 다른 글
| [HTML5/CSS3/JQUERY] menu : 메뉴 example (0) | 2019.05.22 |
|---|---|
| [HTML5/CSS3/JQUERY] effect : 효과 이벤트 example (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] selector (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] web sql database (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] file 접근 (0) | 2019.05.22 |
