<%@ page contentType="text/html; charset=UTF-8"%>
<%@page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%String cp = request.getContextPath();%>
<!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>
<style type="text/css">
.aa{
font-size: 1pt; color: red;
background: #ffff00;
}
</style>
<script type="text/javascript" src="<%=cp %>/data/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=cp %>/data/js/my.jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#kk1").click(function(){
alert("클릭 이벤트입니다.");
});
$("#kk2").one("click",function(){ //한번만 클릭 허용
alert("내가 보이나요");
});
$("#kk3").bind("click",function(){ //click이랑 똑같아서 잘 안씀
alert("클릭 이벤트입니다.");
});
/*
//동적으로 추가된 div는 이벤트가 적용되지 않음
$("div").click(function(){
alert("div 태그를 클릭햇더")
});
*/
//동적(이후에 추가된)div 태그도 click이벤트처리 가능(끄고 싶으면 off)
// 동적으로 생성된 태그가 아니면 실행 안됨
$("body").on("click","div",function(){
alert("div태그 클릭")
});
$("body").append("<div>동적으로 추가함</div>");
// 마우스 오버, 아웃 처리
$("div").hover(
function(){$(this).addClass("aa");} //this는 div태그중 마우스 오버,아웃 된 놈
,function(){$(this).removeClass("aa");}
);
// 마우스 오버,아웃 따로 처리
$("div").mouseover(function(){
$(this).css("border","1px solid blue");
});
$("div").mouseout(function(){
$(this).css("border","none");
});
//이벤트를 강제 실행
$("div:eq(1)").trigger("mouseover"); //eq는 순서를 나타냄,0부터시작
$("#kk4").toggle(
function(){$("body").css("background","#ffff00");},
function(){$("body").css("background","#ffffff");}
);
});
</script>
</head>
<body>
<div>눌러</div>
<div>눌러</div>
<input type="button" value="눌러봐!" id="kk1"><br/>
<input type="button" value="눌러봐!" id="kk2"><br/>
<input type="button" value="눌러봐!" id="kk3"><br/>
<input type="button" value="눌러봐!" id="kk4"><br/>
</body>
</html>
'jquery' 카테고리의 다른 글
| 커서 손가락 바꾸기 (0) | 2013.09.09 |
|---|---|
| jquery & ajax 이해하는 간단한 예제 (2) | 2013.08.07 |
| jquery + ajax (0) | 2013.08.07 |
| jquery 기본예제(jquery가 제공하는 dialog와 달력, 탭 tabs) (0) | 2013.08.07 |
| jquery 예제 (0) | 2013.08.07 |