웹동네 스터디 2주차 11.30

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

2. 요소 앞이나 뒤에
요소 추가하기

3. html() 은 뭐였죠?
• 싹 지우고 새로 쓰기
새로원운본 내!용!!

4. append()
• 새로운 노드나 내용을 요소
뒤에 추가로 붙여 쓴다
• $(“.container”).append(“탕
수육 짬뽕 추가요!”);
원본!
뒤에 추가!

5. prepend()
• 새로운 노드나 내용을 요소
앞에 추가로 붙여 쓴다
• $(“.container”).prepend(“1
순위 앞에 0순위!”);
앞에 추가!
원본!

6. before , after 는 뭘까요?
선택한 요소의 바로 앞 , 바로 뒤에 끼워 넣기 입니다.

7. before()
• 선택한 요소의 바로 전에 끼
워 넣는다.
• $(“.container”).before(“라
전에는 다!”);
가
나
다
라

8. after()
• 선택한 요소의 바로 다음에
끼워 넣는다.
• $(“.container”).before(“나
다음에는 다!”);
가
나
다
라

9. append/prepend
vs
before/after
a/p 는 선택한 요소 내부에 추가
b/a는 선택한 요소 외부에 추가
가
나
다
라
앞에 추가!
원본!
뒤에 추가!

10. 추가하면 삭제도 되겠죠?
empty() , remove() 등을 사용합니다.
대략 예상이 되시죠?

11. 연습하기
http://www.webdongne.com/bbs/bbs/board.php?
bo_table=s_jq_basic_4

12. CSS 조작하기

13. css()
• 선택한 요소의 css 속성을 변경하거나 추가할때 사용

14. CSS 속성값 읽기

15. 속성값을 읽어올수 있습니다
• $(“.container”).css(“left”);
• 출력값 예: 150px

16. 하지만!!!
픽셀값이 px 로 나옵니다!
숫자만 쓰고 싶으면 반드시 parseInt로 감싸서 써주세요
문자를 날려버립니다
parseInt( $(“.container”).css(“left”) );

17. CSS 속성값 쓰기

18. 속성 한개 쓰기
• $(“.container”).css(“left” , “150px”);

19. 속성 여러개 쓰기
• $(“.container”).css({“left”:“150px”, “width”:”350px"});

20. 연습하기
http://www.webdongne.com/bbs/bbs/board.php?
bo_table=s_jq_basic_6

21. 오늘의 제이쿼리
기초가
끝났습니다
수고하셨습니다!