[jQuery] 연결방법, 클래스 제어, 속성 검사, 문서 객체의 내부 검사/제거/삽입

밍·2024년 4월 1일

jquery

jQuery/Bootstrap

목록 보기

1/6

🍀 jQuery 연결 방법

1) js파일 다운로드 연결

2) CDN(Contents Delivery Network)방식 : URL을 통해 js파일 연결

※ 개발할 때는 두 방법 모두 가능(차이가 별로 존재하지 않음)

※ 상용 서비스를 할 때는 CDN 방식

(다른 서버에 있는 걸 가져다 씀 → 다른 서버가 불안할 시 서비스가 제한 될 수 있기 때문에 다운로드 방식이 더 용이함)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- jQuery 연결 방법 1: js파일 다운로드 연결 -->
<!-- <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script> -->

<!-- jQuery 연결 방법 2: CDN(Contents Delivery Network)방식 : URL을 통해 js파일 연결 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
	//문서가 준비 완료되면 매개변수로 전달된 함수를 실행하라는 의미
	$(document).ready(function(){
		alert('Ready Action!!');
	});
</script>
</head>
<body>

</body>
</html>

→ 개발할 때는 두 방식의 차이가 없지만, 상용 서비스를 할 때에는 CDN방식을 사용하면 정보를 제공해주는 다른 서버가 불안정할 시 js파일을 다운받지 못하여 서비스를 제한받을 수 있기 때문에 가급적이면 js파일을 서버에 넣고 동작시키는 것이 좋음

🍀 클래스 제어

$(‘선택자’).메서드();

괄호 안의 선택자는 css의 선택자 명시방법과 같음
선택자의 값들을 배열로 인식하여 내부적으로 루프를 돌면서 메서드를 적용시킴

1) css() : 스타일과 관련된 모든 기능을 수행

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	//문서가 준비 완료되면 매개변수로 전달되는 함수를 실행
	$(document).ready(function(){
		// $()-> 태그 읽어들여서 jQuery객체로 만듦
		//.css() : 스타일 제어
		$('span').css('border','3px solid blue');
		$('.my').css('border', '5px solid red');
		$('#content').css('background-color','green');
	});
</script>
</head>
<body>
	<p class="my">jQuery 실습</p>
	<div>
		<div id="content">id값이 content인 div</div>
	</div>
	<span>span1</span>
	<span class="my">span2</span>
</body>
</html>

※ 배열 생성, each()로 배열 관리

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//배열 생성
		const array = [
			{name:'naver', link:'https://www.naver.com'},
			{name:'daum', link:'https://www.daum.net'},
			{name:'google', link:'https://www.google.co.kr'},
			{name:'jQuery', link:'http://www.jQuery.com'}
		];
		 	//배열	함수를 구동시켜서 index, 요소 반환
		$.each(array, function(index, item){
			//index : 배열의 index
			//item : 배열의 index를 이용해서 반환한 요소(객체)
		
			let output = '';
			output += '<h1>';
			//''-> javascript에서 문자열 명시할 때 사용, ""-> HTML에서 속성값을 명시할 때 사용하는 요소
			output += '<a href="'+item.link+'">' + item.name + '</a>';
			output += '</h1>';
		
			document.body.innerHTML += output;
		});
	});
</script>
</head>
<body>

</body>
</html>

2) addClass() : 문서 객체(지정 태그)에 클래스 속성을 추가

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
	.high_light{
		background-color:yellow;
	}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
			  //클래스 추가
		$('h1').addClass('high_light');
	});
</script>
</head>
<body>
	<h1>item - 0</h1>
	<h1>item - 1</h1>
	<h1>item - 2</h1>
	<h1>item - 3</h1>
	<h1>item - 4</h1>
</body>
</html>

→ 콘솔 > 요소 에서는 클래스가 적용된 상태로 보임

※ .addClass() 와 .each() 같이 활용 (권장 X)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
	.high_light_0{
		background-color:yellow;
	}
	.high_light_1{
		background-color:orange;
	}
	.high_light_2{
		background-color:blue;
	}
	.high_light_3{
		background-color:green;
	}
	.high_light_4{
		background-color:red;
	}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('h1').each(function(index, item){
			//index : 배열의 index
			//item : 배열의 index를 통해서 요소(h1태그) 반환
			$(item).addClass('high_light_' + index);
		});
	});
</script>
</head>
<body>
	<h1>item - 0</h1>
	<h1>item - 1</h1>
	<h1>item - 2</h1>
	<h1>item - 3</h1>
	<h1>item - 4</h1>
</body>
</html>

※ .addClass()만 사용 → 익명함수를 자체적으로 갖고 있어서 사용 용이 (권장 방식)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
	.high_light_0{
		background-color:yellow;
	}
	.high_light_1{
		background-color:orange;
	}
	.high_light_2{
		background-color:blue;
	}
	.high_light_3{
		background-color:green;
	}
	.high_light_4{
		background-color:red;
	}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
			  //클래스 추가
		$('h1').addClass(function(index){
			//index : 배열의 인덱스
					//클래스명
			return 'high_light_' + index;
		});
	});
</script>
</head>
<body>
	<h1>item - 0</h1>
	<h1>item - 1</h1>
	<h1>item - 2</h1>
	<h1>item - 3</h1>
	<h1>item - 4</h1>
</body>
</html>

3) removeClass() : 문서 객체의 클래스 속성을 제거

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
	.item{color:red;}
	.select{background:yellow;}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//3초 후에 매개변수로 전달된 함수를 실행
		setTimeout(function(){
			//문서 객체의 클래스 속성을 제거
			$('h1').removeClass('select');
		},3000);
	});
</script>
</head>
<body>
	<h1 class="item">Header - 0</h1>
	<h1 class="item select">Header - 1</h1>
	<h1 class="item">Header - 2</h1>

</body>
</html>

→ 3초 후 select를 remove(제거)함
→ 검사 > 요소에서도 제거됨

🍀 속성 검사

1) attr() : 속성과 관련된 모든 기능을 수행

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//하나의 속성 제어
		//$('img').attr('width',100);
		
		//복수의 속성 제어	
		/*
		$('img').attr('width',150) //배열로 반환
				.attr('height',150); //배열로부터 다시 attr속성 호출
		-> 속성명 반복, 코드가 길어짐
		*/
		$('img').attr({width:200,height:200}); //객체 형태로 만들어 key-value 쌍으로 명시하여 전달
	});
</script>
</head>
<body>
	<img src="../files/blue.jpg">
	<img src="../files/flower.jpg">
	<img src="../files/winter.jpg">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//하나의 속성 제어
		/* 
		$('img').attr('width',function(index){
			return (index + 1) * 100;	
		}); 
		*/
		
		//복수의 속성 제어-> 객체 형태(key:value)로 명시
		$('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>

※ 속성 값 읽어오기 (불러오기)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//3초 후에 img 태그에 명시된 url 읽기
		setTimeout(function(){
			//속성값 반환
			alert($('img').attr('src'));
		},3000);
	});
</script>
</head>
<body>
	<img src="../files/blue.jpg">
</body>
</html>

3초 후 alert창 뜸

2) removeAttr() : 속성 제거

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(document).ready(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초 후 기본값으로 정렬(왼쪽 정렬)
→ 태그가 가지고 있는 속성을 제어할 시 동적화면 구현 가능

🍀 문서 객체의 내부 검사

html() : 문서 객체 내부의 글자와 관련된 모든 기능을 수행 (HTML 태그 인식)
text() : 문서 객체 내부의 글자와 관련된 모든 기능을 수행

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	//축약형 = $(document).ready(function(){});
	$(function(){ 
		//태그의 내용에 html 태그 표시
		$('div').html('<h1>여름이 오고 있다~~</h1>');
		//태그의 내용을 text로만 표시
		$('p').text('<h1>유럽 여행에서 일어난 사건</h1>');
	}); 
</script>
</head>
<body>
	<div></div>
	<p></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('div').html(function(index){
			return '<h2>Header-' + index + '</h2>';
		});
		
		$('h1').html(function(index, html){
			//index : 배열의 index
			//html : index를 통해서 요소(태그)의 데이터 반환
			return '**' + html + '**';
		});
	});
</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	
	<h1>Header - 0</h1>
	<h1>Header - 1</h1>
	<h1>Header - 2</h1>
</body>
</html>

🍀 문서 객체의 제거

empty() : 특정 문서 객체의 후손을 모두 제거
remove() : 특정 문서 객체를 제거

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		//empty() : 특정 문서 객체의 후손을 모두 제거
		$('div').empty();
		//remove() : 특정 문서 객체를 제거
		$('p').remove();
	});
</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>

🍀 문서 객체 삽입

$(A).appendTo(B) : A를 B의 기존 자식의 뒤에 추가
$(A).pretendTo(B) : A를 B의 기존 자식의 앞에 추가
$(A).insertAfter(B) : A를 B의 뒤에 형제로 추가
$(A).insertBefore(B) : A를 B의 앞에 형제로 추가

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
/*
 메서드 이름			 설명
 $(A).appendTo(B)	 A를 B의 기존 자식의 뒤에 추가 -> 빈도수 가장 높음
 $(A).prependTo(B)	 A를 B의 기존 자식의 앞에 추가
 $(A).insertAfter(B) A를 B의 뒤에 형제로 추가
 $(A).insertBefore(B) A를 B의 앞에 형제로 추가
 */
 	$(function(){
 		//$();안에 태그명 명시할 시 기존의 태그 선택, 태그 명시할 시 새로운 태그 생성
 		  //새로 생성하는 태그				  기존 태그
 		$('<h1>Hello World</h1>').appendTo('div');
 		//$('<h1>Hello World</h1>').prependTo('div'); 
 		//$('<h1>Hello World</h1>').insertAfter('div');
 		//$('<h1>Hello World</h1>').insertBefore('div');
 	});
</script>
</head>
<body>
	<div>
		<h1>안녕하세요~~</h1>
	</div>
</body>
</html>

appendTo
prependTo → 기존 태그의 위에 추가
insertAfter
insertBefore

▶︎ appendTo()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(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>

→ 2초마다 첫번째 이미지가 마지막으로 이동 (롤링효과가 무한반복됨)

$(A).append(B) : B를 A의 기존 자식의 뒤에 추가
$(A).prepend(B) : B를 A의 기존 자식의 앞에 추가
$(A).after(B) : B를 A의 뒤에 형제로 추가
$(A).before(B) : B를 A의 앞에 형제로 추가

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
/*
 메서드 이름			설명
 $(A).append(B)		B를 A의 기존 자식의 뒤에 추가 -> 빈도수 가장 높음
 $(A).prepend(B)	B를 A의 기존 자식의 앞에 추가
 $(A).after(B)		B를 A의 뒤에 형제로 추가		
 $(A).before(B)		B를 A의 앞에 형제로 추가
 */
 	$(function(){
 		//기존 태그			새로 생성되는 태그
 		$('div').append('<h1>Hello jQuery</h1>');
 		//$('div').prepend('<h1>Hello jQuery</h1>');
 		//$('div').after('<h1>Hello jQuery</h1>');
 		//$('div').before('<h1>Hello jQuery</h1>');
 	});
</script>
</head>
<body>
	<div>
		<h1>오늘은 수요일</h1>
	</div>
</body>
</html>

append
prepend
after
before

▶︎ append()

: 데이터를 읽어오면 배열에 객체 담겨있고, 그걸 전달한 다음에 function()안에서 데이터 읽고 가공한 다음에 출력

→ 주로 사용하는 형태

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(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>

밍

다음 포스트