[jQuery] DOM

최은서·2023년 11월 10일

jQuery

목록 보기

2/5

1. attr

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	//하나의 속성을 제어
		  //속성 셋팅(속성,속성값)
	//$('img').attr('width',100);
	
	//복수의 속성을 제어
	//$('img').attr('width',150).attr('height',150);
	//$('img').attr({width:200,height:200}); //(key,value) 쌍으로 간단하게 표기
	
	//하나의 속성을 제어, 각각의 태그에 다른 값 설정
	/* 
	$('img').attr('width',function(index){
		return (index + 1) * 100;
	}); 
	*/
	
	//복수의 속성을 제어, 각각의 태그에 다른 값 설정
	$('img').attr({width:function(index){
					return (index + 1) * 100;
				},height:function(index){
					return (index + 1) * 100;
				}
	});
});
</script>
</head>
<body>
	<img src="../files/blue.jpg">
	<img src="../files/flower.jpg">
	<img src="../files/winter.jpg">
</body>
</html>

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	//3초 후에 img 태그의 src 속성값 읽기
	setTimeout(function(){
		let src = $('img').attr('src'); //img 태그의 src 속성의 값을 반환
		alert(src);
	},3000);
});
</script>
</head>
<body>
	<img src="../files/blue.jpg">
</body>
</html>

2. removeAttr

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	//3초 후에 매개변수로 전달된 함수 실행
	setTimeout(function(){
		$('h1').removeAttr('align'); //속성 제거
	},3000);
});
</script>
</head>
<body>
	<h1 align="center">Header-0</h1>
	<h1>Header-1</h1>
	<h1>Header-2</h1>
</body>
</html>

3. css

<title>jQuery</title>
<style type="text/css">
.first{
	color:red;
}
.second{
	color:pink;
}
.third{
	color:orange;
}
</style>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	let color = $('h1').css('color'); //스타일의 속성값을 반환, h1 3개의 태그에 모두 접근 but 가장 위에 있는 정보만 반환
	alert(color);
});
</script>
</head>
<body>
	<h1 class="first">Header-0</h1>
	<h1 class="second">Header-1</h1>
	<h1 class="third">Header-2</h1>
</body>
</html>

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	//h1 태그에 일괄적으로 스타일 부여
	//$('h1').css('color','red');
	
	const color = ['red','yellow','purple'];
	const background = ['gray','pink','yellow'];
	
	//h1 태그에 서로 다른 스타일 부여
	/*
	$('h1').css('color',function(index){
		return color[index];
	});
	*/
	
	//h1 태그에 복수의 스타일 적용
	$('h1').css({
		color:function(index){
			return color[index];
		},
		backgroundColor:function(index){
			return background[index];
		}
	});
});
</script>
</head>
<body>
	<h1>Header-0</h1>
	<h1>Header-1</h1>
	<h1>Header-2</h1>
</body>
</html>

4. prop

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	//prop() : 선택한 요소의 속성을 반환/생성/변환
	$('#st_1').prop('title','단락 태그');
	//태그의 내용을 제어, HTML 태그를 허용하지 않고 text로 처리
	$('txt1').text($('#st_1').prop('title')); //title 속성의 값 반환
	$('txt2').text($('#st_1').prop('tagName')); //태그명을 반환
	//select 태그의 선택한 option의 index 반환
	$('txt3').text($('#sel').prop('selectedIndex'));
});
</script>
</head>
<body>
	<p id="st_1">내용1</p>
	<p id="txt1"></p>
	<p id="txt2"></p>
	<select id="sel">
		<option value="naver">네이버</option>
		<option value="daum" selected="selected">다음</option>
		<option value="nate">네이트</option>
	</select>
	<p id="txt3"></p>
</body>
</html>

5. html

1) html_text

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	//태그의 내용을 제어. HTML 태그 허용
	$('div').html('<h1>날씨가 흐린 오전!</h1>');
	//태그의 내용을 제어. HTML 태그를 허용하지 않고 text로 처리
	$('p').text('<h1>놀이동산의 곰인형</h1>');
});
</script>
</head>
<body>
	<div></div>
	<p></p>
</body>
</html>

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	$('div').html(function(index){
		return '<h2>Header-' + index + '</h2>'
	});
	
	$('h1').html(function(index,html){
		//index : 배열의 인덱스
		//html : 태그의 내용
		return '**' + html + '**';
	});
});
</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<hr size="1" width="100%" noshade="noshade">
	
	<h1>HEADER-0</h1>
	<h1>HEADER-1</h1>
	<h1>HEADER-2</h1>
</body>
</html>

6. remove

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
/* 
empty() : 특정 문서 객체의 후손을 모두 제거
remove() : 특정 문서 객체를 제거
*/
	setTimeout(function(){
		$('div').empty(); //div의 후손이 제거됨
	},3000);
	
	setTimeout(function(){ 
		$('p').remove(); //p 태그 제거 
	},6000);
});
</script>
</head>
<body>
	<div>
		<h1>Header-0</h1>
		<h1>Header-1</h1>
	</div>
	<p>
		<span>Content-0</span>
		<span>Content-1</span>
	</p>
</body>
</html>

7. appendTo

메서드 이름				설명
$(A).appendTo(B)		A를 B의 기존 자식의 뒤에 추가
$(A).prependTo(B)		A를 B의 기존 자식의 앞에 추가
$(A).insertAfter(B)		A를 B의 뒤에 형제로 추가
$(A).insertBefore(B)	A를 B의 앞에 형제로 추가

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	//$('<h1>Hello World</h1>').appendTo('div'); //<>를 넣으면 태그가 만들어짐
	//$('<h1>Hello jQuery</h1>').prependTo('div');
	//$('<h1>Welcome To jQuery</h1>').insertAfter('div');
	$('<h1>Happy Sunday</h1>').insertBefore('div');
});
</script>
</head>
<body>
	<div>
		<h1>안녕하세요</h1>
	</div>
</body>
</html>

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	$('<img>').attr({
		src:'../files/blue.jpg',
		width:400,
		height:250
	}).appendTo('body');
});
</script>
</head>
<body>
	
</body>
</html>

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	$('img').css('width',250);
	
	//함수를 2초마다 실행
	setInterval(function(){
		//첫번째 이미지를 마지막으로 보냄
		$('img').first().appendTo('body') //위치 이동
	},2000);
});
</script>
</head>
<body>
	<img src="../files/Chrysanthemum.jpg">
	<img src="../files/Desert.jpg">
	<img src="../files/Hydrangeas.jpg">
	<img src="../files/Jellyfish.jpg">
	<img src="../files/Koala.jpg">
</body>
</html>

8. append

메서드 이름				설명
$(A).append(B)			B를 A의 기존 자식의 뒤에 추가
$(A).prepend(B)			B를 A의 기존 자식의 앞에 추가
$(A).after(B)			B를 A의 뒤에 형제로 추가
$(A).before(B)			B를 A의 앞에 형제로 추가

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	//$('div').append('<h1>Hello jQuery</h1>');
	//$('div').prepend('<h1>Hello JavaScript</h1>');
	//$('div').after('<h1>Hello CSS</h1>');
	$('div').before('<h1>Hello Bootstrap</h1>');
});
</script>
</head>
<body>
	<div>
		<h1>여기는 서울</h1>
	</div>
</body>
</html>

<title>jQuery</title>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	//배열 생성
	const content = [
		{name:'홍길동',region:'서울시'},
		{name:'박문수',region:'부산시'},
		{name:'장영실',region:'인천시'}
	];
	
	let output = '';
	$.each(content,function(index,item){
		output += '<div>';
		output += '<h2>' + item.name + '</h2>';
		output += '<span>' + item.region + '</span>';
		output += '</div>';
	});
	
	$('#output').append(output);
	
});
</script>
</head>
<body>
	<div id="output"></div>
</body>
</html>

9. 실습

[실습]
도서 정보를 table에 표시
예)
도서명   분류	 정상가격	  할인가격(5%)
자바		IT	 20000	  19000
미술사	예술	 30000	  28500
노래연습	예술	 10000	  9500

<title>jQuery</title>
<style>
table{
 text-align:center;
}
</style>
<!-- CDN[Contents Delivery Network]방식 : URL을 통해 js 파일 연결 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
//문서가 준비 완료되면 매개변수로 전달된 함수를 실행
//=$(document).ready(function(){});
$(function(){
	const book = [
		{name:'자바',category:'IT',price:20000},
		{name:'미술사',category:'예술',price:30000},
		{name:'노래연습',category:'예술',price:10000},
		{name:'한국사',category:'역사',price:50000}
	];

	let output = '<tr><th>도서명</th><th>분류</th><th>정상가격</th><th>할인가격(5%)</th></tr>';
	
	$.each(book,function(index,item){
		output += '<tr>';
		output += '<td>' + item.name + '</td>';
		output += '<td>' + item.category + '</td>';
		output += '<td>' + item.price.toLocaleString() + '</td>';
		output += '<td>' + (item.price * 0.95).toLocaleString() + '</td>';
		output += '</tr>';
	});
	
	$('#output').append(output);
	
});
</script>
</head>
<body>
	<table id="output" border="1"></table>
</body>
</html>

최은서

이전 포스트

[jQuery] Basic

다음 포스트

[jQuery] DOM

jQuery

1. attr

2. removeAttr

3. css

4. prop

5. html

6. remove

7. appendTo

8. append

9. 실습

[jQuery] Basic

[jQuery] Event

0개의 댓글