<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
<script src="./jquery-1.7.2.min.js">
</script>
<script>
$(document).ready(function(){
/*$('li').mouseover(function(){
imgUrl=$(this).text();
$('img:first').attr('src', imgUrl);
});*/
$('li').bind('mouseover', function(){
imgUrl=$(this).text();
$('img:first').attr('src', imgUrl);
});
$('img:first').bind({click : function(event){
//$(this).width($(this).width()+5);
$(event.target).width($(this).width()+5);
// this==event.target 같다
$('body').append(
"event.screenX : " + event.screenX
+"event.screenY" + event.screenY
);
} ,
mouseover : function(){
$('body').append('이미지에 마우스 올라감');
} ,
mouseout : function(){
$('body').append('이미지에서 마우스 빠짐');
} ,
mousemove : function(){
position="페이지를 기준으로한 x 좌표"
+event.clientX +"<br />"
+"페이지를 기준으로한 y 좌표"
+event.clientY +"<br />"
+"event.screenX :" +"<br />"
+ event.screenX
+"event.screenY :" +"<br />"
+ event.screenY;
$('div').html(position);
}
});
// 딱한번만 실행되는 1회성 이벤트 리스너
$('button:first').one('click', function(){
alert(' one 메서드 ');
});
$('button:eq(1)').bind('click' , function(event){
alert(' bind 메서드'); $(this).unbind(); // bind 된 것 해제
//$(event.target).unbind();
});
// 번갈아 가면서 function 이 실행됩니다.
$('img:eq(1)').toggle(
function(){ $(this).attr('width',$(this).width()*2)},
function(){ $(this).attr('width',$(this).width()/2)});
//$('img:eq(2)').dblclick();
$('img:eq(2)').bind('dblclick', function(){
$(this).attr('width',$(this).width()*1.1);
});
});
</script>
</head>
<body>
<button> one() : 한번만 작동하는 버튼</button>
<button> unbind() : 한번만 작동하는 버튼 </button>
<ol>
<li>http://thumb.opencast.naver.net/opencast01/n/a/naver_story/20120615/11424123483130.jpg?type=f10060</li>
<li>http://static.naver.net/www/u/2012/0427/nmms_185621873.jpg</li>
<ol>
<div> </div>
<img />
<img src="http://thumb.opencast.naver.net/opencast01/n/a/naver_story/20120615/11424123483130.jpg?type=f10060"/>
<img src="http://thumb.opencast.naver.net/opencast01/n/a/naver_story/20120615/11424123483130.jpg?type=f10060"/>
</body>
</html>
