[codeSchool] try jQuery 정리 level 3 — Working with the DOM

DOM사이를 자유롭게 이동할 수 있게 되었다면, 이제는 DOM을 이용해서 일해볼 차례다. ***

변수선언 DOM 생성

js를 이용해서 html-즉 DOM들을 달고 뺄 수 있다.

먼저 js 변수선언과 같이 html element들을 생성가능한데..

var price = $(‘<p> blabla </p>’); → 이렇게 jquery형태로 선언해야 한다. 그냥 <p>..</p> 와 같이 선언하면 안된다는 사실!

여러가지 생성 method

$(A).append(<element>) → element를 A의 하위속성 맨 끝에 생성!

$(A).prepend(<element>) → element 를 A의 하위속성 맨 앞에 생성

$(A).after(<element>) → element 를 A와 동격으로 뒤에 생성

$(A).before(<element>) → element 를 A와 동격으로 앞에 생성

cf) appendTo, prependTo, insertAfter, insertBefore로 문법요소 반대로도 가능하다.

e.g.) $(<element>).appendTo(A) → element를 A의 하위속성 맨 끝에 생성!

DOM 제거

$(A).remove(<element>); → 간단하다

interaction하기.

사용자가 어떤 action을 취하는지 watch하여 interaction하는 방법을 소개해 본다. 기본적으로 eventhandler를 사용하여 watch하는데.. 기본적인 문법은 다음과 같다.

$([id, class, element 등, 감시할 객체 입력]).on([click등 사용자 행동], function(){});

on() 의 행동 다음에는 감시할 객체의 하위 class 로 추가 argument입력가능하여 filtering 가다. →

e.g.) .on(행동 (,제한범위) , function(){});

예를들면 .vacation class 내에서 <button> element에만 function하도록 만들 수 있겠다.

$(‘.vacation’).on(‘click’, ‘ button’, function(){});

현재까지 배운 것을 종합하면 working process가 다음과 같이 진행되겠다.

1. 사용자 행동을 watch해서 특정 행동을 충족시에,
2. DOM을 찾기( $(this)를 이용하여 특정행동이 일어난 DOM을 대상으로 하거나 , 해당 DOM에서 traverse하여 원하는 DOM으로 간 후),
3. append 또는 remove등 원하는 function을 수행하는 것.