★ JQuery 태그 조작 1. 콘텐츠 조작 innerText, textContent > text() alert($('#box').text()); $('#box').text('홍길동'); innerHTML > html() $('box').html('안녕하세요.') value > val() alert($('#txt1').val()); $('#txt1').val('값을 대입합니다.'); 2. 속성조작 BOM : obj.prop DOM : obj.setAttribute(key, value) , obj.getAttribute(key) HTML 속성을 조작하는 메소드 obj.attr('name') obj.attr('name', value) JavaScript 프로퍼티를 조작하는 메소드(HTML 속성에는 없고, J..
★ jQuery + Box Model 상자 크기? 1. css 문법을 이용하였을 경우 //1. CSS console.log('width', $('#box').css('width')); console.log('height', $('#box').css('height')); $('#box').css('width', '500px'); 2. jQuery 문법을 이용하였을 경우 width(), height() //2. console.log('width', $('#box').width()); //수치(px) console.log('height', $('#box').height()); $('#box').width(300); 3. innerWidth(), innerHeight : width/height + padding..
★ jQuery CSS css 조작 //- css('속성') > getter //- css('속성', 값) > setter 색상 확인 //DOM 방식 alert(getComputedStyle(document.getElementById('box')).getPropertyValue('background-color')); //JQuery 방식 alert($('#box').css('background-color')); 다중 값을 주었을 경우 //방법 1 $('#box') .css('color', 'blue') .css('background-color', 'gold') .css('width', 300) .css('height', 100); //방법 2 $('#box').css({ color : 'tomato', ..
★ 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 삽입 미리보기할 수 없는 소스
