스터디 2주차-제이쿼리기초2
-
Upload
kim-sehwan -
Category
Education
-
view
184 -
download
5
Transcript of 스터디 2주차-제이쿼리기초2
Javascript & jQuery 실무제작 기초 스터디
2주차 - 제이쿼리 기초2 김세환([email protected]) / 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
오늘의 제이쿼리 기초가
끝났습니다수고하셨습니다!