๐Ÿ’ป

JavaScript ์˜ ์ดํ•ด - [jQuery] DOM ํ•จ์ˆ˜(2) ๋ณธ๋ฌธ

KITRI/JAVASCRIPT

JavaScript ์˜ ์ดํ•ด - [jQuery] DOM ํ•จ์ˆ˜(2)

๋˜ํšจ๋‹ˆ 2020. 7. 22. 10:01

 

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

 

Traversing | jQuery API Documentation

Create a new jQuery object with elements added to the set of matched elements. Add the previous set of elements on the stack to the current set, optionally filtered by a selector. Add the previous set of elements on the stack to the current set. Get the ch

api.jquery.com

 

 

07.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(){
		$('#coffee').next().css('color', 'pink');
		$('#coffee').prev().css('color', 'pink');
		
		$('#strawberry').nextAll().css('color', 'red');
		$('#strawberry').prevAll().css('color', 'blue');
		
		$('#citrus').sblings().css('color', 'yellow');
		$('#citrus').sblings('#tomato').css('fontSize','20px');
	});
</script>
</head>
<body>	
	<h3>๋งˆํ‚ค์•„๋˜</h3>
	<h3>์•„๋ฉ”๋ฆฌ์นด๋…ธ</h3>
	<h3 id="coffee" style="color:blue">์นดํ‘ธ์น˜๋…ธ</h3>
	<h3>๊นŒํŽ˜๋ผ๋–ผ</h3>
	<h3>๋ชจ์นด</h3>
	<br/><br/><br/>

	<div id="first">
		<div>์‚ฌ๊ณผ</div>
		<div>๋ฐ”๋‚˜๋‚˜</div>
		<div id="strawberry">๋”ธ๊ธฐ</div>
		<div>์ˆ˜๋ฐ•</div>
		<div id="melon">๋ฉ”๋ก </div>
	</div>
	<br/><br/><br/>
			
    <div id="second">
    	<div>ํฌ๋„</div>
    	<div id="citrus">๊ทค</div>
    	<div>๋ฉ”๋ก </div>
    	<div id="tomato">ํ† ๋งˆํ† </div>
	</div>
</body>
</html>

 

08.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();
		//๋ถ€๋ชจ
		$('#melon').parent().each(function(i, e){
			//arr.push(i + " " + e.tagName + " " + $(e).text());
		});
		
		//์กฐ์ƒ
		//0 DIV 1 DIV 2 BODY 3 HTML
		$('#melon').parents().each(function(i, e){
			arr.push(i + " " + e.tagName);
		});
		
		alert(arr.join("\n"));
	});
</script>
<body>	
	<div id="first">
		<span>์‚ฌ๊ณผ</span>
		<span>๋ฐ”๋‚˜๋‚˜</span>
		<span id="strawberry">๋”ธ๊ธฐ</span>
		
		<div>
			<span>์ˆ˜๋ฐ•</span>
			<span id="melon">๋ฉ”๋ก </span>
		</div>
		
		<div>์•„๋ฉ”๋ฆฌ์นด๋…ธ ์ปคํ”ผ</div>
	</div>
</body>
</html>

 

 

09.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(){
		//$('#main p:first') $('.middle > p.first')
		
		$('#main p').first().css('color', 'pink');
		$('#main').children('div').first().css('color', 'blue');
		
		$('#main p').last().css('color', 'red');
		$('#main p').eq(2).css('color', 'yellow');
		
		$('#main p').find('p').eq(3).css('color', 'green');
	});
</script>
<body>
	<div id="main">
		<div class="middle">DIV</div>
		<p>์‚ฌ๊ณผ</p>
		<p>๋ฐ”๋‚˜๋‚˜</p>
		<p>๋”ธ๊ธฐ</p>
		<p>๋ฉ”๋ก </p>
		
		<div id="sub">
			<p>์•„๋ฉ”๋ฆฌ์นด๋…ธ</p>
		</div>
	</div>
</body>
</html>
๋ฐ˜์‘ํ˜•

'KITRI > JAVASCRIPT' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

JavaScript ์˜ ์ดํ•ด - [jQuery] Effects : Hide, Toggle, Slide, Fade  (0) 2020.07.22
JavaScript ์˜ ์ดํ•ด - [jQuery] Theme  (0) 2020.07.22
JavaScript ์˜ ์ดํ•ด - [jQuery] DOM ํ•จ์ˆ˜(1)  (0) 2020.07.21
JavaScript ์˜ ์ดํ•ด - [jQuery] Selector(2) : ํ•„ํ„ฐ  (0) 2020.07.21
JavaScript ์˜ ์ดํ•ด - [jQuery] Selector(1) : ๊ธฐ๋ณธ, ์ƒ์†(์ž์‹/ํ˜•์ œ)  (0) 2020.07.20
'KITRI/JAVASCRIPT' Related Articles more
Comments