Hi

입력 양식 이벤트이벤트 이름설명change입력 양식의 내용을 변경할 때 발생합니다.focus입력 양식에 초점을 맞추면 발생합니다.focusin입력 양식에 초점이 맞추어지기 바로 전에 발생합니다.focusout입력 양식에 초점이 사라지기 바로 전에 발생합니다blur입력 양식에 초점이 사라지면 발생합니다.select입력 양식을 선택할 때 발생합니다(input[type="text"] 태그 및 textarea 태그 제외)submitsubmit 버튼을 누르면 발생합니다.resetreset 버튼을 누르면 발생합니다. ex) 이름 : 비밀번호: submit 이벤트는 form 태그에서 발생하는 이벤트$(document).ready(function() { $('#my-form').submit(function(event)..

윈도우 이벤트윈도우 이벤트는 윈도우 객체만 사용할 수 있는 이벤트가 아니라 window 객체와 document 객체 이외에 img 태그 등이 사용할 수 있는 이벤트이벤트설명ready문서 객체가 준비 완료되면load문서 객체를 불러들일 때 발생합니다unload문서 객체를 닫을 때 발생합니다resize문서 객체의 크기를 변화시킬 때 발생합니다scroll문서 객체를 스크롤할 때 발생합니다.error에러가 있을 때 발생합니다 window 객체에 scroll 이벤트를 연결. window 객체는 별도의 선택자가 없으므로, 곧바로 문서 객체를 넣는다는 것을 주의한다.$(document).ready(function() { $(window).scroll(function() { var scrollHeight = $(win..

키보드 이벤트이벤트 이름설명keydown키보드를 누를 때 발생합니다.keypress글자가 입력될 때 발생합니다.keyup키보드를 뗄 때 발생합니다. ex) 동적으로 글자 수를 세기$(document).ready(function() { $('textarea').keyup(function() { // 남은 글자 수를 구합니다. var inputlength = $(this).val().length; var remain = 150 - inputLength; // 문서 객체에 입력합니다. $('h1').html(remain); }); }); 1. 사용자가 키보드를 누릅니다. 2. keydown 이벤트가 발생합니다 3. 글자가 입력됩니다 4. keypress 이벤트가 발생합니다 5. 사용자가 키보드에서 손을 뗍니다..

마우스 이벤트이벤트 이름설명click마우스를 클릭할 때 발생합니다.dbclick마우스를 더블 클릭할 때 발생합니다.mousedown마우스 버튼을 누를 때 발생합니다.mouseup마우스 버튼을 뗄 때 발생합니다.mouseenter마우스가 요소의 경계 외부에서 내부로 이동할 때 발생합니다.mouseleave마우스가 요소의 경계 내부에서 외부로 이동할 때 발생합니다.mousemove마우스를 움직일 때 발생합니다.mouseout마우스가 요소를 벗어날 때 발생합니다.mouseover마우스를 요소 안에 들어올 때 발생합니다. ex)$(document).ready(function() { $('outer').mouseover(function() { $('body').append('MOUSEOVER'); }).mouse..

이벤트 연결 범위 한정범위를 한정하는 이벤트 연결 방식-> delegate 방식 "delegate 방식으로 이벤트를 연결합니다!" -> 이벤트 연결 범위를 한정하는 방법 on() 메서드는 현재 존재하는 태그에만 이벤트를 연결하기 때문에, 새로 생긴 태그에는 이벤트가 적용되지 않는다. 이러한 경우, 상위 태그에 이벤트를 연결하고 'h1 태그를 클릭했을 때'를 검출해야 합니다. Header $(document).ready(function() { $('#wrap').on('click', 'h1', function() { var length= $('h1').length; var targetHTML = $(this).html; $('#wrap').append('' + length + ' - ' + targetHT..

기본 이벤트와 이벤트 전달메서드 이름설명preventDefault()기본 이벤트를 제거합니다.stopPropagation()이벤트 전달을 제거합니다.$(document).ready(function() { $('a').click(function event) { $(this).css('background-color', 'blue'); event.stopPropagation(); // h1 클릭까지 되는걸 없애기. event.preventDefault(); // a의 본연의 링크 이벤트 기능을 없애기 }); $('h1').click(function() { $(this).css('background-color', 'red'); }); }); 위의 코드를 간단하게 return false; 로 구현할 수 있다.$(..

이벤트 강제 발생trigger() : 이벤트를 강제로 발생시킵니다. 두가지 형태$(selector).tirgger(eventName); $(selector).tirgger(eventName, data); ex)$(document).ready(function() { // 이벤트를 연결합니다. $('h1').click(function() { $(this).html(function(index, html) { return html + '별' }); }); // 1초마다 함수를 실행합니다. setInterval(function() { $('h1').last().trigger('click'); }); }); 두 번째 매개변수에 배열을 입력하면 데이터가 자동으로 이벤트 리스너에 순서대로 추가 전송됩니다.$(docum..

이벤트 객체이벤트 객체 속성설명event.pageX브라우저의 화면을 기준으로 한 마우스의 X 좌표 위치event.pageY브라우저의 화면을 기준으로 한 마우스의 Y 좌표 위치event.preventDefault()기본 이벤트를 제거합니다.event.stopPropagation()이벤트 전달을 제거합니다$(document).ready(function() { // 변수를 선언합니다 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 이벤트를 연결합니다. $(canvas).on({ mousedown: function(event) { // 위치를 얻어냅니다. var position = $(this).of..

매개변수 contextjQuery 메서드는 사실 매개변수 두 개 입력할 수도 있습니다.$(selector, context) 매개변수 context는 selector가 적용하는 범위를 한정합니다. 특정 부분에 선택자를 적용하고 싶을 때 사용하는 것 -> 매개변수 context ex)$(document).ready(function(){ // 이벤트를 연결합니다. $('div').click(function() { var header = $('h1', this).text(); var paragraph = $('p', this).text(); //출력합니다. alert(header + '\n' + paragraph); }); }); 다음과 같이 find() 메서드를 사용해도 됩니다.$(document).ready..

간단한 이벤트 연결/제거간단한 이벤트 연결간단한 방식으로 연결할 수 있는 이벤트blurfocusfocusinfocusoutloadresizescrollunloadclickdbclickmousedownmouseupmousemovemouseovermouseoutmouseenterouseleavechangeselectsubmitkeydownkeypresskeyuperrorready 간단한 방식으로 이벤트를 연결할 때 다음과 같은 방법을 사용$(selector).method(function(event) {}); 이벤트 연결 메서드도 제공됨hover : mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결합니다. 다음과 같은 형태로 사용$(selector).hover(function(event) ..

이벤트 연결 기본on() 메서드를 사용하는 것이 jQuery로 이벤트를 연결하는 가장 기본적인 방법on() : 이벤트를 연결합니다. 두가지 형태1. $(selector).on(eventName, function(event){}) 2. $(selector).on(object) 1번 예시) 이벤트 발생 시 이벤트 발생 객체에 '+' 글자를 추가합니다.$(document).ready(function() { // 이벤트를 연결합니다. $('h1').on('click', function() { $(this).html(function(index, html) { return html + '+' }); }); });이벤트 리스너 안에서 this 키워드는 이벤트가 발생한 객체를 의미한다.2번 예시) 이름과 속성 값에, ..

문서 객체 삽입/이동/복제문서 객체 삽입메서드 이름설명$(A).appendTo(B)A를 B의 뒷부분에 추가합니다.$(A).append(B)B를 A의 뒷부분에 추가합니다.$(A).prependTo(B)A를 B의 앞부분에 추가합니다.$(A).prepend(B)B를 A의 앞부분에 추가합니다.$(A).insertAfter(B)A를 B의 뒤에 추가합니다.$(A).after(B)B를 A의 뒤에 추가합니다.$(A).insertBefore(B)A를 B의 앞에 추가합니다.$(A).before(B)B를 A의 앞에 추가합니다. append() 로 예시)1. $(selector).append(content, content, ......, content) 2. $(selector).append(function(index){})..

문서 객체 삽입메서드 이름설명$(A).appendTo(B)A를 B의 뒷부분에 추가합니다.$(A).append(B)B를 A의 뒷부분에 추가합니다.$(A).prependTo(B)A를 B의 앞부분에 추가합니다.$(A).prepend(B)B를 A의 앞부분에 추가합니다.$(A).insertAfter(B)A를 B의 뒤에 추가합니다.$(A).after(B)B를 A의 뒤에 추가합니다.$(A).insertBefore(B)A를 B의 앞에 추가합니다.$(A).before(B)B를 A의 앞에 추가합니다. append() 로 예시)1. $(selector).append(content, content, ......, content) 2. $(selector).append(function(index){}); 1번 예시)$(docu..

문서 객체 생성텍스트 노드를 갖는 문서 객체를 생성하는 방법$() : 문서 객체를 생성합니다. $() 메서드의 매개변수에 HTML 태그를 문자열로 넣기만 하면 문서 객체가 생성됩니다. $(document).ready(function() { $('').html('Hello World .. !').appendTo('body'); }); 내용을 바로 넣을 수도 있다.$(document).ready(function() { $('Hello World .. !').appendTo('body'); });텍스트 노드를 갖지 않는 문서 객체를 생성하는 방법$(document).ready(function() { $('').attr('src', 'Chrysanthemum.jpg').appendTo('body'); }); $..

문서 객체 제거메서드 이름설명remove()문서 객체를 제거합니다.empty()문서 객체 내부를 비웁니다. ex) Header-0 Header-1 remove() 는 한 줄 지우기 처럼 쓰면 되는가 해당 문서 객체를 꼭 집어서 지워버리는 듯하다.$(document).ready(function() { $('h1').first().remove(); });empty() 는 선택한 문서 객체의 '내부'에 들어 있는 모든 문서 객체를 제거한다.$(document).ready(function() { $('div').empty(); });

문서 객체의 내부문서 객체의 내부 검사자바스크립트에서 문서 객체의 innerHTML, textContent 속성과 관련됨메서드 이름설명html()문서 객체 내부의 글자와 관련된 모든 기능을 수행합니다(HTML 태그 인식)text()문서 객체 내부의 글자와 관련된 모든 기능을 수행합니다. (HTML 태그 인식 X) Header-0 Header-1 Header-2 또다른 차이점은 alert()에 나오듯이, 하나가 나오느냐 여러개가 나오느냐$(document).ready(function() { // 변수를 선언합니다. var html = $('h1').html(); // 출력합니다. alert(html); // Header-0 });$(document).ready(function() { // 변수를 선언합니다..

문서 객체의 스타일문서 객체의 스타일 검사css() : 스타일과 관련된 모든 기능을 수행합니다. css() 메서드로 특정 문서 객체의 스타일 속성을 알고 싶을 때 -> 메서드의 매개변수에 스타일 속성 이름을 입력한다.$(document).ready(function() { // 변수를 선언합니다. var color = $('h1').css('color'); // 출력합니다. alert(color); // rgb(255, 0, 0) 같은 값이 나온다. });문서 객체의 스타일 추가세가지 형태1. $(selector).css(name, value); 2. $(selector).css(name, function(index, style){}); 3. $(selector).css(object); 1번 예시)$(do..

문서 객체의 속성문서 객체의 속성 검사attr() : 속성과 관련된 모든 기능을 수행합니다. ex)$(document).ready(function() { //변수를 선언합니다. var src = $('img').attr('src'); //출력합니다. alert(src); });코드를 실행하면 첫 번째 문서 객체의 속성을 출력하는 것을 확인할 수 있다. 대부분의 값을 알아내는 메서드는 여러 개의 문서 객체를 선택 했을 때, 첫 번째에 위치한 문서 객체의 값을 출력한다. 문서 객체의 속성 추가세 가지 형태1. $(selector).attr(name, value); 2. $(selector).attr(name, function(index, attr){}); 3. $(selector).attr(object); ..

문서 객체의 클래스 속성 제거removeClass() : 문서 객체의 클래스 속성을 제거합니다. ex)$(documnet).ready(function() { $('h1').removeClass('select'); }); NOTEtoggleClass() : 매개변수로 입력한 클래스 속성이 이미 지정되어 있으면 -> 제거 지정되어 있지 않으면 -> 추가

문서 객체의 클래스 속성 추가addClass() : 문서 객체의 클래스 속성을 추가합니다 ex 1)$(document).ready(function() { $('h1').addClass('item'); }); ex 2) 함수(index 매개변수가 있는)를 매개변수로 입력할 수도 있습니다.$(document).ready(function() { $('h1').addClass(function(index){ return 'class' + index; }); });

문서 객체 선택과 탐색기본 필터 메서드filter() 문서 객체를 필터링합니다. 1. $(selector).filter(selector); 2. $(selector).filter(function(){}); 1번 예시$(document).ready(function() { $('h3').filter(':even').css({ backgroundColor: 'black', color: 'white' }); }); 2번 예시$(document).ready(function() { $('h3').filter(function (index) { return index % 3 == 0; }).css({ backgroundColor: 'black', color: 'white' }); });문서 객체 탐색 종료end() 문..

배열 관리 배열 관리 배열을 관리할 때, each() 메서드를 사용 each() 메서드 : 매개변수로 입력한 함수로 for in 반복문처럼 객체나 배열의 요소를 검사하는 메서드 1. $.each(object, function(index, item){}) 2. $(selector).each(function(index, item){}) 자바스크립트 배열 관리 $(document).ready(function() { // 변수를 선언합니다. var array = [ { name: 'Hanbit Media', link: 'http://hanbit.co.kr' }, { name: 'Naver', link: 'http://naver.com' } { name: 'Daum', link: 'http://daum.net' ..