2013/11/26 - [Web/jQuery] - 제이쿼리(jQuery) 문서 객체 조작 - #1


1. 문서 객체 내부 검사

- 기존의 자바스크립트에서 innerHTML, textContent 속성과 관련된 html() 메서드와 text() 메서드

- HTML 태그 인식 여부의 차이점을 가짐


 메서드명 

 설명 

 html() 

 문서 객체 내부의 글자와 관련된 모든 기능을 수행(HTML 태그 인식) 

 text() 

 문서 객체 내부의 글자와 관련된 모든 기능을 수행 


<script src="jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function() { var html = $('h1').html(); alert(html); var text = $('h1').text(); alert(text); }); </script> </head> <body> <h1>Header0</h1> <h1>Header1</h1> <h1>Header2</h1> <h1>Header3</h1> <h1>Header4</h1> <h1>Header5</h1> </body>






2. 문서 객체 내부 추가

- 내부에 내용물을 추가하고 싶을 때 html() 메서드와 text() 메서드를 사용

- $(selector).html(value);

- $(selector).text(valeu);

- $(selector).html(function(index, html) {} );

- $(selector).text(function(index, html) {} );


<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('div').html('<h1>$().html() Method</h1>');
	});
</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>



<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('div').text('<h1>$().thml() Method</h1>');
	});
</script>



<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('h1').html(function(index, html) {
			return ' ▶ ' + html + '-' + index + ' ◀ ';
		});
	});
</script>
</head>
<body>
	<h1>Header</h1>
	<h1>Header</h1>
	<h1>Header</h1>
</body>




3. 문서 객체 제거

- 문서 객체를 제거할 때는 remove() 메서드와, empty() 메서드를 사용


 메서드명 

 설명 

 remove() 

 문서 객체를 제거 

 empty() 

 문서 객체 내부를 비움 


<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('h1').first().remove();
	});
</script>
</head>
<body>
	<div>
		<h1>Header0</h1>
		<h1>Header1</h1>
	</div>
</body>


<script src="jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div').empty(); }); </script>





4. 문서 객체 생성

- jQuery() 메서드는 선택자로 문서 객체를 선택하는 기능 이외에도 문서 객체를 생성하는 기능을 함

- 매개변수에 HTML 태그를 문자열로 넣음

- 생성한 문서 객체를 body 태그에 추가하려면 appendTo()메서드를 사용


<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('<h1></h1>').html('Header1').css('color', 'red').appendTo('body');
		$('<h1>Header2</h1>').css('color', 'blue').appendTo('body');
		
		$('<img />').attr('src', 'desert.jpg').attr('width', 400).appendTo('body');
		$('<img />', { src: 'tulip.jpg', width: 400 }).appendTo('body');
	});
</script>
</head>
<body>
</body>




5. 문서 객체 삽입

- 문서 객체에 문서 객체를 추가하는 메서드는 앞 뒤 순서에 따라 두 가지 형태가 존재


 메서드명

 설명 

 $(A).appendTo(B) 

 A를 B의 뒷부분에 추가 

 $(A).prependTo(B) 

 A를 B의 앞부분의 추가 

 $(A).insertAfter(B) 

 A를 B의 뒤에 추가 

 $(A).insertBefore(B) 

 A를 B의 앞에 추가 

 $(A).append(B)

 B를 A의 뒷부분에 추가 

 $(A).prepend(B) 

 B를 A의 앞부분에 추가 

 $(A).after(B) 

 B를 A의 뒤에 추가 

 $(A).before(B) 

 B를 A의 앞에 추가 



<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	 	var h1 = '<h1>Header1</h1>'
		var h2 = '<h2>Header2</h2>'
		
		$('body').append(h1, h2, h1);
		
		var content = [
			{ name: '갤럭시노트3', manufacturer: '삼성' },
			{ name: 'G2', manufacturer: '엘지' },
		];
		
		$('div').append(function(index) {
			var item = content[index];
			var output = '';
			
			output += '<h1>' + item.name + '</h1>';
			output += '<h2>' + item.manufacturer + '</h2>';
			
			return output;
		});
	});
</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>




6. 문서 객체 이동

- 기존 문서 객체를 선택하고 문서 객체 삽입 메서드를 사용하여 다른 곳으로 이동


<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('img').css('width', 100);
		
		setInterval(function() {
			$('img').first().appendTo('body');
		}, 1000);
	});
</script>
</head>
<body>
	<img src="chrysanthemum.jpg" />
	<img src="desert.jpg" />
	<img src="hydrangea.jpg" />
	<img src="jellyfish.jpg" />
	<img src="lighthouse.jpg" />
	<img src="penguin.jpg" />
	<img src="tulip.jpg" />
</body>





7. 문서 객체 복제

- 문서 객체를 복제해서 추가할 때는 clone() 메서드를 사용

- $(selector).clone()

- $(selector).clone(Boolean dataAndEvents)

- $(selector).clone(Boolean dataAndEvents, Boolean deepDataAndEvents)


<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('div').append($('h1').clone());
	});
</script>
</head>
<body>
	<h1>Header</h1>
	<hr />
	<div></div>
	<hr />
</body>


'Web > jQuery' 카테고리의 다른 글

제이쿼리(jQuery) 문서 객체 조작 - #1  (0) 2013.11.26
제이쿼리(jQuery) 선택자 - #2  (0) 2013.11.26
제이쿼리(jQuery) 선택자 - #1  (2) 2013.11.26
제이쿼리(jQuery) 기본  (0) 2013.11.25

+ Recent posts