JQuery Study 3 - 2011.05.09.

.mousedown()
마우스 버튼 다운시에 발생하는 이벤트.
event.button 으로  왼쪽(0)인지 오른쪽(2)인지 알 수 있다.

$(document).bind("contextmenu",function() { return false;})
원래 부라우저가 가지는 contextmenu를 없애준다.
물론 함수 안에 contextmenu대신 작동시킬 동작을 구현할 수도 있다.

.click(function(e){})
인자로 넘겨받는 e를 통해서 마우스의 정보를 알 수 있다.
x = e.clientX;
y = e.clientY;

var date = new Date();
Date객체를 통해 년,월,일,시를 구할 수 있다. 
.getFullYear() - 1999 형태의 년 리턴
.getMonth() - 0부터 시작하는 월 리턴
.getDate() - 일자
.getHours(), .getMinutes(), .getSeconds() - 시, 분, 초
월,일,시,분,초는 리턴값이 10 이하인 경우 자릿수를 채우지 않은 값만 리턴한다. 따라서 '06월' 형태의 출력을 원하면 처리 함수가 필요하다. 

$("<div><img><span></div>").find("img")
특정요소안에서 요소 찾기

$(document).scrollTop()
화면이 스크롤된 상태인 경우 스크롤된 창의 Top 값을 리턴해준다.

.data("index",index)
해당요소에 데이터를 넣는 메서드 

.slideDown(speed,effect_name,callback_func)
슬라이드를 내리는 효과. 효과명에 따라 내려오는 동작에 변화가 있음.
콜백 함수에 효과가 끝났을때 수행할 동작을 구현할 수 있다.
ex) $("div").slideDown(500,"easeInElastic",function(){alert("effect done!");})

.animate(바뀔 CSS,speed,effect_name,callback_func)
현재의 css에서 지정한 css로 변하는데 지정한 속도와 지정한 가속도(effect_name)으로 애니매이션이 구현된다. 슬라이드 효과와 같이 콜백함수를 통한 애니매이션 종료시의 동작 구현 가능 

ex) $("div").animate({"left":700},1000,"easeOutBounce",function(){})

e.preventDefault();
a 요소에 클릭이벤트를 걸어서 원하는 동작구현을 하는 경우처럼 요소의 브라우저 기본 이벤트를 막을 필요가 있을때 사용.

cf) easing 효과 링크

jquery.easing.compatibility.js

jquery.easing.1.3.js

 
http://gsgd.co.uk/sandbox/jquery/easing

Canvas

 canvas 요소는 말 그대로 그림을 그릴수 있는 캔버스를 의미한다.
비트맵 방식(백터방식 SVG) 캔버스는 그림을 그리는 방식이 모두 js를 통해서 진행된다.

소스 코드 내에 <canvas></canvas>를 위치시키고 jQuery에서 그림을 그린다.

먼저 요소를 DOM 방식을 통해 얻어온 다음 요소에서 그림을 그릴 context를 얻는다.
var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

색깔

ctx.fillStyle="#00bfff";

색깔이 들어간 사각형

ctx.fillRect(20,20,100,100);

라인의 색상

ctx.strokeStyle="red";

ctx.lineWidth="10";

라인만 있는 사각형

ctx.strokeRect(70,70,150,100);

path움직이기

ctx.moveTo(300,100);

라인 긋기

ctx.lineTo(100,300);

실제로 라인을 그리기

ctx.stroke();

하나의 컨텍스트에서 계속 그림을 그리기 때문에 끊어주고 다시 시작하는것이 중요
ctx.closePath();

ctx.beginPath();
 

CSS 메모 

-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-ms-transform:rotate(10deg);
요소 회전시키기. (브라우저별로 모두 넣어줘야 한다)