본문 바로가기
Web & Mobile/jQuery

Lecture 43 - jQuery(3) attr(), 문서객체제거 및 생성, before(), prepend(), append(), after(), on(), 토글기능, off(), 이벤트객체, trigger(), 이벤트전달, 마우스이벤트, 윈도우이벤트, infinity scroll, 입력양식 이벤트

by Bennyziio 2023. 6. 20.
반응형

jQuery
jQueryEx01.ex21 - 문서 객체의 속성 검사, 추가, 제거

<!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() {
		//attr()
		document.getElementById('btn1').onclick = function(){
			//한 개만 출력
			/* var src = $('img').attr('src');
			console.log(src) */
		 
			/* $('img').each(function(){
				console.log($(this).attr('src'));
			}) */
			$('img').attr('src',function(index, item){
				console.log(item);
			})
		}
		
		document.getElementById('btn2').onclick = function(){
			// 그룹 - 각 개별 이미지에 높이 300 적용
			//추가
			/* $('img').attr('height',300);
			//수정
			$('img').attr('width',300); */
			
			/* $('img').attr('width',function(index){
				//return 300;
				//인덱스를 이용해 개별 크기를 다르게 할 수도 있다.
				return (index +1) *300;
			}) */
			$('img').attr({
				//width: 300,
				width: function(index){
					return (index + 1) * 30;
				},
				height: 300
			});
		}
	});
	
</script>
</head>
<body>

<button id= "btn1">속성 내용</button>
<button id= "btn2">속성 추가</button>
<button id= "btn3">속성 삭제</button>
<br>
<hr>

<img src="./images/Chrysanthemum.jpg" width="150"  >
<img src="./images/Desert.jpg" width="150"  >
<img src="./images/Hydrangeas.jpg" width="150"  >
<img src="./images/Jellyfish.jpg" width="150"  >
<img src="./images/Koala.jpg" width="150"  >
<img src="./images/Lighthouse.jpg" width="150"  >
<img src="./images/Penguins.jpg" width="150"  >
<img src="./images/Tulips.jpg" width="150"  >

</body>
</html>

<!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() {
		//attr()
		document.getElementById('btn1').onclick = function(){
			//한 개만 출력
			/* var src = $('img').attr('src');
			console.log(src) */
		 
			/* $('img').each(function(){
				console.log($(this).attr('src'));
			}) */
			$('img').attr('src',function(index, item){
				console.log(item);
			})
		}
		
		document.getElementById('btn2').onclick = function(){
			// 그룹 - 각 개별 이미지에 높이 300 적용
			//추가
			 $('img').attr('height',300);
			//수정
			//$('img').attr('width',300); */
			
			/* $('img').attr('width',function(index){
				//return 300;
				//인덱스를 이용해 개별 크기를 다르게 할 수도 있다.
				return (index +1) *300;
			}) 
			$('img').attr({
				//width: 300,
				width: function(index){
					return (index + 1) * 30;
				},
				height: 300
			});
			*/
		}
		
		document.getElementById('btn3').onclick = function(){
			$('img').removeAttr('height');
		}
	});
	
</script>
</head>
<body>

<button id= "btn1">속성 내용</button>
<button id= "btn2">속성 추가</button>
<button id= "btn3">속성 삭제</button>
<br>
<hr>

<img src="./images/Chrysanthemum.jpg" width="150"  >
<img src="./images/Desert.jpg" width="150"  >
<img src="./images/Hydrangeas.jpg" width="150"  >
<img src="./images/Jellyfish.jpg" width="150"  >
<img src="./images/Koala.jpg" width="150"  >
<img src="./images/Lighthouse.jpg" width="150"  >
<img src="./images/Penguins.jpg" width="150"  >
<img src="./images/Tulips.jpg" width="150"  >

</body>
</html>

<!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() {
		//attr()
		document.getElementById('btn1').onclick = function(){
			//한 개만 출력
			/* var src = $('img').attr('src');
			console.log(src) */
		 
			/* $('img').each(function(){
				console.log($(this).attr('src'));
			}) */
			$('img').attr('src',function(index, item){
				console.log(item);
			})
		}
		
		document.getElementById('btn2').onclick = function(){
			// 그룹 - 각 개별 이미지에 높이 300 적용
			//추가
			//$('img').attr('height',300);
			$('img').attr('data-index', '200');
			//수정
			//$('img').attr('width',300); */
			
			/* $('img').attr('width',function(index){
				//return 300;
				//인덱스를 이용해 개별 크기를 다르게 할 수도 있다.
				return (index +1) *300;
			}) 
			$('img').attr({
				//width: 300,
				width: function(index){
					return (index + 1) * 30;
				},
				height: 300
			});
			*/
		}
		
		document.getElementById('btn3').onclick = function(){
			$('img').removeAttr('height');
		}
	});
	
</script>
</head>
<body>

<button id= "btn1">속성 내용</button>
<button id= "btn2">속성 추가</button>
<button id= "btn3">속성 삭제</button>
<br>
<hr>

<img src="./images/Chrysanthemum.jpg" width="150"  >
<img src="./images/Desert.jpg" width="150"  >
<img src="./images/Hydrangeas.jpg" width="150"  >
<img src="./images/Jellyfish.jpg" width="150"  >
<img src="./images/Koala.jpg" width="150"  >
<img src="./images/Lighthouse.jpg" width="150"  >
<img src="./images/Penguins.jpg" width="150"  >
<img src="./images/Tulips.jpg" width="150"  >

</body>
</html>

data-index="200" 추가됨

jQueryEx01.ex22 - 문서 객체의 스타일 검사

<!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() {
			// 기존방식
			//var result = document.getElementById('result');
			//console.log(result.innerHTML);
			//console.log(result.textContent);
			
			console.log($('#result').html());
			console.log($('#result').text());
		};
		
		document.getElementById('btn1').onclick = function() {
			$('#result').html('<i>새롭게 변경된 내용</i>');
		}
	});
	
</script>
</head>
<body>

<button id="btn1">내용</button>
<button id="btn2">추가</button>

<br /><hr /><br />

<div id="result"><b>출력 내용</b></div>

</body>
</html>

추가를 누르면

위와 같이 "새롭게 변경된 내용"이라고 지정한 값으로 바뀐다.

<!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() {
			// 기존방식
			//var result = document.getElementById('result');
			//console.log(result.innerHTML);
			//console.log(result.textContent);
			
			console.log($('#result').html());
			console.log($('#result').text());
		};
		
		document.getElementById('btn1').onclick = function() {
			//$('#result').html('<i>새롭게 변경된 내용</i>');
			$('#result').text('<i>새롭게 변경된 내용</i>');
		}
	});
	
</script>
</head>
<body>

<button id="btn1">내용</button>
<button id="btn2">추가</button>

<br /><hr /><br />

<div id="result"><b>출력 내용</b></div>

</body>
</html>

html을 text로 바꾸면 위와 같이 text타입으로 들어가진다

jQueryEx01.ex23 - pg.66 그림 15-16처럼 출력

<!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() {
		
		$('div').html(function (index) {
			return '<h1>Header-' + index + '</h1>';
		});
			
	});
	
</script>
</head>
<body>

<div></div>
<div></div>
<div></div>

</body>
</html>

jQueryEx01.ex24 - 문서 객체 제거

<!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() {
			$('div').remove();
		};
		
		document.getElementById('btn2').onclick = function() {
			$('div').empty();
		};

	});
	
</script>
</head>
<body>
<button id="btn1">제거 1</button>
<button id="btn2">제거 2</button>

<div>
	<h2>Header - 0</h2>
	<h2>Header - 1</h2>
	<h2>Header - 2</h2>
</div>
</body>
</html>

remove() - <div>전체가 날아감

empty() - <div> 내용만 날아감

<!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() {
			$('div').remove();
		};
		
		document.getElementById('btn2').onclick = function() {
			$('div').empty();
		};
		
		document.getElementById('btn3').onclick = function() {
			//$('h2').first().remove()
			$('h2').eq(1).remove()
		};
	});
	
</script>
</head>
<body>
<button id="btn1">제거 1</button>
<button id="btn2">제거 2</button>
<button id="btn3">제거 2</button>

<div>
	<h2>Header - 0</h2>
	<h2>Header - 1</h2>
	<h2>Header - 2</h2>
</div>
</body>
</html>

특정 태그만 삭제한다

jQueryEx01.ex25 - $() : 문서 객체 생성(1)

<!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() {
		$('<h2>Hello jQuery mofo</h2>').appendTo('body');	
		
	});
	
</script>
</head>
<body>

</body>
</html>

<!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() {
		//$('<h2>Hello jQuery mofo</h2>').appendTo('body');
		$('<h2></h2>').html('Hello jQuery').appendTo('body');
		
	});
	
</script>
</head>
<body>

</body>
</html>

<!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() {
		//$('<h2>Hello jQuery mofo</h2>').appendTo('body');
		$('<h2>').html('Hello jQuery').appendTo('body');
		
	});
	
</script>
</head>
<body>

</body>
</html>

jQueryEx01.ex25 - attr() : 문서 객체 생성(2) 

<!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() {
		//$('<h2>Hello jQuery mofo</h2>').appendTo('body');
		//$('<h2>').html('Hello jQuery').appendTo('body');
		
		$('<img />').attr('src', './images/Desert.jpg')
		.appendTo('body');
	});
	
</script>
</head>
<body>

</body>
</html>

<!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() {
		//$('<h2>Hello jQuery mofo</h2>').appendTo('body');
		//$('<h2>').html('Hello jQuery').appendTo('body');
		/*
		$('<img />').attr('src', './images/Desert.jpg')
		.appendTo('body');
		*/
		$('<img />')
			.attr('src', './images/Desert.jpg')
			.attr('width', 512)
			.attr('height', 384)
			.appendTo('body');
	});
	
</script>
</head>
<body>

</body>
</html>

<!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() {
		//$('<h2>Hello jQuery mofo</h2>').appendTo('body');
		//$('<h2>').html('Hello jQuery').appendTo('body');
		/*
		$('<img />').attr('src', './images/Desert.jpg')
		.appendTo('body');
		*/
		/*
		$('<img />')
			.attr('src', './images/Desert.jpg')
			.attr('width', 512)
			.attr('height', 384)
			.appendTo('body');
		*/
		$('<img />', {
			src: './images/Desert.jpg',
			width: 512,
			height: 384
		}).appendTo('body');
	});
	
</script>
</head>
<body>

</body>
</html>

jQueryEx01.es26 - before(), prepend(), append(), after() : 문서 객체 삽입(1)

<!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() {
		// .image의 크기를 조정합니다.
		$('img').css('width', 250);
		
		// 함수를 2초마다 실행합니다.
		setInterval(function () {
			// 첫 번째 이미지를 마지막으로 보냅니다.
		$('img').first().appendTo('body');
		}, 2000);
	});
</script>
</head>
<body>
	<img src="./images/Chrysanthemum.jpg" />
	<img src="./images/Desert.jpg" />
	<img src="./images/Hydrangeas.jpg" />
	<img src="./images/Jellyfish.jpg" />
	<img src="./images/Koala.jpg" />
</body>
</html>

맨 처음 사진을 맨 뒤로 2초마다 보냄

jQueryEx01.ex27 - on() 이벤트

<!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() {
		$('#btn1').on('click', function() {
			console.log('btn1 클릭');
		});
		
		$('#btn2').on('mouseover', function() {
			console.log('btn2 마우스 오버');
		});
	});
</script>
</head>
<body>
	<button id="btn1">버튼 1</button>
	<button id="btn2">버튼 2</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	.reverse {background-color: black; color: white;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('h2').on('click', function() {
			//console.log($(this).html());
			//$(this).addClass('reverse');
			$(this).toggleClass('reverse');
		});
	});
</script>
</head>
<body>
	<h2>header - 0</h2>
	<h2>header - 1</h2>
	<h2>header - 2</h2>
</body>
</html>

toggleClass - 누르면 까만색 배경이 되고, 다시 또 누르면 없어진다

jQueryEx01.ex28 - 토글 기능(두 개의 이벤트)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	.reverse {background-color: black; color: white;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('h2').on({
			// 두 개의 이벤트
			mouseenter: function() {
				$(this).addClass('reverse');
			},
			mouseleave: function() {
				$(this).removeClass('reverse');
			}
		});
	});
</script>
</head>
<body>
	<h2>header - 0</h2>
	<h2>header - 1</h2>
	<h2>header - 2</h2>
</body>
</html>

마우스 대면 토글 기능이 켜지고 마우스를 때면 꺼진다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	.reverse {background-color: black; color: white;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		// 이벤트를 연결합니다
		$('h1').hover(function() {
			$(this).addClass('reverse');
		}, function() {
			$(this).removeClass('reverse');		
		});
	});
</script>
</head>
<body>
	<h1>header - 0</h1>
	<h1>header - 1</h1>
	<h1>header - 2</h1>
</body>
</html>

hover() - mouseenter, mouseleave의 기능을 합친 것!

jQueryEx01.ex29 - off() : 이벤트 연결 제거

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	.reverse {background-color: black; color: white;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('h2').on('click', function() {
			console.log('click 됨');
			$(this).off();
		});
	});
</script>
</head>
<body>
	<h2>header - 0</h2>
	<h2>header - 1</h2>
	<h2>header - 2</h2>
</body>
</html>

한 번 클릭한 후에 off()되어 또 다시 클릭해도 console.log('click 됨') 출력이 안됨

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	.reverse {background-color: black; color: white;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		/*
		$('h2').on('click', function() {
			console.log('click 됨');
			$(this).off();
		});
		*/
		$('h2').one('click', function() {
			console.log('click 됨');
		});
	});
</script>
</head>
<body>
	<h2>header - 0</h2>
	<h2>header - 1</h2>
	<h2>header - 2</h2>
</body>
</html>

one이란 메소드를 사용하여 위와 같은 기능을 똑같이 구현 가능하다.

jQueryEx01.ex30 - 이벤트 객체

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	canvas { border: 1px solid black;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var canvas = document.getElementById('canvas');
		$(canvas).on('click', function(event) {
			console.log(event.pageX);
			console.log(event.pageY);
		});
	});
</script>
</head>
<body>
<canvas id="canvas" width="700" height="400"></canvas>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	canvas { border: 1px solid black;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var canvas = document.getElementById('canvas');
		//$(canvas).on('click', function(event) {
		$('canvas').on('click', function(event) {
			console.log(event.pageX);
			console.log(event.pageY);
		});
	});
</script>
</head>
<body>
<canvas id="canvas" width="700" height="400"></canvas>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	canvas { border: 1px solid black;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var canvas = document.getElementById('canvas');
		//$(canvas).on('click', function(event) {
		$('#canvas').on('click', function(evt) {
			console.log(event.pageX);
			console.log(event.pageY);
		});
	});
</script>
</head>
<body>
<canvas id="canvas" width="700" height="400"></canvas>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	canvas { border: 1px solid black;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		/*
		var canvas = document.getElementById('canvas');
		//$(canvas).on('click', function(event) {
		$('#canvas').on('click', function(evt) {
			console.log(event.pageX);
			console.log(evt.pageY);
		});
		*/
		var canvas = document.getElementById('canvas');
		var context = canvas.getContext('2d');
		
		$(canvas).on({
			mousedown: function(e) {
				var x = e.pageX;
				var y = e.pageY;
				
				context.beginPath();
				context.moveTo(x, y);
			},
			mouseup: function(e) {
				var x = e.pageX;
				var y = e.pageY;
				
				context.lineTo(x, y);
				context.stroke();
			}
		});
	});
</script>
</head>
<body>
<canvas id="canvas" width="700" height="400"></canvas>
</body>
</html>

jQueryEx01.ex31 - trigger() : 이벤트 강제 발생

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	canvas { border: 1px solid black;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('h2').on('click', function() {
			// html 변경
			$(this).html(function(index, item) {
				return item + "*";
			});
		});
	});
</script>
</head>
<body>
<h2>Start: </h2>
<h2>Start: </h2>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	canvas { border: 1px solid black;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('h2').on('click', function() {
			// html 변경
			$(this).html(function(index, item) {
				return item + "*";
			});
		});
		
		setInterval(function() {
			$('h2').last().trigger('click');
		}, 1000);
	});
</script>
</head>
<body>
<h2>Start: </h2>
<h2>Start: </h2>
</body>
</html>

jQueryEx01.ex32 - 기본 이벤트와 이벤트 전달

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

<style type = "text/css">
	* { border: 1px solid orange; text-align: center;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#h').on('click', function() {
			console.log('h');
		});
		
		$('#p').on('click', function() {
			console.log('p');
		});
	});
</script>
</head>
<body>

<div onclick="console.log('div')">
	<div onclick="console.log('inner-div')">
		<h1 id="h1">
			<p id="p">Paragraph</p>
		</h1>
	</div>
</div>

</body>
</html>

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

<style type = "text/css">
	* { border: 1px solid orange; text-align: center;}
</style>
<!--  라이브러리 추가 -->
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#h').on('click', function() {
			console.log('h');
		});
		
		$('#p').on('click', function(e) {
			console.log('p');
			if(e.stopPropagation) {
				e.stopPropagation();
			}
		});
	});
</script>
</head>
<body>

<div onclick="console.log('div')">
	<div onclick="console.log('inner-div')">
		<h1 id="h">
			<p id="p">Paragraph</p>
		</h1>
	</div>
</div>

</body>
</html>

jQueryEx01.ex33

<!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() {
		
	});
</script>
</head>
<body>

<h2><a href="https://www.daum.net">다음 바로가기</a></h2>
<h2><a href="https://www.naver.com">네이버 바로가기</a></h2>

</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() {
		$('a').on('click', function() {
			$(this).css('background-color', 'blue');
		});
	});
</script>
</head>
<body>

<h2><a href="https://www.daum.net">다음 바로가기</a></h2>
<h2><a href="https://www.naver.com">네이버 바로가기</a></h2>

</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() {
		$('a').on('click', function(e) {
			$(this).css('background-color', 'blue');
			
			// 전송에 대한 기본이벤트 제거
			e.preventDefault();
		});
	});
</script>
</head>
<body>

<h2><a href="https://www.daum.net">다음 바로가기</a></h2>
<h2><a href="https://www.naver.com">네이버 바로가기</a></h2>

</body>
</html>

e.preventDefault(); 하면 링크를 타고 넘어가질 않는다

마우스 이벤트

jQueryEx01.ex34 - 키보드 이벤트(keyup 이벤트)

<!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() {
		$('textarea').keyup(function() {
			// 남은 글자 수를 구합니다
			var inputLength = $(this).val().length;
			var remain = 150 - inputLength;
			
			// 문서 객체에 입력합니다
			$('h1').html(remain);
		});
	});
</script>
</head>
<body>
	<div>
		<p>지금 내 생각을</p>
		<h1>150</h1>
		<textarea cols="70" rows="5"></textarea>
	</div>
</body>
</html>

지정된 150byte를 초과하면 -로 표기 됨

jQueryEx01.ex35 - 윈도 이벤트

<!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() {
		// 스크롤 이벤트 발생 시
		var scrollHeight = $(window).scrollTop() + $(window).height();
		var documentHeight = $(document).height();
		
		// 스크롤 높이와 문서의 높이가 같을 때
		if(scrollHeight == documentHeight) {
			for (var i = 0; i<10; i++) {
				$('<h1>Infinity Scroll</h1>').appendTo('body');
			}
		}
	});
	
	// 테스트를 위해 내부에 공간을 채워둡니다.
	$(document).ready(function () {
		for(var i=0; i<20; i++) {
			$('<h1>Infinity Scroll</h1>').appendTo('body');
		}
	});
</script>
</head>
<body>

</body>
</html>

jQueryEx01.ex36 - 입력 양식 이벤트

<!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() {
		$('#my-form').submit(function (event) {
			// 입력 양식의 value를 가져옵니다.
			var name = $('#name').val();
			var password = $('#password').val();
			
			// 출력합니다
			alert(name + ' : ' + password);
			
			// 기본 이벤트를 제거합니다.
			event.preventDefault();
		});
	});
	
</script>
</head>
<body>
	<form id="my-form">
		<table>
			<tr>
				<td>이름:	</td>
				<td><input type = "text" name = "name" id = "name" /></td>
			</tr>
			<tr>
				<td>비밀번호 : </td>
				<td><input type = "password" name="password" id="password" /></td>
			</tr>
		</table>
		<input type="submit" value="제출" />
	</form>
</body>
</html>

jQueryEx01.ex37

<!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() {
		$('#all-check').change(function () {
			if (this.checked) {
				$('#check-item').children().prop('checked', true);
			} else {
				$('#check-item').children().prop('checked', false);
			}
		});
	});
	
</script>
</head>
<body>
	<input type="checkbox" id="all-check" />
	<label>All</label>
	<div id="check-item">
		<input type="checkbox" />
		<label>A Option</label>
		<input type="checkbox" />
		<label>B Option</label>
		<input type="checkbox" />
		<label>C Option</label>
	</div>
</body>
</html>

attr(), 문서객체제거 및 생성, before(), prepend(), append(), after(), on(), 토글기능, off(), 이벤트객체, trigger(), 이벤트전달, 마우스이벤트, 윈도우이벤트, infinity scroll, 입력양식 이벤트

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

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

Lecture 41 - jQuery(2) 배열 관리, extend(), noConflict(), filter(), end(), eq(), add(), is(), find(), addClass(), removeClass(), toggleClass()  (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

관련글

댓글

티스토리툴바