21
Javascript & jQuery 실무제작 기초 스터디 2주차 - 제이쿼리 기초2 김세환([email protected]) / 2014.11.30 (sun)

스터디 2주차-제이쿼리기초2

Embed Size (px)

Citation preview

Page 1: 스터디 2주차-제이쿼리기초2

Javascript & jQuery 실무제작 기초 스터디

2주차 - 제이쿼리 기초2 김세환([email protected]) / 2014.11.30 (sun)

Page 2: 스터디 2주차-제이쿼리기초2

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

Page 3: 스터디 2주차-제이쿼리기초2

html() 은 뭐였죠?

• 싹 지우고 새로 쓰기원본!새로운 내용!!

Page 4: 스터디 2주차-제이쿼리기초2

append()

• 새로운 노드나 내용을 요소 뒤에 추가로 붙여 쓴다

• $(“.container”).append(“탕수육 짬뽕 추가요!”);

원본!

뒤에 추가!

Page 5: 스터디 2주차-제이쿼리기초2

prepend()

• 새로운 노드나 내용을 요소 앞에 추가로 붙여 쓴다

• $(“.container”).prepend(“1순위 앞에 0순위!”);

원본!

앞에 추가!

Page 6: 스터디 2주차-제이쿼리기초2

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

Page 7: 스터디 2주차-제이쿼리기초2

before()

• 선택한 요소의 바로 전에 끼워 넣는다.

• $(“.container”).before(“라 전에는 다!”);

Page 8: 스터디 2주차-제이쿼리기초2

after()

• 선택한 요소의 바로 다음에 끼워 넣는다.

• $(“.container”).before(“나 다음에는 다!”);

Page 9: 스터디 2주차-제이쿼리기초2

append/prepend vs

before/aftera/p 는 선택한 요소 내부에 추가 b/a는 선택한 요소 외부에 추가

원본!

앞에 추가!

뒤에 추가!

Page 10: 스터디 2주차-제이쿼리기초2

추가하면 삭제도 되겠죠?empty() , remove() 등을 사용합니다.

대략 예상이 되시죠?

Page 11: 스터디 2주차-제이쿼리기초2

연습하기http://www.webdongne.com/bbs/bbs/board.php?

bo_table=s_jq_basic_4

Page 12: 스터디 2주차-제이쿼리기초2

CSS 조작하기

Page 13: 스터디 2주차-제이쿼리기초2

css()

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

Page 14: 스터디 2주차-제이쿼리기초2

CSS 속성값 읽기

Page 15: 스터디 2주차-제이쿼리기초2

속성값을 읽어올수 있습니다

• $(“.container”).css(“left”);

• 출력값 예: 150px

Page 16: 스터디 2주차-제이쿼리기초2

하지만!!! 픽셀값이 px 로 나옵니다!

숫자만 쓰고 싶으면 반드시 parseInt로 감싸서 써주세요 문자를 날려버립니다

parseInt( $(“.container”).css(“left”) );

Page 17: 스터디 2주차-제이쿼리기초2

CSS 속성값 쓰기

Page 18: 스터디 2주차-제이쿼리기초2

속성 한개 쓰기

• $(“.container”).css(“left” , “150px”);

Page 19: 스터디 2주차-제이쿼리기초2

속성 여러개 쓰기

• $(“.container”).css({“left”:“150px”, “width”:”350px"});

Page 20: 스터디 2주차-제이쿼리기초2

연습하기http://www.webdongne.com/bbs/bbs/board.php?

bo_table=s_jq_basic_6

Page 21: 스터디 2주차-제이쿼리기초2

오늘의 제이쿼리 기초가

끝났습니다수고하셨습니다!