이벤트 : 페이지에서 어떤 일이 일어 났을 때 코드를 실행하는 매커니즘 - 이벤트가 일어났을 때 실행되는 코드가 함수인데, 이를 사용하면 jQuery를 더 효율적으로 만들고 코드 재활용 가능 bind : 이벤트 묶기 - 이벤트 리스너는 자바스크립트 해석기에 어떤 함수를 넘겨줘야 할지 알게 됨 - .bind( ) 메소드 사용 1. 단축 메소드 - DOM 요소가 이미 존재 할 때만 사용 가능 $("#myElement").click(function() { alert($(this).text()); } 2. DOM 요소를 새로 만들었을 때처럼, 페이지를 불러온 뒤에 추가된 요소에도 이벤트 리스너 등록 가능 $("#myElement").bind("click", function() { alert($(this).tex..
객체 : 데이터명과 값을 설정하여 저장할 때 사용 { 데이터명1 : 값1, 데이터명2 : 값2, 데이터명3 : 값3 } 변수 : 하나의 데이터를 저장 var 변수명 = 데이터; - 프로그램에서 데이터를 유지 - 메소드 밖에서는 사용 불가 배열 : 데이터를 순차적으로 저장 var 변수명 = [ 데이터1, 데이터2, 데이터3 ]; - 객체 선언 방법과 비슷하지만 '데이터명'을 지정하지 않는다는 차이 this : 데이터 수집 전용 변수 - this에 저장되는 데이터는 JavaScript의 실행 내용에 따라 자동으로 변환 - 사용 이유 1. 처리 성능 향상 2. 같은 코드 여러번 사용 가능 3. $( ) 함수에 여러 선택자를 지정한 경우, 처리 시점을 나눌 수 있음 - on( ) 메소드안에서 this를 지정하면..
animate( ) : 처리 대상에 애니메이션 효과를 줄 때 사용하는 메소드 .anmaite({ /* 첫 번째 매개 변수 */ 'CSS 속성 1' : '값 1', 'CSS 속성 2' : '값 2', 'CSS 속성 3' : '값 3' }, /* 애니메이션 실행 시간 */, /* 이징 종류 */, function() { //이벤트 } ); - 첫 번째 매개 변수 : 애니메이션 효과 실행 완료 시, 외형을 표현하는 CSS 속성과 값을 전달 - 애니메이션 실행 시간 : 얼마만큼 시간이 지난 후에 애니메이션 효과를 적용하는지 지정 - 이징 종류 : 애니메이션 효과의 변화 속도 - linear : 같은 속도, 완급 조절 없이 일정한 속도로 움직임 - swing : 가벼운 완급 조절, 애니메이션 효과의 속도가 약간 ..
on( ) : 특정 사건이 발생하는 시점에 실행할 명령을 설정하는 메소드 - on( ) 메소드의 첫 번째 매개변수는 이벤트 타입을, 두 번째 매개 변수는 이벤트 핸들러를 전달 on('이벤트 타입' . '이벤트 핸들러'); - 이벤트 : 특정 사건 - 이벤트 타입 : 이벤트 유형 - 이벤트 핸들러: 실행하려는 명령(함수) 주요 이벤트 타입 이벤트 타입 해당 시점 mouseover 요소에 마우스 포인터를 올려놓았을 때 mouseout 요소에서 마우스 포인터가 벗어날 때 mousedown 요소에 마우스 포인터를 올려놓은 상태에서 해당 요소를 클릭할 때 mouseup 요소에 마우스 포인터를 올려놓은 상태에서 해당 요소를 클릭했다가 땔 때 mousemove 요소 안에서 마우스 포인터를 움직일 대 click 요소를..
CSS 스타일 변경 $(function(){ $('선택자').css('속성', '값'); } - 선택자 : CSS와 같은 선택자를 지정 - 속성 : CSS 속성 지정 - 값 : 속성에 설정할 값을 지정 - 명령 대상 : $('선택자') - 명령 내용 : css('속성', '값') -> '명령대상에 명령 내용을 보낸다' 라고 해석 명령 대상 id="hello" //HTML $('#hello') // jQuery - css( ) 메소드의 명령 대상이 되는 것은 id의 값이 정의된 HTML 요소 - $( ) 의미 : 'HTML 요소를 기반에 두고 jQuery의 고유 요소를 생성한다' - jQuery 객체 : $( ) 함수를 통해 jQuery 고유의 형식으로 변횐된 요소 명령 내용 - 의미 : CSS의 '속성'..
https://api.jquery.com/ jQuery : 자바스크립트 라이브러리 - 목적 : 웹 사이트에서 자바스크립트를 사용하는 것이 훨씬 쉬워지도록 하는 것 - 여러 줄의 자바스크립트 코드를 필요로 하는 많은 일반적인 작업을 한 줄의 코드로 작업할 수 있는 메서드로 실현 가능 - 기능 1. HTML/DOM 조작 : 특정 요소를 쉽게 찾고, 내용 변경이 간단 2. CSS 조작 : 특정 요소에 대한 스타일의 변경 등의 작업이 간단 3. HTML 이벤트 : 이벤트를 간단히 처리 4. 효과 및 애니메이션 : 웹 페이지 상의 효과나 애니메이션이 가능 5. AJAX : 네트워크를 통하여 서버와의 정보 교류를 쉽게 함 다운로드 1. cmd 창 열기 2. npm install jquery 입력 3. 사용 - HT..