한 시간 만에 배우는 Jquery퍼블리셔의 시각으로 쉽게 배우자 !

하드코딩하는사람들 빼로

Jquery 란 ?

많은 퍼블리셔가 힘들어해요…UI 개발이 너무 어려워서…

대충 요런 기분 ?

UI 개발이 어려운 이유개발자가 아닌 사람에게 개발을 하라 한다…

책을 봐도 당최 모르겠어…

하지만 희망은 있다 !

우리에겐 빼로 Jquery 가 있으니까

발표의 대상CSS 는 익숙하지만 , Jquery 가 어려운 사람

퍼블리셔의 시각이 형성된 사람

2~3 년차 !

퍼블리셔의 시각이란 ?

CSS 적 사고Selector Style

CSS 적 사고의 핵심

선택한 대상을 변화시킨다Selector

Style

UI 개발의 핵심과 Jquery

선택한 대상이특정 상황일 때 변화시킨다

Event

$(Selector)

.css()

.addClass()

.removeClass()

무슨 일이 발생하는가 ?사용자 이벤트• Click• Mousedown• Mouseup• Keydown• Keyup• Keypress• Focus• ……

브라우저 이벤트• Load• Unload• Resize• Scroll• ……

하지만…이런 사전적인 내용이중요한 것이 아니다 !

결론Jquery 를 잘 하려면

CSS 적 사고에 익숙해야 한다 !

감사합니다

그럼 이제 시작해볼까요 !?

목차기초 : CSS 적 사고하기1. Class 기반 사고하기2. Selector 기반 사고하기심화 : 기초에 기술 더하기3. DOM 조작하기4. 모듈화의 첫 걸음

1. 기초 : Class 기반 사고하기

Class 기반 사고란 ?

이벤트 처리를 할 때 대상에Class 를 추가하거나 없애는 것으로모든 효과를 처리할 수 있도록 CSS 를 설계하는 사고방법

Class 기반 사고를 해야 하는 이유대부분의 UI 개발은 사용자의 의도에 따른 화면의 변화를 의미화면의 변화는 80% 이상 CSS 로 처리가 가능

대규모 화면일수록 작업의 효율과 모듈화를 위해수준 높은 CSS 설계가 필수

Style 관련 Jquery 기능.CSS()

.addClass()

.removeClass()

Style=“” 형태로 적용됨.css(‘background’, ‘#fff’);.css({ background : ‘#fff’, marginTop: ’10px’});

Class=“” 형태로 적용됨

두 가지 방법으로 적용 가능 !

이벤트에 따른 Class 추가$(‘#button’).click(function() { $(this).addClass(‘active’);});

기본$(‘#button’).click(function() { if($(this).hasClass(‘active’)) { $(this).removeClass(‘active’); } else { $(this).addClass(‘active’); }});

토글

예제보기2예제보기1

다른 대상에 영향주기$('#button').click(function() { if($('body').hasClass('dark')) { $('body').removeClass('dark'); } else { $('body').addClass('dark'); }});

토글

실제사례예제보기

2. 기초 : 셀렉터 기반 사고하기

Selector 기반 사고란 ?

이벤트에 따른 Class& 상태 변화가 있을 때그에 대한 조건을 일일이 확인하지 않고Selector 에서 선처리 할 수 있도록 설계하는 사고방법

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 태그 선택

Form 요소를 이용한 UI 예제$('#delete').click(function() {

$('#list input:checked').closest('li').remove();});

li 태그 선택

예제보기

parent() 는 리뉴얼 하면서 DOM 이 끊길 수 있고parents() 는 복수로 적용될 수 있기 때문에반드시 closest() 를 사용

1. 심화 : DOM 조작하기

DOM 생성 파워레인져 !

.before().prepend()

.after().append()

.html()

한 방에 이해하는 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();

선택자의 내부

DOM 생성 예제$('#add').click(function() { var content = $('#field').val(); if(!content) { alert(' 내용을 입력하세요 .'); return false; } $('#list').append('<li>'+content+'</li>');});

input 태그를 이용한 필드추가

예제보기

하지만…새로 생성한 태그는 이벤트가 없다…

어째서…

bind 의 한계이벤트를 바인딩 하는 시점에 없는 태그는 적용되지 않는다 .

참고로 위의 내용은 파이어폭스 개발자도구

live 를 사용하면 된다 !

$('#list>li').click(function() { …… });

bind

$(document).on('click', '#list>li', function() { …… });

live

한 번만 선언하면 계속 적용된다 . 실수로 여러 번 선언했을 경우 여러 번 동작한다 .초기 로딩될 때 한 번만 사용하자 .

예제보기

2. 심화 : 모듈화의 첫 걸음

개발의 진화과정어떻게든 만든다 한 페이지에서 한 번만 작동

어찌어찌 해서두 번 작동하게 만든다다른 페이지에서 쓰려니소스를 통으로 복사한다

공통으로 사용할 수 있게모듈화를 했다조금 더 다듬어서라이브러리나 플러그인으로배포 !!!

모듈화의 첫 걸음1. ID 이외의 Selector 기반으로 작성2. Selector 가 일정 범위를 벗어나지 않음3. 자주 쓸 경우 자동 바인딩 , 가끔 사용할 경우

실행형으로 작성

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>

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 을 탐색

가끔 사용할 경우 실행형으로 작성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 파일에 넣고 필요할 때 호출

예제보기

이제 옵션도 설정하고 다시 잘 다듬어서제이쿼리 플러그인으로 배포해야지!

하지만 그 내용을 담으면이번 발표를 듣는 우리는…

대충 요런 기분 ?

이 발표가 끝났을 때딱 하나만 기억에 남았으면좋겠어요…

결국 UI 개발은이벤트가 발생했을 때

CSS 나 HTML 을 조작하는 것이전부라는 것을…

그리고 그 작업의 도우미가바로 Jquery 입니다 .

감사합니다정말로 끝 !