★ jQuery Alias //원래 이렇게 써야하는 것을 jQuery('#btn1') //Alias 를 통해 $기호로 이용 가능하도록 제공 $('#btn1') ★ jQuery Effection function jQuery Effect 처리 다양한 함수. 1. hide(), show(), toggle() //1. hide(), show(), toggle() //hide(time), show(time), toggle(time) // hide() : 박스를 숨기는 것 $('#btn1').click( () => { $('#box').hide(); }); // show() : 박스를 보이게 하는 것 $('#btn2').click( () => { $('#box').show(); }); // toggle() : 박스..
★ jQuery 이벤트 이벤트 전용 함수 가독성, 편리함 a. obj.test() : getter > 읽기 b. obj.test(param) : setter > 쓰기 jQuery('#btn3').click(function(){ alert('jQuery'); }); 이벤트 범용 함수 구문 길다.(불편함) a. obj.test(param) : getter > 읽기 b. obj.test(param, param) : setter > 쓰기 // b. 이벤트 범용 함수 jQuery('#btn4').on('click', function(){ alert('jQuery'); }); ■ mouseover, mouseout 이벤트 전용 함수 jQuery('#btn3').mouseover(function(){ // alert..
★ 순수 JavaScript Vanila JavaScript ★ JavaScript Library(API) jQuery ★ JavaScript FrameWork React Angular Vue ★ jQuery JQuery is a fast(x), small(x), and feature-rich JavaScript Library Lightweight Footprint CSS3 Compliant Cross-Browser ★ JQuery 다운로드 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal..
★ 고양이 잡기 게임 5개의 단계에 거쳐 나타나는 고양이를 포획하는 게임 ■ HTML 코드 Catch Cat Ready ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 이동하는 고양이를 잡기 이동하는 고양이를 클릭하여 포착하기 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 다량의 선 애니메이션 해당 선을 커서를 대면 선의 곡율 처럼 효과 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 셀 클릭 애니메이션 셀을 클릭하였을 때, 애니메이션 처리 ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
★ 이미지 뷰어 이미지 뷰어를 구현. ▷/|| 버튼을 누르면 시작/멈춤을 제어. 1초마다 순차적으로 이미지가 변경. 특정 버튼을 눌러 이미지를 변경한다. 자동 실행 중 특정 버튼을 누르면 타이머는 중단되고 누른 이미지가 출력된다. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스
