웹동네 JSJQ 실무기초 스터디 1주차-제이쿼리기초1 2014.11.23(Sun)

1. Javascript & jQuery
실무제작 기초 스터디
1주차 - 제이쿼리 기초 1
김세환(hidepink@naver.com) / 2014.11.23 (sun)

2. 제이쿼리가
할 수 있는 일은?

3. jQuery가 하는일
• HTML 문서안의 요소를 찾는다
• 찾은 요소를 조작한다

4. 예
• 모든 <div>의 배경색깔을 #FF0000;으로 만들어라!
• $(“div”).css({‘background’: ‘#FF0000’});

5. 제이쿼리는 이게 다예요…
더 있을지도 모르지만 우선…

6. 아무튼
제이쿼리는 뭔가를 찾아서
일을 시킵니다

7. 바꿔말하면
뭔가를 못 찾으면
아무일도 못하는 바보입니다

8. 찾는법,일시키는법
두 가지만 배우면 되므로
찾는법이 되게 중요해요

9. 찾는법 기초 (Selector)

10. 셀렉터란?
• HTML 문서안의 요소를 찾는 방법을 말합니다.
아래의 것들을 주로 찾게 되죠
• 태그(body,div,span,a,etc…)
• 아이디(id=‘footer’)
• 클래스(class=‘container’)

11. 태그
• $( “a” )
<div id=“container”>
<a class=“btn” href=“”>
클릭
</a>
<div class=“playerName”>
강백호
</div>
</div>
<div id=“footer”>
<a class=“btn” href=“”>
<span class=“name”>저도 클릭</span>
</a>
</div>

12. 아이디
• $( “#container” )
<div id=“container”>
<a class=“btn” href=“”>
클릭
</a>
<div class=“playerName”>
강백호
</div>
</div>
<div id=“footer”>
<a class=“btn” href=“”>
<span class=“name”>저도 클릭</span>
</a>
</div>

13. 클래스
• $( “.btn” )
<div id=“container”>
<a class=“btn” href=“”>
클릭
</a>
<div class=“playerName”>
강백호
</div>
</div>
<div id=“footer”>
<a class=“btn” href=“”>
<span class=“name”>저도 클릭</span>
</a>
</div>

14. 클래스의 경우처럼 여러개가
존재할 경우 제이쿼리는
여러개 전부를 선택합니다.

15. 여러개 중 정확히 선택하려면…
자식 요소를 선택할 수 있어요
• $( “#container .btn” )
• $( “.btn .name” )
<div id=“container”>
<a class=“btn” href=“”>
클릭
</a>
<div class=“playerName”>
강백호
</div>
</div>
<div id=“footer”>
<a class=“btn” href=“”>
<span class=“name”>저도 클릭</span>
</a>
</div>

16. 이 밖에도
셀렉터의 종류는 매우 많습니다
• 우선 자식 요소 선택하는 방법을 많이 연습해두세요
• 나머지 방법은 나중에 배워도 괜찮습니다

17. 이제 일을 시켜봅시다
addClass / removeClass / html

18. addClass() / removeClass()
• 선택한 요소에 클래스이름을 추가 / 삭제 합니다
• 그래서 css 파일에 미리 정의해놓은 클래스들을
켜고 끄는 것 처럼 썼다가 안썼다가 할 수 있습니다.

19. addClass() / removeClass()
• (예) http://jsfiddle.net/hidepink/2tLy88ok/1/
• $( “.container” ).addClass(“iamRedBackground”);
• $( “.container” ).removeClass(“iamBlueBackground”);

20. html()
• 선택한 태그 안에 HTML 내용을 덮어씌운다
• 예) $(“#container”).html(“<h1>안녕하세요!</h1>”);
• http://jsfiddle.net/hidepink/2tLy88ok/1/

21. 테스트
소셜스터디 제이쿼리 노드찾기 1부
소셜스터디 제이쿼리 노드찾기 2부

22. 아…아직
이러고 계신거 아니죠?
오늘의 제이쿼리 기초가 끝났습니다.