KITRI/JAVASCRIPT

JavaScript 의 이해 - [jQuery] DOM ν•¨μˆ˜(1)

λ˜νš¨λ‹ˆ 2020. 7. 21. 15:54

https://api.jquery.com/category/manipulation/

 

Manipulation | jQuery API Documentation

Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, to the end of each element in the set of

api.jquery.com

 

 

01.DOM.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery - DOM ν•¨μˆ˜</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
	$(function(){
		var arr = new Array();
		
		var strHTML = $('#first').html();
		var strText = $('#first > p').html();
		
		arr.push(strHTML);
		arr.push(strText);
		
		alert(arr.join("\n"));
		
		var str="<h3>μ•ˆλ…•ν•˜μ„Έμš”.</h3>";
		$('#second').text(str);
		$('#third').html(str);
		
	});
</script>
<body>
	<div id="first">
		μ•ˆλ…•ν•˜μ„Έμš”. <br/>
		<p> 
			λ§›μ˜ ν˜μ‹ μ„ μ΄λ£©ν•˜κΈ° μœ„ν•œ 
		 	우리 볡채손 λ§Œλ‘μ˜ λ…Έλ ₯은 계속 λ©λ‹ˆλ‹€. <br/>
			ν•œκ²°κ°™μ€ 맛과 μ„œλΉ„μŠ€λ‘œ μ—¬λŸ¬λΆ„ ν•œλΆ„ ν•œλΆ„ λͺ¨μ‹œκ³  μžˆμŠ΅λ‹ˆλ‹€. 
		</p>
	</div>
	
	<div id="second"></div>
	<div id="third"></div>
</body>
</html>

 

02.DOM.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery - DOM ν•¨μˆ˜</title>
</head>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
	//DOM : 생성, μ‚­μ œ, μ‚½μž…, μˆ˜μ •
	$(function() {
		$('#first > p').append("μΌλ“±ν’ˆμ§ˆ μΌλ“±μ„œλΉ„μŠ€ 볡제");
		$('#first > p').append("<h3> μΌλ“±ν’ˆμ§ˆ μΌλ“±μ„œλΉ„μŠ€ 볡제 </h3>");

		// μžμ‹νƒœκ·Έμ˜ 맨 μ•„λž˜μ— λΆ™λŠ”λ‹€.
		$('#first > ul').append("<li style='color:red'>μž‘μ±„λ§Œλ‘</li>");
		// μžμ‹νƒœκ·Έμ˜ 맨 μœ„μ— λΆ™λŠ”λ‹€.
		$('#first > ul').prepend("<li style='color:blue'>μ°λ§Œλ‘</li>");
		
		//ulνƒœκ·Έμ˜ λ™μƒμœΌλ‘œ λΆ™λŠ”λ‹€.
		$('#first > ul').after("<h2>μˆœλŒ€</h2>");
		//ulνƒœκ·Έμ˜ ν˜•μœΌλ‘œ λΆ™λŠ”λ‹€.
		$('#first > ul').before("<h3>떑볢이</h3>");
		
		$("<h3> μΌλ“±ν’ˆμ§ˆ μΌλ“±μ„œλΉ„μŠ€ 볡제 </h3>").appendTo('#first > p');
		$("<h3> μΌλ“±ν’ˆμ§ˆ μΌλ“±μ„œλΉ„μŠ€ 볡제 </h3>").prependTo('#first > p');
		
		$('<h2> μˆœλŒ€2 </h2>').insertAfter("#first > ul");
		$('<h2> 떑볢이2 </h2>').insertBefore("#first > ul");
	});
</script>
<body>
	<div id="first">
		μ•ˆλ…•ν•˜μ„Έμš”. <br/>
		<p> 
			λ§›μ˜ ν˜μ‹ μ„ μ΄λ£©ν•˜κΈ° μœ„ν•œ 
		 	우리 볡채손 λ§Œλ‘μ˜ λ…Έλ ₯은 계속 λ©λ‹ˆλ‹€. <br/>
			ν•œκ²°κ°™μ€ 맛과 μ„œλΉ„μŠ€λ‘œ μ—¬λŸ¬λΆ„ ν•œλΆ„ ν•œλΆ„ λͺ¨μ‹œκ³  μžˆμŠ΅λ‹ˆλ‹€. 
		</p>
		
		<b>λ§Œλ‘ 메뉴</b>
		<ul>
			<li>λ¬Όλ§Œλ‘</li>
			<li>κ΅°λ§Œλ‘</li>
		</ul>
	</div>
</body>
</html>

 

03.DOM.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery -  DOM ν•¨μˆ˜</title>
</head>
<style type="text/css">
	img{
		width:250px;
		height:200px;
		margin:5px;
	}
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
	$(function() {
		$('#btn').click(function(){
			//λžœλ€ν•¨μˆ˜ μ‚¬μš©ν•΄μ„œ 1~3κΉŒμ§€ λ‚˜μ˜€κ²Œλ”
			var n = Math.ceil(Math.random()*3);
			$('.img_may').append("<img src='../img/nature_"+ n +".jpg'/>");
		});		
	});
</script>
<body>	
	<a href="#" id="btn">클릭</a>
	<div class="img_may"></div>
</body>
</html>

 

 

04.DOM.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery - DOM ν•¨μˆ˜</title>
</head>
<style type="text/css">
	img{
		width:250px;
		height:200px;
		margin:5px;
	}
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
	$(function(){
		//이미지 ν΄λ¦­μ‹œλ§ˆλ‹€ 맨 λ’€μ˜ 이미지가 μ•žμœΌλ‘œ λΆ™λŠ”λ‹€.
		$('img').click(function(){
			$('.img_may').prepend($('img:last'));
		});
	});
</script>
<body>
	<div class="img_may">
		<img src="../img/nature_1.jpg"/>
		<img src="../img/nature_2.jpg"/>
		<img src="../img/nature_3.jpg"/>
	</div>
</body>
</html>

 

05.DOM.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery - DOM ν•¨μˆ˜</title>
</head>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$('#content a:first').click(function(){
			$('h2').replaceWith("<p style='color:red;'>λ΄„ 여름 μΆ•μ œ μ•ˆλ‚΄</p>");
			$('.theme_4 > li').remove();
			$('<p style="color:blue;">μΈμ²œμ†‘λ„</p>').replaceAll($('.theme b:eq(1)'));
		});
	});
</script>
<body>
	<div>
		<ul id="content">
			<li><a href="#">μ•¨λŸ¬λ¨ΌνŠΈ ꡐ체</a></li>
			<li><a href="#">쀀비쀑인 μΆ•μ œ</a></li>
		</ul>
	</div>
	
	<h2>μ£Όμš”μ§€μ—­λ³„ μΆ•μ œ μ •λ³΄μ•ˆλ‚΄</h2>
	<ul class="theme">
		<li>
			<b>μ„œμšΈλ° 근ꡐ지역</b>
			<ul class="theme_1">
				<li>κ°•ν™” κ³ λ €μ‚° μ§„λ‹¬λž˜ μΆ•μ œ</li>
				<li>κ³ μ–‘ ꡭ제 꽃 λ°•λžŒνšŒ</li>
				<li>μ—λ²„λžœλ“œ νŠ€λ¦½μΆ•μ œ</li>
				<li>μ—°μ²œ 전곑리 ꡬ석기 μΆ•μ œ</li>
			</ul>
		</li>
		
		<li>
			<b>강원도</b>
			<ul class="theme_2">
				<li>κΉ€μœ μ • λ¬Έν•™μ œ</li>
				<li>좘천 λ§ˆμž„ μΆ•μ œ</li>
			</ul>
		</li>
		
		<li>
			<b>좩청도</b>
			<ul class="theme_3">
				<li>λ³΄λ Ήλ¨Έλ“œμΆ•μ œ</li>
				<li>νƒœμ•ˆ 튜울립 꽃 μΆ•μ œ</li>
			</ul>
		</li>
		
		<li>
			<b>전라도</b>
			<ul class="theme_4">
				<li>진도 μ‹ λΉ„μ˜ λ°”λ‹·κΈΈ μΆ•μ œ</li>
				<li>순천만 κ΅­μ œμ •μ› λ°•λžŒνšŒ</li>
				<li>함평 λ‚˜λΉ„ μΆ•μ œ</li>
			</ul>
		</li>
	</ul>
</body>
</html>

 

06.DOM.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery - DOM 탐색 λ©”μ†Œλ“œ</title>
</head>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
	$(function(){
		var arr = new Array();
		$('#first').children().each(function (i, e){
			//arr.push(i + ":" + e.tagName + " " + $(e).text());
		});
		
		$('#first').children('span').each(function(i, e){
			//arr.push(i + ":" + e.tagName + " " + $(e).text());
		});
		
		// 0:SPAN μˆ˜λ°• , 1:SPAN λ©”λ‘ 
		$('#first div').children('span').each(function(i, e){
			//arr.push(i + ":" + e.tagName + " " + $(e).text());
		});
		
		// 0:B 아메리카노 컀피
		$('#first div').children('b').each(function(i, e){
			//arr.push(i + ":" + e.tagName + " " + $(e).text());
		});
		
		// 0:SPAN μˆ˜λ°• , 1:SPAN λ©”λ‘ , 2:B 아메리카노 컀피
		$('#first').children('div').children().each(function(i, e){
			arr.push(i + ":" + e.tagName + " " + $(e).text());
		});
		alert(arr.join("\n"));
	});
</script>
<body>
	<div>사과</div>
	
	<div id="first">
		<span>λ°”λ‚˜λ‚˜</span>
		<span>λ”ΈκΈ°</span>
		
		<div>
			<span>μˆ˜λ°•</span>
			<span>λ©”λ‘ </span>
		</div>
		
		<div>
			<b>아메리카노 컀피</b>
		</div>
	</div>
</body>
</html>
λ°˜μ‘ν˜•