<--페이지에 콘텐츠 추가-->
-페이지에 콘텐츠를 다루는 함수를 알아보자!
우리가 사용할 예제 코드를 봅시다.
<body>
<div id = "header">
<div class = "Message">
<h2>Error Message!</h2>
</div>
</div>
</body>
▲이번 콘텐츠 추가에 우려먹을 코드
<-- .html() -->
<script type="text/javascript">
$(document).ready(function(){
alert($('.Message').html());
$('.Message').html('<p>Wrong!!!</p>');
});// 끝
</script>
#alert부분 처럼 사용하면 특정 HTML 요소 내부의 HTML을 복사해 다른 HTML요소에 전달이 가능합니다
#두번째 처럼 문자열을 인수로 줄 경우에는 문자열이 치환 됩니다.
▲처음은 ErrorMessage라는 경고창이 뜨지만 확인을 누르면 문자열이 Wrong!!!으로 바뀐다.
<-- .text() -->
<script type="text/javascript">
$(document).ready(function(){
$(".Message h2").text("Hello World");
});// 끝
</script>
#문자열을 " Hello Message "로 치환해 줍니다.
▲Error Message 가 Hello World로 치환된 것을 볼 수 있습니다.
<-- .append() & prepend() -->
<script type="text/javascript">
$(document).ready(function(){
$(".Message").append("<p>append Error</p>"); $(".Message").prepend("<p>prepend Error</p>"); });// 끝
</script>
#HTML요소에 HTML을 추가할 떄 사용합니다.
▲위를 보면 prepend는 html 상단에 추가되고, append는 하단에 추가되는 것을 볼 수 있다!
<-- .before() & .after() -->
-선택한 HTML요소 바깥에 HTML을 추가하고 싶을 때 사용하는 명령어.
-befoer은 HTML요소 앞에 after은 뒤에 추가한다.
Ex)
Id를 받는 폼이 있을 때 사용자가 Id를 입력 안했다면, "사용자 이름 입력"이라는 문구를 띄울 떄 사용한다.
<-- .remove() & .replace() -->
<script type="text/javascript">
$(document).ready(function(){
$('div.Message').remove();
$('#header').append('<div class = "New"><p>New Div</p></div>');
});// 끝
</script>
#remove로 삭제해보았습니다..
#replace는 잘 몰라서 .... 나중에 사용해 봐야것지..
▲삭제 된 뒤 새로운 DIV를 추가해 보았다
<-- .addclass() & .removeclass() -->
<script type="text/javascript">
$(document).ready(function(){
$('#header .Message h2').addClass('add_h2');
});// 끝
</script>
#addClas()로 h2에 class를 추가시켜 보았다.
<script type="text/javascript">
$(document).ready(function(){
$('#header .Message h2').addClass('add_h2');
$('#header .Message .add_h2').removeClass('add_h2');
});// 끝
</script>
#removeClass를 사용하여 add_h2를 지워보았다.
<-- .toggleClass() -->
<title>Meta tag</title>
<script type="text/javascript">
$(function(){
$('#content').click(function(){
$("body").toggleClass("change_body");
});
});
</script>
<style type="text/css">
body{
width: 100px;
height: 100px;
background-color: blue;
}
.change_body{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<input type = "button" value="Button" id = "content">
</body>
▲toogle클래스를 사용하여 class를 생성했다가 버튼을 누르면 삭제되는 예제.
△toogle은 class가 없으면 class를 생성 있으면 삭제하는 역할을 한다.
'Programming > Java Script + jQuery' 카테고리의 다른 글
jQuery 이벤트 사용하기! (0) | 2015.12.16 |
---|---|
jQuery CSS 속성 읽고 바꾸기 & 익명함수 (1) | 2015.12.14 |
jQuery 선택자 & 필터 (0) | 2015.12.11 |
jQuery 시작! (0) | 2015.12.09 |