note

XML 파싱 본문

JavaScript/jQuery

XML 파싱

투한 2012. 3. 21. 10:10 








<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	div{
	margin:10px;
	border:3px Solid Black;
	border-radius:10px;
	float:left;
	width:120px; height:120px;
	text-align:center;
	}
</style>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
	//변수를 선언합니다.
	var xml = '';
	xml += '<friends>';
	xml += '    <friend>';
	xml += '        <name>연하진</name>';
	xml += '        <language>Ruby</language>';
	xml += '    </friend>';
	xml += '    <friend>';
	xml += '        <name>윤명월</name>';
	xml += '        <language>Basic</language>';
	xml += '    </friend>';
	xml += '    <friend>';
	xml += '        <name>윤하린</name>';
	xml += '        <language>C#</language>';
	xml += '    </friend>';
	xml += '</friends>';
	$(document).ready(function (){
		//변수를 선언합니다.
		var xmlDoc = $.parseXML(xml);
		$(xmlDoc).find('friend').each(function (index) {
			//변수를 선언합니다.
		var output='';
		output += '<div>';
		output += '  <h1>'+ $(this).find('name').text()+'</h1>';
		output += '  <p>'+ $(this).find('language').text()+'</p>';
		output += '</div>';
		
		//출력합니다.
		document.body.innerHTML += output;
		});
	});
</script>
</head>
<body>

</body>
</html>


Solid -> 입체감 없애기
border-radius -> 라운드의 정도
float -> 처음 시작되는 정렬 





저작자표시 비영리 변경금지 (새창열림)

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

removeClass()메서드  (0) 2012.03.21
addClass()메서드 / addClass() 메서드의 콜백함수  (0) 2012.03.21
is()메서드  (0) 2012.03.21
add()메서드  (0) 2012.03.21
eq()메서드  (0) 2012.03.21
'JavaScript/jQuery' Related Articles more