웹페이지

Library

JQuery STEP 8 - 포트폴리오 기초

★ 포트폴리오 기초 디자인 HTML 코드 Software Developer Home Skill Portfolio Career Education Home Lorem ipsum dolor sit amet consectetur adipisicing elit. In, distinctio necessitatibus? Soluta, laudantium. Dolore, voluptates. Atque magni recusandae quos nobis incidunt officiis, modi aperiam facere, id sint cumque voluptate et. Ipsa, praesentium. Deleniti, neque laborum? Explicabo, praesentium porro fugiat fa..

Library

JQuery STEP 7 - Traversing

★ Traversing 자식 //자식 //- childNodes, children $('#me').children().addClass('check'); $('#me').children().addClass('check') .css('border', '10px solid blue') .click(function() { alert($(this).text()); }); 첫째 자식 > first() 이용 $('#me').children().first().addClass('check'); 막내 자식 > last() 이용 $('#me').children().last().addClass('check'); 둘째 > eq(num) 이용 $('#me').children().eq(1).addClass('check'); 손자 ..

Library

JQuery STEP 6 - Manipulation

★ 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..

Library

JQuery STEP 5 - JQuery + Box Model

★ 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..

Library

JQuery STEP 4 - JQuery CSS

★ 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', ..

Library

JQuery STEP 3 - JQuery Effect

★ 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() : 박스..

Library

JQuery STEP 2 - JQuery Event

★ 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..

Library

JQuery STEP 1 - JQuery 기초 셋팅 및 응용

★ 순수 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..

IT의 큰손
'웹페이지' 태그의 글 목록 (8 Page)