본문 바로가기

분류 전체보기

(153)
[제이쿼리]- 애니메이션, 효과의 제어 메서드 애니메이션 효과 제어 메서드는효과 또는 애니메이션이 적용된 요소의 동작을 제어하는 메서드이다. 이 메서드를 사용하려면 queue의 개념을 이해하고 있어야 한다.  애니메이션 적용 원리와 큐의 개념: 애니메이션 메서드는 함수가 적용된 순서대로 큐(queue)라는 저장소(memory)에 저장된다. 큐는 줄을 서서 대기하는 공간과 비슷하다. 큐에 저장된 애니메이션이나 효과는 큐에 순서대로 대기를 하고, 순서대로 애니메이션이 실행된다.(애니메이션1이 다 끝나면 애니메이션2가 실행되고 2가 다 끝나면 3이 실행된다)먼저 들어간 데이터가 먼저 처리되는 형식을 FIFO(First In First Out)방식이라고 부른다. 애니메이션 효과 제어 메서드의 종류 - stop( ): 현재 실행중인 효과를 모두 중지시킴 / ..
[제이쿼리]- 애니메이션 메서드 에니메이션 메서드를 사용하면 선택한 요소에 스타일을 적용한 움직임을 만들어 낼 수 있다. 애니메이션을 적용하기 위해서는 .animate()메서드를 사용한다. [기본형]$('요소선택').animate({css스타일 속성 : '값'}, 효과 적용 시간, 가속도, 콜백함수)- ({css스타일 속성 : 값} :  애니메이션으로 적용할 css스타일을 넣는다. 이때 객체로 넣어야 하며 속성 : '값' 으로 구분하여 작성한다 - 효과 적용 시간 : 동작에 반응하는데 소요되는 시간을 뜻한다. 적용시간은 'fast', 'slow','normal'이나 ms단위로 숫자를 넣는다.  - 가속도 : 'swing' 또는 'linear' 를 적용할 수 있다. 'swing' = 시작과 끝은 느리게, 중간은 빠른 속도로 움직인다.  ..
[제이쿼리]- 효과 메서드 effect 효과메서드를 이용하면 css스타일을 이용하는 것보다 훨씬 더 쉽고 역동적으로 동작을 조절하여 객체를 화려하게 숨기거나 보이게 만들 수 있다. 또한 애니메이션 메서드까지 사용하면 다양한 동작(Motion)까지 적용할 수 있다. [ 기본형 ]$('요소선택').효과메서드(효과 소요시간, 가속도, 콜백함수);- *효과 소요시간 : 요소를 숨기거나 노출할 때 소요되는 시간을 말한다. 단위는 ms단위(1000 = 1초)를 사용한다. 또는 문자열로 지정된 키워드인 'slow', 'nomal', 'fast'라고 적으면 지정된 소요시간이 적용된다.  -*가속도 : 숨기거나 노출하는 동안의 가속도를 결정함. 가속도에 적용할 수 있는 값은 'swing' 또는 'linear' 를 적용할 수 있다. 'swing' = 시작과 끝..
[제이쿼리]- 이벤트 제거 메서드 / 기본이벤트와 라이브이벤트 각각 제거 이벤트 제거 메서드를 사용하면 이전에 등록했던 이벤트를 제거할 수 있다. 이때 이벤트를 어떤 종류로 등록했느냐에 따라서 문법과 메서드 이름이 달라진다.  [종류] 1. off( ): on( ) 매서드로 등록한 이벤트를 제거한다. 1. 기본 이벤트 제거 방식$('이벤트를 제거할 대상').off('제거할 이벤트명')2. 라이브 이벤트 제거 방식$(document 또는 '이벤트 대상의 상위요소').off('제거할 이벤트명', '이벤트 대상') 2. unbind( ) : bind( ) 로 등록한 이벤트를 제거한다. 1. 기본 이벤트 제거 방식$('이벤트를 제거할 대상').unbind('제거할 이벤트명') 3. undelegate( ): delegate( )로 등록한 이벤트를 제거한다. 1. 기본 이벤트 제거 방..
[제이쿼리]- 그룹 이벤트 등록 메서드 종류 / 라이브 이벤트 등록 메서드/ 동적으로 생성한 요소에 이벤트 등록하기 - 라이브 이벤트 그룹 이벤트 등록 메서드 종류  그룹 이벤트 등록 메서드는 한 번의 두 개 이상의 이벤트를 등록할 때 사용한다. 그룹 이벤트는 다양한 종류가 있다.  그룹이벤트 기본형에 메서드 이름만 달리 적어주면 된다. 주로 on을 쓰고 이벤트를 찾아볼 때 메서드를 참고해 주면 된다.  1. ★on( ): 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다.사용 방식에 따라 이벤트를 등록한 이후에 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다. [on()메서드 등록 방식 1]$('이벤트 대상').on("이벤트종류1 이벤트종류2 이벤트종류3...", function(){ 코드 });: 여러 개의 이벤트를 한꺼번에 등록한다.* 단, 이벤트가 발생할 때마다 동일한 이벤트 핸들러(함수)가 실행된다. -----------..
[제이쿼리]- 이벤트가 발생한 요소 추적 / this를 이용해서 내가 클릭한 a 애들만 css 적용 / 내가 클릭한 요소가 this 사이트 방문자가 이벤트를 발생시킨 요소의 정보를 구해올 때 this를 이용할 수 있다. 또한 이벤트가 발생한 요소의 index값을 구해오는 방법도 구해올 수 있다.   여기서 this는  = 이벤트가 발생한 요소$(this) 선택자 이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 추적할 수 있다.  $(this) 안에는 이벤트가 발생한 요소, 즉 해당 태그가 반환된다. 내가 클릭한 요소를 선택할 때 this를 사용할 수 있다.  index( )메서드 이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스 값을 반환한다.  [기본형]* 예시는 그룹이벤트이지만 단독 이벤트에서도 사용 가능$('이벤트 대상').on("이벤트명", function(){ $('이벤트 대상').index(th..
[제이쿼리]- 키보드 이벤트 / 엔터 키를 누르면 클릭해서 제출한 것처럼 강제 이벤트를 발생 시키기 키보드 이벤트 키보드 이벤트는 키보드로 무언가를 입력하면 이벤트가 발생한다. 종류로는 keyup, keydown, keypress 이벤트가 있다.  keyup(), keydown(), keypress()-  keyup: 키보드에서 키를 눌렀다 뗐을 때 이벤트가 발생 ( 잘 쓰지 않음 ) - keydown / keypress : 키보드에서 키를 눌렀을 때 이벤트가 발생두 이벤트의 차이점은,* keydown는 모든 키(한/영 키 제외)에 대해 이벤트를 발생시킨다. * keypress는 기능 키(esc, F1~F12, tab, 한/영, 방향키, home 등)을 제외한 글자 키에서만 이벤트를 발생 시킨다.  또한 이벤트 핸들러에서 이벤트 객체의 속성을 이용하면 고유 키의 코드 값을 가져올 수 있다. 이를 사용하..
[제이쿼리]- ★change 이벤트 / 쇼핑몰 사이트에서 선택한 물건에 따라 값을 다르게 표현해줄 때 사용하는 이벤트 change 이벤트  선택한 폼 요소의 값(value)를 새 값으로 바꾼다. 그리고 포커스가 다른 요소로 이동할 때 이벤트가 발생한다. [기본형]-단독$('대상요소').change(function(){ 코드 })-그룹$('대상요소').on('change', function(){ 코드 })-강제$('대상요소').change();선택한 옵션에 대한 벨류 값을 가져오기h2>change()h2>    select name="rel_site" id="rel_site">      option value="">사이트 선택option>      option value="www.google.com">구글option>      option value="www.naver.com">네이버option>      option v..
[제이쿼리]- 포커스 이벤트 / 키보드 접근성 / 이벤트에 함수 따로 빼서 만들고 함수명으로 등록하기 포커스 이벤트 포커스는 마우스로 a 또는 input 태그를 클릭하거나 tab키를 누르면 생성된다. 앞에서 배운 마우스 이벤트는 마우스가 없으면 사용할 수 없다. 마우스가 없는 상황에서는 키보드를 이용하여 사이트를 이용해야 하는데 이때 키보드만으로 사이트를 이용했을 때 불편하지 않도록 만들어 주는 것을 '키보드 접근성' 이라고 한다.  키보드 접근성을 높이려면마우스 이벤트를 등록할 때 키보드 이벤트도 함께 등록해 주어야 한다. 마우스 이벤트에 대응할 수 있는 포커스 이벤트 ★focus( ) / ★ blur( ) / focusin( ) / focusout( )- focus : 대상 요소로 포커스가 이동하면 이벤트가 발생 - blur: 대상 요소에서 다른 요소로 포커스가 이동하거나 포커스를 잃으면 이벤트가 발..
[제이쿼리]- 마우스 휠 이벤트 / 업버튼 만들기 마우스 휠 이벤트 마우스 휠 이벤트의 주 이벤트는 scroll 이벤트이다. 마우스 휠을 움직일때마다 이벤트가 발생한다. 이때 이벤트 객체 안에 있는 deltaY 프로퍼티를 함께 사용한다.  deltaY프로퍼티는 마우스 휠을 한번 위로 올리거나 아래로 내렸을 때 세로 스크롤이 움직인 픽셀 값을 반환한다. deltaX프로퍼티는 마우스 휠을 한번 위로 올리거나 아래로 내렸을 때  가로  스크롤이 움직인 픽셀 값을 반환한다. deltaZ프로퍼티는 마우스 휠을 한번 위로 올리거나 아래로 내렸을 때  z축이 움직인 픽셀 값을 반환한다.   [기본형]-단독 이벤트$('이벤트대상').wheel(function(){ 코드});-그룹 이벤트$('이벤트대상').on("wheel", function( ){ 코드 })-강제 이..