jQuery 제이쿼리 시작

Web/JavaScript

jQuery 제이쿼리 시작

Jaybon 2020. 6. 2. 14:02

유용한 함수와 기능들을 만들지 않아도 라이브러리에서 제공해준다

https://www.w3schools.com/jquery/jquery_hide_show.asp

jQuery Effects - Hide and Show

jQuery Effects - Hide and Show Hide, Show, Toggle, Slide, Fade, and Animate. WOW! Click to show/hide panel Because time is valuable, we deliver quick and easy learning. At W3Schools, you can study everything you need to learn, in an accessible and handy fo

www.w3schools.com

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

	<div id="reply-1">첫번째 댓글 입니다.</div>

	<input type="text" id="tf-reply"/>
	<button onclick="start()">댓글쓰기</button>

	<script>
		function start() {
			var a = $('#tf-reply').val();
            $('#reply-1').prepend("<div id='reply-2'>" + a + "</div>");
			// alert(a);
		}
	</script>

</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

	<div id="reply-1">첫번째 댓글 입니다.</div>

	<input type="text" id="tf-reply"/>
	<button onclick="start()">댓글쓰기</button>

	<script>
		function start() {
			var a = $('#tf-reply').val();
            $('#reply-1').before("<div id='reply-2'>" + a + "</div>");
			// alert(a);
		}
	</script>

</body>
</html>

맨위의 댓글 찾기

id 번호 늘리기

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div {
	border: 1px solid black;
	margin: 5px;
	padding: 5px;
}
</style>
</head>
<body>

	<div id="reply-box">
		<div id="reply-1" class="re">첫번째 댓글 입니다.</div>
	</div>

	<input type="text" id="tf-reply" />
	<button onclick="start()">댓글쓰기</button>

	<script>
		var num = 1; // 이 값은 원래 db에서 가져와야됨
		function start() {
			var a = $('#tf-reply').val();
			num++;
			$('#reply-box').prepend("<div id='reply-" + num + "'>" + a + "</div>");
		}
	</script>

</body>
</html>