동적객체3 [jquery] jQuery 입문 02 (170328) jQuery 입문 02 div 요소 중 특정 요소 동작시키기- div:even 짝수 인덱스만 선택해서 동작- div:odd홀수 인덱스만 선택해서 동작- div:first첫번째 요소 선택해 동작- div:last마지막 요소 선택해 동작 ** 출력 결과 ** 체인형태로 action적용하기- 같은 동작명이지만 기능이 반대인 동작 주의하기! ** 출력 결과 ** head에서 jquery 실행시키기- document.ready(function(){ });- window.onload=function(){ });- document.addEventListener("DOMContentLoaded", function(){ }); ** 출력 결과 ** - 이미지 로딩을 먼저 하지 않는 $(document).ready(fun.. 2017. 3. 28. [Javascript] Javscript 입문 11 (170321) Javscript 입문 11 QUIZ 1 : for문을 이용한 테이블 요소 동적추가하기 ANSWER> ** 출력 코드 ** QUIZ 2 > 버튼을 누르면 이동하는 박스 만들기 ANSWER> ** 출력 결과 ** QUIZ 3 > 방향키로 이동되는 박스 만들기 ANSWER> - 이 때, keyCode는 console.log(e.keyCode)로 참고할 수 있다.- 방향키를 이용할 것이기 때문에 addEventListener의 범위는 body로 해도된다. ** 출력 결과 ** 윗 방향키로 인해 위로 사라졌다! 2017. 3. 21. [Javascript] Javascript 입문 10 (170321) Javascript 입문 10 Dynamic Dom- 원하는 시점에 동적인 객체를 만들어 넣어야 할 때 DynamicDom을 이용한다.- DOM : Document Object Model createElement 이용하여 동적으로 객체 추가하기1. document.createElement("객체명"); 을 이용하여 참조값을 담는다.2. 만들어진 문서객체에 텍스트를 출력한다. (innerText 이용)3. 객체를 넣을 body의 참조값을 담는다.4. append함수를 이용하여 만들어진 div를 추가한다.- append : 객체를 자식요소로 맨 뒤에 추가한다.- prepend : 객체를 자식요소로 맨 앞에 추가한다. 동적 객체 추가 + 속성 추가하기- setAttribute(속성명, 속성값) 사용 응용1 :.. 2017. 3. 21. 이전 1 다음
