JavaScript/JQuery
jquery 여러가지 method2
Bohemian life
2012. 6. 18. 16:42
<!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>