24. Selector기반 사고란?
이벤트에 따른 Class&상태 변화가 있을 때
그에 대한 조건을 일일이 확인하지 않고
Selector에서 선처리 할 수 있도록 설계하는 사고방법
25. Class를 이용한 UI예제
$('#list>li').click(function() {
if($(this).hasClass('select')) {
$(this).removeClass('select');
} else {
$(this).addClass('select');
}
});
li태그 선택
예제보기
$('#delete').click(function() {
$('#list>li.select').remove();
});
li태그 선택
26. Form요소를 이용한 UI예제
$('#delete').click(function() {
$('#list input:checked').closest('li').remove();
});
li태그 선택
예제보기
parent()는 리뉴얼 하면서 DOM이 끊길 수 있고
parents()는 복수로 적용될 수 있기 때문에
반드시 closest()를 사용
29. 한 방에 이해하는 DOM생성
…</div>
<ul id=“list”>
<li>빼로</li>
<li>재선</li>
<li>낙구</li>
<li>수호</li>
</ul>
<div> …
$('#list').before();
$('#list').after();
$('#list').prepend();
$('#list').append();
선택자의 바깥
$('#list').html();
선택자의 내부
30. DOM 생성 예제
$('#add').click(function() {
var content = $('#field').val();
if(!content) {
alert('내용을 입력하세요.');
return false;
}
$('#list').append('<li>'+content+'</li>');
});
input태그를 이용한 필드추가
예제보기
33. live를 사용하면 된다!
$('#list>li').click(function() { …… });
bind
$(document).on('click', '#list>li', function() { …… });
live
한 번만 선언하면 계속 적용된다.
실수로 여러 번 선언했을 경우 여러 번 동작한다.
초기 로딩될 때 한 번만 사용하자.
예제보기
35. 개발의 진화과정
어떻게든 만든다 한 페이지에서 한 번만 작동
어찌어찌 해서
두 번 작동하게 만든다
다른 페이지에서 쓰려니
소스를 통으로 복사한다
공통으로 사용할 수 있게
모듈화를 했다
조금 더 다듬어서
라이브러리나 플러그인으로
배포!!!
36. 모듈화의 첫 걸음
1. ID 이외의 Selector기반으로 작성
2. Selector가 일정 범위를 벗어나지 않음
3. 자주 쓸 경우 자동 바인딩, 가끔 사용할
경우 실행형으로 작성
37. ID 이외의 Selector 기반으로 작성
<div class="dropdown-set">
<button type="button" data-toggle="dropdown">세미나 신청</button>
<ul class="dropdown-menu">
<li><a href="#">빼로</a></li>
<li><a href="#">재선</a></li>
<li><a href="#">낙구</a></li>
<li><a href="#">수호</a></li>
</ul>
</div>
38. Selector가 일정 범위를 벗어나지 않음
$('button[data-toggle="dropdown"]').click(function() {
if($(this).hasClass('active')) {
$(this).closest('.dropdown-set').find('.dropdown-menu').removeClass('active');
} else {
$(this).closest('.dropdown-set').find('.dropdown-menu').addClass('active');
}
});
이벤트가 일어났을 때 이벤트 주체(this)에서
.closest()로 selector의 범위를 한정하고 DOM을 탐색
39. 가끔 사용할 경우 실행형으로 작성
function initDropdown() {
$('button[data-toggle="dropdown"]').click(function() {
if($(this).hasClass('active')) {
$(this).closest('.dropdown-set').find('.dropdown-menu').removeClass('active');
} else {
$(this).closest('.dropdown-set').find('.dropdown-menu').addClass('active');
}
});
}
아래 함수를 공통모듈 js파일에 넣고 필요할 때 호출
예제보기