<--페이지에 콘텐츠 추가-->

-페이지에 콘텐츠를 다루는 함수를 알아보자!

우리가 사용할 예제 코드를 봅시다.


<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
블로그 이미지

KimMinSung

,