JavaScript 의 이해 - [jQuery] DOM 함수(1)

Today

Total

Recent Comments

Recent Posts

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

관리 메뉴

💻

JavaScript 의 이해 - [jQuery] DOM 함수(1) 본문

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>

'KITRI > JAVASCRIPT' 카테고리의 다른 글

JavaScript 의 이해 - [jQuery] Theme (0)	2020.07.22
JavaScript 의 이해 - [jQuery] DOM 함수(2) (0)	2020.07.22
JavaScript 의 이해 - [jQuery] Selector(2) : 필터 (0)	2020.07.21
JavaScript 의 이해 - [jQuery] Selector(1) : 기본, 상속(자식/형제) (0)	2020.07.20
JavaScript 의 이해 - [AJAX] Kakao 지도 Javscript API 이용해서 지도그리기 (0)	2020.07.20

'KITRI/JAVASCRIPT' Related Articles

Comments

💻

JavaScript 의 이해 - [jQuery] DOM 함수(1) 본문

JavaScript 의 이해 - [jQuery] DOM 함수(1)

'KITRI > JAVASCRIPT' 카테고리의 다른 글

티스토리툴바