본문 바로가기

Frontend/jQuery

 (36)
JS jQuery (part. 36) - 애니메이션 정지 clearQueue( ) 메서드에는 애니메이션 정지 기능이 없다 애니메이션을 정지시키려면 stop( ) 메서드를 사용해야한다 애니메이션 정지 메서드 stop( ) : 효과 및 애니메이션을 정지한다 $(selector).stop( ); $(selector).stop(clearQueue); $(selector).stop(clearQueue, goToEnd); 매개변수 clearQueue와 goToEnd는 불 자료형을 입력하며 입력하지 않으면 false를 입력한 것으로 간주한다 첫 번째 매개변수 clearQueue를 true로 설정하면 clearQueue( ) 메서드를 실행하는 것과 같은 효과를 낸다 두 번쨰 매개변수 goToEnd를 true로 설정하면 제자리에서 멈추는 것이 아니라 지정한 최종 형태에서 멈춘..
JS jQuery (part. 35) - 애니메이션 큐 jQuery의 효과 메서드는 계속 큐(먼저 들어간 것이 먼저 나오는 공간)에 누적된다 $(function () { $('div').click(function () { $(this).animate({ left: '+=60' }, 2000).animate({ width: '+=60' }, 2000).animate({ height: '+=60' }, 2000) }) }); animate( ) 메서드를 체이닝으로 연결했다 실행하면 동시에 애니메이션이 실행되는 것이 아니라 차례대로 실행된다 애니메이션 큐에 animate( ) 메서드의 내용이 차례대로 들어가고 나오면서 순서대로 동작한다 애니메이션 큐 관리 메서드 clearQueue( ) : 큐의 내용을 제거한다 $(function () { $('div').anim..
JS jQuery (part. 34) - 상대적 애니메이션 animate( ) 메서드 사용으로 현재 상태에서 상대적으로 애니메이션을 적용할 수 있다 $(function () { $('div').click(function () { var width = $(this).css('width'); var height = $(this).css('height'); }) }); css( ) 메서드로 이벤트 발생 객체의 width 속성과 height 속성을 추출한다 하지만 현재 변수 width와 height는 숫자가 아니라 '50px' 형태의 문자열이다 상대적으로 크기를 추가하려면 숫자로 바꾼 뒤에 더해야 한다 parseInt( ) 함수를 사용하면 문자열 '50px'을 숫자 50으로 바꿀 수 있다. $(function () { $('div').click(function () {..
JS jQuery (part. 33) - 사용자 정의 효과 개발자가 원하는 방향으로 효과를 만들고 싶을 때 사용하는 메서드 animate( ) : 사용자 지정 효과를 생성한다 $(selector).animate(object); $(selector).animate(object, speed); $(selector).animate(object, speed, easing); $(selector).animate(object, speed, easing, callback); animate( ) 메서드의 첫 번째 매개변수인 객체에 입력할 수 있는 속성 opacity height top width left margin right padding bottom $(function () { $('div').hover(function () { $(this).animate({ left: ..
JS jQuery (part. 32) - 기본 시각 효과 jQuery는 기본적으로 세 가지의 효과를 9개의 메서드로 제공한다 기본 시각 효과 메서드 show( ) : 문서 객체를 크게 확대하며 보여준다 hide( ) : 문서 객체를 작게 축소하며 사라지게 한다 toggle( ) : show( ) 메서드와 hide( ) 메서드를 번갈아 실행한다 slideDown( ) : 문서 객체를 슬라이드 효과와 함께 보여준다 slideUp( ) : 문서 객체를 슬라이드 효과와 함께 사라지게 한다 slideToggle( ) : slideDown( ) 메서드와 slideUp( ) 메서드를 번갈아 실행한다 fadeIn( ) : 문서 객체를 선명하게 보여준다 fadeOut( ) : 문서 객체를 흐리게 사라지게 한다 fadeToggle( ) : fadeIn( ) 메서드와 fadeOu..
JS jQuery (part. 31) - 입력 양식 이벤트 입력 양식 이벤트 종류 change : 입력 양식의 내용을 변경할 때 발생 focus : 입력 양식에 초점을 맞추면 발생 focusin : 입력 양식에 초점이 맞추어지기 바로 전에 발생 focusout : 입력 양식에 초점이 사라지기 바로 전에 발생 blur : 입력 양식에 초점이 사라지면 발생 select : 입력 양식을 선택할 때 발생 (input[type="text"] 태그 및 textarea 태그 제외) submit : submit 버튼을 누르면 발생 reset : reset 버튼을 누르면 발생 submit 이벤트 이름 : 비밀번호 : submit 이벤트는 form 태그에서 발생하는 이벤트이다 따라서 form 객체에 submit( ) 메서드를 연결한다 입력 양식의 유효성 검사를 할 때는 기본 이벤..
JS jQuery (part. 30) - 윈도우 이벤트 윈도우 이벤트는 윈도우 객체만 사용할 수 있는 이벤트가 아니라 window 객체와 document 객체 이외의 img 태그 등이 사용할 수 있는 이벤트이다 윈도우 이벤트 종류 ready : 문서 객체가 준비 완료되면 발생 load : 문서 객체를 불러들일 때 사용 unload : 문서 객체를 닫을 때 발생 resize : 문서 객체의 크기를 변화 시킬 때 발생 scroll : 문서 객체를 스크롤할 때 발생 error : 에러가 있을 때 발생 페이스북의 무한 스크롤 구현 스크롤이 문서 끝까지 내려가면 자동으로 문서가 연장된다 $(function () { $(window).scroll(function () { }); }); window 객체에 scroll 이벤트를 연결한다 window 객체는 별도의 선택자가..
JS jQuery (part. 29) - 키보드 이벤트 키보드 이벤트 종류 keydown : 키보드를 누를 때 발생 keypress : 글자가 입력될 때 발생 keyup : 키보드를 뗄 때 발생 글자 수 세기 프로그램 글자 수 세알리기 150 textarea에 keyup 이벤트 연결 keyup 이벤트가 발생하면 글자의 갯수를 받아 출력 $(function (event) { $('textarea').keyup(function () { var inputLength = $(this).val().length; var remain = 150 - inputLength; $('h1').html(remain) if (remain >= 0) { $('h1').css('color', 'black'); } else { $('h1').css('color', 'red'); } })..
JS jQuery (part. 28) - 마우스 이벤트 마우스 이벤트 종류 click : 마우스를 클릭할 때 발생 dbclick : 마우스를 더블 클릭할 때 발생 mousedown : 마우스 버튼을 누를 때 발생 mouseup : 마우스 버튼을 뗄 때 발생 mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생 mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생 mousemove : 마우스가 움직일 때 발생 mouseout : 마우스가 요소를 벗어날 때 발생 mouseover : 마우스를 요소 안에 들여올 때 발생 $(function () { $('.outer').mouseover(function () { $('body').append('MOUSEOVER'); }).mouseenter(function () { $..
JS jQuery (part. 27) - 이벤트 연결 범위 한정 이벤트를 연결할 때 on( ) 메서드를 사용한다 on( ) 메서드에 넣을 수 있는 매개변수가 엄청 다양하다 selector 매개변수로 이벤트 범위를 한정할 수 있다 이렇게 범위를 한정하는 이벤트 연결 방식을 delegate 방식이라고 한다 Header $(function () { $('h1').on('click', function () { var length = $('h1').length; var targetHTML = $(this).html(); $('#wrap').append('' + length + " - " + targetHTML + ""); }) }) 이렇게 코드를 실행하면 h1 태그가 추가되지만 on( ) 메서드는 현재 존재하는 태그에만 이벤트를 연결하기 때문에 새로 생긴 h1 태그를 클릭하면..
JS jQuery (part. 26) - 기본 이벤트와 이벤트 전달 preventDefault( ) : 기본 이벤트를 제거한다 stopPropagation( ) : 이벤트 전달을 제거한다 네이버 a 태그와 h1 태그에 이벤트를 연결한다 하지만 a 태그의 기본 이벤트가 실행되어서 h1 태그의 이벤트가 소용이 없는 상황이 된다 $(function () { $('a').click(function (event) { $(this).css('background-color', 'blue'); event.preventDefault(); }); $('h1').click(function () { $(this).css('background-color', 'red'); }); }); 코드를 실행하면 a 태그 클릭시 a 태그 이외에 h1 태그에도 이벤트 전달이 일어난다 이벤트 전달을 막으려면 ..
JS jQuery (part. 25) - 이벤트 강제 발생 jQuery에서 이벤트를 강제로 발생시킬 때는 trigger( ) 사용 trigger( ) : 이벤트를 강제로 발생시킨다 $(selector).trigger(eventName) $(selector).trigger(eventName, data) Start: Start: h1 태그에 click 이벤트를 연결 setInterval( ) 함수로 마지막에 위치한 h1 태그는 자동으로 1초마다 클릭 이벤트를 실행한다 $(function () { $('h1').click(function () { $(this).html(function (index, html) { return html + '😍' }) }); setInterval(function () { $('h1').last().trigger('click'); }, ..
JS jQuery (part. 24) - 이벤트 객체 활용 모든 리벤트 리스너는 이벤트 객체가 있다 기존 자바스크립트의 이벤트 객체는 웹 브라우저마다 사용 방법과 이벤트 객체의 속성도 달랐다 하지만 jQuery가 스스로 이벤트 객체를 정형화하므로 jQuery의 이벤트 객체는 모든 웹 브라우저에서 같은 방법으로 사용할 수 있으며, 같은 속성을 갖는다 HTML5부터 지원하는 canvas 태그 jQuery가 canvas 태그를 정식으로 지원하지 않는다 그래서 id 속성을 부여하고 getElementById( )를 사용한다 $(function () { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); $(canvas).on({ mousedown: function (..
JS jQuery (part. 23) - 매개변수 context jQuery 메서드는 매개변수를 두 개 입력할 수도 있다 $(selector, context) context는 selector가 적용하는 범위를 한정한다 (일반적으로 이벤트와 함께 사용) 특정 부분에 선택자를 적용하고 싶을 때 사용하는 것이 매개변수 context Header 1 Paragraph Header 2 Paragraph Header 3 Paragraph $(function () { $('div').click(function () { var header = $('h1', this).text(); var paragraph = $('p', this).text(); alert(header + '\n' + paragraph); }) }); 또는 find( ) 메서드를 사용해도 된다 $(function ..
JS jQuery (part. 22) - 이벤트 연결 제거 이벤트를 제거할 때는 off( ) 메서드를 사용 off( ) : 이벤트를 제거 $(selector).off( ) $(selector).off(eventName) $(selector).off(eventName, function) 1번 형태는 해당 문서 객체와 관련된 모든 이벤트를 제거 2번 형태는 해당 문서의 특정 이벤트와 관련된 모든 이벤트를 제거 3번 형태는 특정 이벤트 리스너를 제거 $(function () { $('h1').click(function () { $(this).html('CLICK'); alert("이벤트가 발생했습니다.") $(this).off(); }); }) 이벤트를 한 번씩만 실행한다 이 기능을 제공하는 jQuery 메서드가 별도로 존재 one( ) : 이벤트를 한 번만 연결한다..

티스토리툴바