키보드와 하루

1. animate 이벤트 - 역할사용자 지정 효과 생성 ◈ 구문형식 animate( object , speed , callback , easing) - object : opactity , height , top , width , left , margin , right , padding , bottom - speed : 효과를 진행할 속도 지정 (입력 - 밀리 초 단위의 숫자 , 문자열(slow,normal,fast)) - callback : 효과를 수행후 실행할 함수 지정 - easing : easing 형태를 지정 (입력 - linear,swing) 2. animate 이벤트 - 예제◈ 코드 123456789101112131415161718$(document).ready(function () { $(..

1. fade 이벤트 - 역할 fadeIn() - 문서 객체를 천천히 보여줌 fadeOut() - 문서 객체를 천천히 사라짐 fadeToggle() - fadeIn() 메서드와 fadeOut() 메서드를 번갈아 실행 ◈ 구문형식 fadeIn( speed , callback , easing) - speed : 효과를 진행할 속도 지정 (입력 - 밀리 초 단위의 숫자 , 문자열(slow,normal,fast)) - callback : 효과를 수행후 실행할 함수 지정 - easing : easing 형태를 지정 (입력 - linear,swing) 2. fade 이벤트 - 예제 ◈ 코드 123456789101112131415161718$(document).ready(function () { $("#btn").c..

1. 입력양식 이벤트 - 역할 입력양식 반응에 따른 이벤트 2. 입력양식 이벤트 - 정리이벤트 이름설명change내용이 변경할 때focus초점을 맞출 때focusin초점을 맞추어지기 바로 전focusout초점이 사라지기 바로 전blur초점이 사라지면select선택할 때(text 타입,textarea 제외) submitsubmit 버튼을 누를 때 resetreset 버튼을 누를 때 3. 입력양식 이벤트 - 예제1 ◈ 코드 12345678910111213$(document).ready(function () { $("#test").change(function (event){ alert($(this).val()); });}); ◈ 결과화면 ◈ 설명 텍스트를 입력하고 테스트 내용이 변경되었을 때에만 alert 창..

1. 윈도 이벤트 - 역할 윈도 반응에 따른 이벤트 2. 윈도이벤트 - 정리이벤트 이름설명ready객체 준비 완료load윈도를 불러들일 때unload윈도를 닫을 때resize윈도 크기 변화가 있을 때scroll윈도 스크롤이 발생할 때error에러가 있을 때 3. 윈도이벤트 - 예제1 ◈ 코드 12345678910 $(document).ready(function () { $(window).load(function(){ alert("load 이벤트"); });}); ◈ 결과화면 ◈ 설명 처음 화면을 실행하면 위와 같은 alert 창이 발생합니다 4. 윈도이벤트 - 예제2 ◈ 코드 12345678910 $(document).ready(function () { $(window).scroll(function(){..

1. 키보드 이벤트 - 역할키보드 반응에 따른 이벤트 2. 키보드 이벤트 - 정리이벤트 이름설명keydown 키보드를 누를 때 발생keypress글자가 입력될 때 발생(한글은 지원 안함)keyup키보드를 땔 때 발생 3. 키보드 이벤트 - 예제1◈ 코드 123456789101112131415 $(document).ready(function () { $('input').keydown(function() { alert($(this).val()); });}); ◈ 결과화면 - a를 입력한 뒤에 b를 눌렀을 때 ◈ 설명 a를 입력하고 b를 입력했을 때 keydown 이벤트가 발생하여 먼저 alert창을 찍고 다음 b가 입력됩니다 4. 키보드 이벤트 - 예제2◈ 코드 123456789101112131415 $(d..

1. 마우스 이벤트 - 역할 마우스 반응에 따른 이벤트 2. 마우스 이벤트 - 정리이벤트 이름설명click 마우스 클릭시 발생 dbclick 마우스 더블클릭시 발생 mousedown 마우스 버튼을 눌렀을 때 발생 mouseup마우스 버튼을 땔 때 발생mouseenter마우스가 외부→내부로 이동할 때 발생mouseleave 마우스가 내부→외부로 이동할 때 발생mousemove 마우스가 움직일 때 발생 mouseout마우스가 벗어날 때 발생 mouseover마우스가 들어올 때 발생 3. 마우스 이벤트 - 예제 ◈ 코드 1234567891011121314151617 $(document).ready(function () { $('h1').mouseover(function() { $(this).css('color..

1. stopPropagation() - 역할 객체 내에서 이벤트 전달을 제거 2. stopPropagation() - 예제1 (사용하지 않을 경우) ◈ 코드 1234567891011121314151617181920212223 $(document).ready(function () { $('h1').click(function(event) { $(this).css('background-color','yellow'); //event.stopPropagation(); }); $('div').click(function(){ $(this).css('background-color','blue'); }); }); test1 test2 ◈ 결과화면 - 처음화면 - h1 태그 영역을 클릭 했을 떄 ◈ 설명 위 그림에서 보..

1. off(),one() - 역할두 개의 실행 결과는 같음 한번만 실행을 하고 더 이상 이벤트를 실행하지 않음 하지만, 명백한 차이점 off() - 이벤트를 제거 one() - 이벤트를 한 번만 실행 2. off() - 예제◈ 코드 12345678910111213141516171819 $(document).ready(function () { $('h1').click(function(){ $(this).css('color','blue'); alert("h1이 파란색으로 변함"); $(this).off(); });}); test1 test2 ◈ 결과화면 ◈ 설명 off()가 존재하지 않을 경우 alert 창이 누를 때마다 나오겠지만 off() 가 존재함으로 위와 같은 alert 창은 한번만 나오게 됩니다 ..

1. hover() - 역할객체에 마우스가 올라왔을 때, 즉 rollover 되었을 때와 마우스가 객체로부터 떠났을 때, 즉 leave가 되었을 때 발생하는 이벤트 2. hover() - 예제◈ 코드 1234567891011121314151617 $(document).ready(function () { $('h1').hover(function(){ $(this).css('color','blue'); }, function() { $(this).css('color','red'); });}); test1 test2 ◈ 결과화면 - 아무 작업도 하지 않은 처음 화면 - 마우스를 올렸을 때 - 마우스를 떠났을 때

1. clone() - 역할객체를 복제하는 역할 2. clone() - 예제◈ 코드 12345678910111213 $(document).ready(function () { $('h1').after($('h2').clone());}); test1 test2 ◈ 결과 ◈ 결과코드 12345 test1 test2 test2 ◈ 설명 화면에 있는 h2 태그를 복제하여 h1 다음에 붙이는 것으로 위와 같은 결과가 나타납니다