본문 바로가기
Web & Mobile/jQuery

Lecture 41 - jQuery(2) 배열 관리, extend(), noConflict(), filter(), end(), eq(), add(), is(), find(), addClass(), removeClass(), toggleClass()

by Bennyziio 2023. 6. 20.
반응형

jQueryEx01.ex09 - 배열 관리

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	// javascript - html 선택하는 방법
	$(document).ready(function() {
		// json
		var array = [
			{ name:'daum', link:'https://www.daum.net'},
			{ name:'naver', link:'https://www.naver.com'},
			{ name:'google', link:'https://www.google.com'}
		];
		
		for(var i=0; i<array.length; i++) {
			//console.log(array[i].name);
			//console.log(array[i].link);
		}
		
		for(var i in array) {
			console.log(array[i].name);
			console.log(array[i].link);
		}
	});
	
</script>
</head>
<body>

<table>
	
</table>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	// javascript - html 선택하는 방법
	$(document).ready(function() {
		// json
		var array = [
			{ name:'daum', link:'https://www.daum.net'},
			{ name:'naver', link:'https://www.naver.com'},
			{ name:'google', link:'https://www.google.com'}
		];
		
		for(var i=0; i<array.length; i++) {
			//console.log(array[i].name);
			//console.log(array[i].link);
		}
		
		for(var i in array) {
			//console.log(array[i].name);
			//console.log(array[i].link);
		}
		
		// array 배열 처리하는 객체
		// forEach - for문 내장됨
		// 제어 -> 메소드화
		array.forEach(function(item, index){
			console.log(index + " : " + item.name);
			console.log(index + " : " + item.link);
		});
	});
	
</script>
</head>
<body>

<table>
	
</table>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	// javascript - html 선택하는 방법
	$(document).ready(function() {
		// json
		var array = [
			{ name:'daum', link:'https://www.daum.net'},
			{ name:'naver', link:'https://www.naver.com'},
			{ name:'google', link:'https://www.google.com'}
		];
		
		for(var i=0; i<array.length; i++) {
			//console.log(array[i].name);
			//console.log(array[i].link);
		}
		
		for(var i in array) {
			//console.log(array[i].name);
			//console.log(array[i].link);
		}
		
		// array 배열 처리하는 객체
		// forEach - for문 내장됨
		// 제어 -> 메소드화
		array.forEach(function(item, index){
			//console.log(index + " : " + item.name);
			//console.log(index + " : " + item.link);
			
			var output = '';
			output += '<a href="' + item.link + '">';
			output += item.name
			output += '</a><br />';
			
			document.body.innerHTML += output;
		});
	});
	
</script>
</head>
<body>

<table>
	
</table>

</body>
</html>

제어문 없이 루프가 돈다

jQueryEx01.ex10 - 자바스크립트 배열 관리

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	// javascript - html 선택하는 방법
	$(document).ready(function() {
		// json
		var array = [
			{ name:'daum', link:'https://www.daum.net'},
			{ name:'naver', link:'https://www.naver.com'},
			{ name:'google', link:'https://www.google.com'}
		];
		
		$.each(array, function(index, item){
			console.log(item.name);
			console.log(item.link);
		});
	});
	
</script>
</head>
<body>

<table>
	
</table>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	// javascript - html 선택하는 방법
	$(document).ready(function() {
		// json
		var array = [
			{ name:'daum', link:'https://www.daum.net'},
			{ name:'naver', link:'https://www.naver.com'},
			{ name:'google', link:'https://www.google.com'}
		];
		
		var object = {name:'daum', link:'https://www.daum.net'};
		
		$.each(array, function(index, item){
			console.log(item.name);
			console.log(item.link);
		});
		
		$.each(object, function(key, item){
			console.log(key + ' : ' + item);
		});
	});
	
</script>
</head>
<body>

<table>
	
</table>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	// javascript - html 선택하는 방법
	$(document).ready(function() {
		// json
		var array = [
			{ name:'daum', link:'https://www.daum.net'},
			{ name:'naver', link:'https://www.naver.com'},
			{ name:'google', link:'https://www.google.com'}
		];
		
		var object = {name:'daum', link:'https://www.daum.net'};
		
		$.each(array, function(index, item){
			//console.log(item.name);
			//console.log(item.link);
		});
		
		$.each(object, function(key, item){
			//console.log(key + ' : ' + item);
		});
		
		$('h2').each(function(index, item){
			console.log(item.innerHTML);
		})
	});
	
</script>
</head>
<body>

<h2>item - 1</h2>
<h2>item - 2</h2>
<h2>item - 3</h2>
<h2>item - 4</h2>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	.high-light-0 { background: yellow;}
	.high-light-1 { background: orange;}
	.high-light-2 { background: blue;}
	.high-light-3 { background: green;}
	.high-light-4 { background: red;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	// javascript - html 선택하는 방법
	$(document).ready(function() {
		$('h2').each(function(index, item) {
			// addClass - 클래스 추가
			$(item).addClass('high-light-' + index);
		});
	});
	
</script>
</head>
<body>

<h2>item - 1</h2>
<h2>item - 2</h2>
<h2>item - 3</h2>
<h2>item - 4</h2>
<h2>item - 5</h2>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	.high-light-0 { background: yellow;}
	.high-light-1 { background: orange;}
	.high-light-2 { background: blue;}
	.high-light-3 { background: green;}
	.high-light-4 { background: red;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	// javascript - html 선택하는 방법
	$(document).ready(function() {
		$('h2').each(function(index, item) {
			// addClass - 클래스 추가
			$(this).addClass('high-light-' + index);
		});
	});
	
</script>
</head>
<body>

<h2>item - 1</h2>
<h2>item - 2</h2>
<h2>item - 3</h2>
<h2>item - 4</h2>
<h2>item - 5</h2>

</body>
</html>

jQueryEx01.ex12 - 객체 확장

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	// javascript - html 선택하는 방법
	$(document).ready(function() {
		var object = { name: '홍길동'};
		
		// 객체의 내용 확장 (멤버변수, 메서드)
		$.extend(object, 
			{ region1: '강남구', part1: '베이스'}
		);
		
		$.each(object, function(key, item){
			console.log(item);
		});
	});
	
</script>
</head>
<body>



</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	// javascript - html 선택하는 방법
	$(document).ready(function() {
		var object = { name: '홍길동'};
		
		// 객체의 내용 확장 (멤버변수, 메서드)
		$.extend(object, 
			{ region1: '강남구', part1: '베이스'},
			{ region2: '서초구', part2: '세컨드'}
		);
		
		$.each(object, function(key, item) {
			console.log(item);
		});
	});
	
</script>
</head>
<body>



</body>
</html>

jQueryEx01.ex13 - jQuery 충돌 방지
$를 사용하는데 다른 프레임워크에서도 사용하면 충돌이 일어나므로 $.noConflict()를 해준다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$.noConflict();
	
	$(document).ready(function() {
		console.log("test");
	});
	
</script>
</head>
<body>



</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$.noConflict();
	var J = jQuery;
	J(document).ready(function() {
		console.log("test");
	});
	
</script>
</head>
<body>



</body>
</html>

jQueryEx01.ex14 - filter 선택자 : CSS를 동시에 주고 싶을 때

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		// filter 선택자
		/*
		$('h3:even').css({
			// background-color(변수안에 특수기호가 안됨)
			backgroundColor: 'black',
			color: 'white'
		});
		*/
		$('h3').filter(':even').css({
			backgroundColor: 'black',
			color: 'yellow'
		});
	});
	
</script>
</head>
<body>

<h3>Header-0</h3>
<h3>Header-1</h3>
<h3>Header-2</h3>
<h3>Header-3</h3>
<h3>Header-4</h3>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		// filter 선택자
		/*
		$('h3:even').css({
			// background-color(변수안에 특수기호가 안됨)
			backgroundColor: 'black',
			color: 'white'
		});
		
		$('h3').filter(':even').css({
			backgroundColor: 'black',
			color: 'yellow'
		});
		*/
		$('h3').filter(function(index) {
			return index % 2 == 1;
		}).css({
			backgroundColor: 'black',
			color: 'yellow'
		});
	});
	
</script>
</head>
<body>

<h3>Header-0</h3>
<h3>Header-1</h3>
<h3>Header-2</h3>
<h3>Header-3</h3>
<h3>Header-4</h3>

</body>
</html>

jQueryEx01.ex15 - 문서 객체 탐색 종료

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		$('h3')
		.css('background-color', 'orange')
		.filter(':even')
		.css('color', 'red');
	});
	
</script>
</head>
<body>

<h3>Header-0</h3>
<h3>Header-1</h3>
<h3>Header-2</h3>
<h3>Header-3</h3>
<h3>Header-4</h3>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		$('h3')
		.css('background-color', 'orange')
		.filter(':even').css('color', 'red')
		.end()
		.filter(':odd').css('color', 'blue')
	});
	
</script>
</head>
<body>

<h3>Header-0</h3>
<h3>Header-1</h3>
<h3>Header-2</h3>
<h3>Header-3</h3>
<h3>Header-4</h3>

</body>
</html>

jQuerysEx01.ex16 - eq() : 특정 위치의 문서 객체 선택

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		$('h1').eq(0).css('background', 'orange');
		$('h1').eq(-1).css('background', 'red');
	});
	
</script>
</head>
<body>

<div>
	<h1>Header-0</h1>
	<h1>Header-1</h1>
	<h1>Header-2</h1>
</div>

</body>
</html>

jQueryEx01.ex17 - add() : 문서 객체 추가 선택

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		$('h1').css('background', 'Gray')
		.add('h2')
		.css('float', 'left');
	});
	
</script>
</head>
<body>

<div>
	<h1>Header-0</h1>
	<h2>Header-1</h2>
	<h1>Header-2</h1>
	<h2>Header-3</h2>
	<h1>Header-4</h1>
</div>

</body>
</html>

jQueryEx01.ex18 - is() : 문서 객체의 특징 판별

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		$('h3').each(function() {
			if($(this).is('.select')) {
				$(this).css('background-color', 'orange')
			}
		});
	});
	
</script>
</head>
<body>

<div>
	<h3 class = "select">Header-0</h3>
	<h3>Header-1</h3>
	<h3 class = "select">Header-2</h3>
	<h3>Header-3</h3>
	<h3 class = "select">Header-4</h3>
	<h3>Header-5</h3>
</div>

</body>
</html>

jQueryEx01.ex19 - find() : 특정 태그 검색

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		// find - 문서 전체에서 검색
		$(document).find('h3').each(function(index, item) {
			console.log(item.innerHTML);
		});
	});
	
</script>
</head>
<body>

<div>
	<h3 class = "select">Header-0</h3>
	<h3>Header-1</h3>
	<h3 class = "select">Header-2</h3>
	<h3>Header-3</h3>
	<h3 class = "select">Header-4</h3>
	<h3>Header-5</h3>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		// find - 문서 전체에서 검색
		$(document).find('.select').each(function(index, item) {
			console.log(item.innerHTML);
		});
	});
	
</script>
</head>
<body>

<div>
	<h3 class = "select">Header-0</h3>
	<h3>Header-1</h3>
	<h3 class = "select">Header-2</h3>
	<h3>Header-3</h3>
	<h3 class = "select">Header-4</h3>
	<h3>Header-5</h3>
</div>

</body>
</html>

select만 찾아 옴

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">

	$(document).ready(function() {
		// find - 문서 전체에서 검색
		$('body').find('.select').each(function(index, item) {
			console.log(item.innerHTML);
		});
	});
	
</script>
</head>
<body>

<div>
	<h3 class = "select">Header-0</h3>
	<h3>Header-1</h3>
	<h3 class = "select">Header-2</h3>
	<h3>Header-3</h3>
	<h3 class = "select">Header-4</h3>
	<h3>Header-5</h3>
</div>

</body>
</html>

body안의 select만 찾음

jQueryEx01.ex20 - xml을 find() 사용하여 해당 구절 찾기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">

</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	var xml = '';
	xml += '<friends>';
	xml += '	<friend>';
	xml += '		<name>tester1</name>';
	xml += '		<language>ruby</language>';
	xml += '	</friend>';
	xml += '	<friend>';
	xml += '		<name>tester2</name>';
	xml += '		<language>javascript</language>';
	xml += '	</friend>';
	xml += '</friends>';
	$(document).ready(function() {
		// 문자열 => xml화
		var xmlDoc = $.parseXML(xml);
		$(xmlDoc).find('friend').each(function() {
			console.log($(this).find('name').text());
		});
	});
	
</script>
</head>
<body>

<div>
	
</div>

</body>
</html>

jQueryEx01.ex21 - addClass() : 문서 객체의 클래스 속성 추가, removeClass() : 삭제, toggleClass() : on/off 작동

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	.high-light {background-color:yellow;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		document.getElementById('btn1').onclick = function() {
			$('h2').addClass('high-light');
		};
		document.getElementById('btn2').onclick = function() {
			$('h2').removeClass('high-light');
		};
		document.getElementById('btn3').onclick = function() {
			$('h2').toggleClass('high-light');
		};
	});
	
</script>
</head>
<body>
<button id = "btn1">add</button>
<button id = "btn2">remove</button>
<button id = "btn3">toggle</button>

<hr />

<h2>item - 0</h2>
<h2>item - 1</h2>
<h2>item - 2</h2>
<h2>item - 3</h2>
<h2>item - 4</h2>

</body>
</html>

 

반응형
저작자표시 동일조건

'Web & Mobile > jQuery' 카테고리의 다른 글

Lecture 43 - jQuery(3) attr(), 문서객체제거 및 생성, before(), prepend(), append(), after(), on(), 토글기능, off(), 이벤트객체, trigger(), 이벤트전달, 마우스이벤트, 윈도우이벤트, infinity scroll, 입력양식 이벤트  (0) 2023.06.20
Lecture 40 - jQuery(1) Eclipse에 jQuery세팅법, jQuery 기초  (0) 2023.06.20
Lecture 79 - jQuery(6) jQuery를 이용한 게시판  (0) 2019.07.17
Lecture 78 - jQuery(5) jQueryUI 사용법(2)  (0) 2019.07.16
Lecture 77 - jQuery(4) jQueryUI 설치법 및 기초 사용법  (0) 2019.07.15

관련글

댓글

티스토리툴바