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

2주차 - 제이쿼리 기초2 김세환(hidepink@naver.com) / 2014.11.30 (sun)

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

html() 은 뭐였죠?

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

append()

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

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

원본!

뒤에 추가!

prepend()

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

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

원본!

앞에 추가!

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

before()

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

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

가

나

다

라

after()

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

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

가

나

다

라

append/prepend vs

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

가

나

다

라

원본!

앞에 추가!

뒤에 추가!

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

대략 예상이 되시죠?

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

bo_table=s_jq_basic_4

CSS 조작하기

css()

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

CSS 속성값 읽기

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

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

• 출력값 예: 150px

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

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

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

CSS 속성값 쓰기

속성 한개 쓰기

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

속성 여러개 쓰기

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

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

bo_table=s_jq_basic_6

오늘의 제이쿼리 기초가

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