(jQuery) 제이쿼리 시작하기 / 제이쿼리란?

제리쿼리란?

jquery.com 에서 compressed 버전 download

$(document).ready(function() {

});

  는  $().ready(function(){}); 와 같다.

 

.append(<element>) : 하위요소의 가장 마지막에 element를 추가 

.prepend(<element>) : 하위요소의 가장 처음에 element를 추가

.after(<element>) : 요소의 다음에 element를 추가

.before(<element>) : 요소의 이전에 element를 추가

 

이벤트가 발생한 콜백 함수에서 this 는 이벤트가 binding 된 객체

.parent() : 바로 위의 부모 선택

.parents("선택자") : 선택자에 맞는 조상 선택

.closest("선택자") : 선택자에 맞는 조상 중 가장 가까운 조상 선택

 

.children("선택자") : 선택자에 맞는 자식 선택

.find("선택자") : 선택자에 맞는 자손 선택

 

.on("이벤트명","선택자", "함수") : 현재 객체 뿐만 아니라 아직 생성되지 않은, 이후에 생길 객체에 대해서도 이벤트를 바인딩

1. dom : jquery ready 때 만들어진 객체 - $(dom).click();

2. shadow dom : jquery ready 이후에 만들어진 객체 - $(dom).on("click", shadowdom, function(){});

 

마우스 이벤트

click : element 안에서 마우스를 눌렀다 땠을 때

mousedown : element 안에서 마우스를 눌렀을 때

mouseup : element 안에서 마우스를 땠을 때

* 그림그리기, drag and drop 에서 mousedown 과 mouseup, mousemove 사용

 

.stop() : 현재 에니메이션을 멈춤

.show() : 바로 보여주기

.slideDown(), .slideUp() : 늘어지면서 보여주기, 감추기 

.fadeIn(), .fadeOut() : 뿌옇게 되면서 보여주기, 감추기

 

키보드 이벤트

keydown, keypress : 키를 눌렀을 때 이벤트 발생

keyup : 키를 뗐을 때 이벤트 발생

 

키보드 이벤트 콜백에서 이벤트 객체를 가져와 키코드를 알 수 있다.

ex)

$("#searchKeyword").keyup(function(e) {

  if (e.keyCode == 13) {

    movePage(0);

  }

});