<%@ 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>
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){//페이지 로딩 시점에 이벤트 걸기
$("#chk").bind("change",function(){
//this : event가 발생한 dom 노드 객체
if(this.checked){
alert("메일을 보내겠습니다.");
}else{
alert("메일을 보내지 않겠습니다.");
}
//위에 것과 아래것이 차이가 없지만 위에 것이 퍼포먼스 적으로 더 좋다.
/* $("#chk").change(function(){
if(this.checked){
alert("메일을 보내겠습니다.");
}else{
alert("메일을 보내지 않겠습니다.");
}
}); */
});
//버튼에 이벤트 처리, id로 접근해서 하나의 버튼에 이벤트를 발생
/* $("#btn").bind("click", function() {
alert("btn버튼이 클릭되었습니다.."+this.value);
});
//class로 접근해서 여러개의 button에 이벤트를 발생
$(".mybtn").bind("click", function() {
alert("mybtn버튼이 클릭되었습니다.."+this.value);
}); */
//one은 특정한 버튼 이벤트 한번만 발생
/* $(".mybtn").one("click", function() {
alert("mybtn버튼이 클릭되었습니다.."+this.value);
});
$("p a").bind("mouseover", function() {
$(this).css("background","pink").css("color","red");
});
$("p a").bind("mouseout", function() {
$(this).css("background","white").css("color","blue");
}); */
//hover함수를 이용해서 마우스가 올라갔을때와 내려갔을때의 이벤트를 처리해 줄수 있다.
$("a").hover(function() {
$(this).css("background","pink").css("color","red");
},function() {
$(this).css("background","white").css("color","blue");
});//1 : mouseover, mouseout
//마우스를 li글목록에 올리면 아래 선긋기, 내려가면 없애기
$("ul li").hover(function(){
$(this).css("text-decoration","underline");
},function(){
$(this).css("text-decoration","none");
});
});
</script>
</head>
<body>
메일 수신여부 : <input type="checkbox" name="mailing" value="true" id="chk"><br>
<input type="button" value="click1" id="btn" class="mybtn">
<input type="button" value="click2" id="btn" class="mybtn">
<input type="button" value="click3" id="btn" class="mybtn">
<p>
<a href="http://www.google.com">구글</a>
<a href="http://www.daum.net">다음</a>
</p>
<ul>
<li>우유</li>
<li>빵</li>
<li>두유</li>
<li>쿠키</li>
<li>탄산음료</li>
</ul>
<!--
<div id="naver"></div>
<input type="button" value="링크로딩" id="btn2">
-->
</body>
</html>
