본문 바로가기
국비 학원 가서 개발새발

국비학원 46일차) jquery, ajax

by 휴일이 2022. 12. 5. 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

jquery , ajax를 쓸 때 추가해야하는 라이브러리

 

 

 

 

 

클릭하면 사라지기

<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>

$(document).ready(function(){
	$("h2").click(function(){
		$(this).hide();
	});
});

</script>
</head>
<body>
<h2>클릭하면 사라집니다</h2>
</body>
</html>

 

 

 

 

 

마우스 움직이면 숫자 증가

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style type="text/css">
	div.out{
		width:200px;
		height:60px;
		background-color:yellow;
	}
</style>

</head>
<body>
	<div class="out">
	<p>마우스를 여기로 움직이세요</p>
	<p>0</p>
	</div>
	<script type="text/javascript">
	
	var i = 0;
	
	$("div.out").mouseover(function() {
		$("p:first", this).text("mouse over");
		$("p:last", this).text(++i);
	});
	
	</script>
</body>
</html>

 

 

 

 

text를 클릭하면 노랑, focus가 아니면 하얀색

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
	$("input").focus(function() {
		$(this).css("background-color", "pink");
	});
	$("input").blur(function(){
		$(this).css("background-color", "white");
	})
})


</script>
</head>
<body>
	아이디 : <input type="text" name="id"><br>
	
</body>
</html>

 

 

 

 

x좌표 y좌표

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
	
	<div id="log"></div>
	<script type="text/javascript">
	
	$(document).mousemove(function(e){
		$("#log").text("e.pageX:"+e.pageX+", e.pageY:"+e.pageY);
		
	});
	
	</script>
</body>
</html>

 

 

 

 

버튼 클릭하면 이미지가 보이고 다시 클릭하면 이미지 사라짐

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
	<button type="button">클릭스</button>
	<img id="dog" src="dog.jpg" width="120" height="100" style="display:none"/>
	<script type="text/javascript">
	
	$(document).ready(function(){
		$("button").click(function(){
//			$("#dog").show("slow");
			$("#dog").toggle();
		});
	});
	
	</script>
</body>
</html>

 

 

 

 

버튼을 클릭하면 이미지가 움직임

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	$("button").click(function(){
		$("#dog").animate({left:'100px'});
	});
});

</script>
</head>
<body>
	
	<img id="dog" src="dog.jpg" width="120" height="100" style="position:relative"/>
	<button>animate()</button>
	
</body>
</html>

 

 

 

 

text()를 클릭하면 텍스트 태그, html()을 클릭하면 html 태그

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	$("#text").click(function() {
		alert($("#target").text());
	});
	$("#html").click(function(){
		alert($("#target").html());
	});
});

</script>

</head>
<body>
	
	<p id="target">이것은 <strong>하나의</strong> 단락입니다</p>
	<button type="button" id="text">text()</button>
	<button type="button" id="html">html()</button><br>
	
	text() : 선택된 요소의 텍스트를 반환 <br>
	html(); 선택된 요소의 HTML 태그가 포함된 콘텐츠를 반환 <br>
	val(); 입력 필드의 값을 반환 <br>
	css : 요소의 스타일 속성을 반환 <br>
	attr : 오소의 속성을 반환 <br>
	position : 요소의 위치를 반환 <br>
	
</body>
</html>

 

 

 

 

text()클릭하면 얇은글씨 안녕하세요?

html() 클릭하면 굵은글씨 안녕하세요?

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	$("#text").click(function(){
		$("#target").text("안녕하세요 ?");
	});
	$("#html").click(function(){
		$("#target").html("<strong>안녕하세요 ?<strong>");
	});
});

</script>
</head>
<body>
	<p id="target">이것은 <strong>하나의</strong>단락입니다</p>
	<button type="button" id="text">text()</button>
	<button type="button" id="html">html()</button><br>
</body>
</html>

 

 

 

 

 

버튼 누르면 text에 써져있던 글자 alert

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	$("button").click(function(){
		alert($("#target").val());
	});
});
</script>
</head>
<body>
이름 : <input type="text" id="target" value=""><br/>
<button id="text">val()</button>

</body>
</html>

 

 

 

 

버튼 누르면 이미지의 src 뜨기

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	$("button").click(function(){
		alert($("#dog").attr("src"));
	});
});
</script>

</head>
<body>
	<img id="dog" src="dog.jpg" width="120" height="100"/>
<button>attr()</button><br>
attr : 요소의 속성을 반환
</body>
</html>

 

 

 

 

text() : 선택된 요소의 텍스트를 반환 <br>
html(); 선택된 요소의 HTML 태그가 포함된 콘텐츠를 반환 <br>
val(); 입력 필드의 값을 반환 <br>
css : 요소의 스타일 속성을 반환 <br>
attr : 오소의 속성을 반환 <br>
position : 요소의 위치를 반환 <br>

 

.append() 선택된 요소의 마지막에 추가
.prepend() 선택된 요소의 첫번째에 추가
.appendTo() 선택된 요소를 해당 요소의 마지막에 추가
.prependTo() 선택된 요소를 해당 요소의 첫번째에 추가

 

 

 

 

버튼 누르면 앞에, 뒤에 글씨가 써짐

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	$("#button1").click(function(){
		$("p").append("<b style='color:red'>Hello</b>");
	});
	$("#button2").click(function(){
		$("p").prepend("<b style='color:red'>Hello</b>");
	});
});
</script>

</head>
<body>
<p> I would like to say : </p>
<button id="button1">append()</button>
<button id="button2">prepend()</button>
<br>
.append() 선택된 요소의 마지막에 추가 <br>
.prepend() 선택된 요소의 첫번째에 추가 <br>
.appendTo() 선택된 요소를 해당 요소의 마지막에 추가 <br>
.prependTo() 선택된 요소를 해당 요소의 첫번째에 추가 <br>

</body>
</html>

 

 

 

 

 

empty() 누르면 빈 공간, remove() 누르면 완전히 삭제

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
p{background-color:yellow ;}
.container{height:80px; width:200px; border:1px dotted red;}
</style>
<script type="text/javascript">

$(document).ready(function(){
	$("#button1").click(function(){
		$(".container").remove();
	});
	$("#button2").click(function(){
		$(".container").empty();
	});
});

</script>
</head>
<body>
	
	<button id="button1">remove()</button>
	<button id="button2">empty()</button><br/>
	<div class="container">
	<p class = "hello">Hello</p>
	<p class = "goodbye">Good Bye</p> 
	</div>
	
</body>
</html>

 

 

 

 

 

 

css 선택된 요소의 스타일 속성 반환, 설정
addClass() 선택된 요소에 하나 이상의 클래스 추가
removeClass() 선택된 요소의 하나 이상의 클래스 삭제

text() 선택된 요소 안에 내용을 가져오거나, 다른 내용으로 바꿈

 

 

 

 

클릭하면 색바뀌기

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
div{width:60px; height:60px;}
</style>
</head>
<body>

	<div id="div1" style="background-color: blue"></div>
	<script type="text/javascript">
	
	$(document).ready(function(){
		$("#button1").click(function(){
			var color= $("#div1").css("background-color");
			$("#result").text("background-color:"+color);
		})
		$("#button2").click(function(){
			$("#div1").css("background-color","red");
		})
	})
	
	</script>
	<button id="button1">css(element)</button>
	<button id="button2">css(element,style)</button>
	
	<p id="result">여기에 결과가 표시됩니다 </p>
	
</body>
</html>

 

 

 

 

 

버튼 클릭하면 .warning 이 적용됨

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$("#button1").click(function(){
			$("#div1").addClass("warning");
		});
	});	
	</script>

<style type="text/css">
.warning{
border:1px solid black;
background-color:yellow;
}

</style>
</head>
<body>
	
	<div id="div1">
	<p>예제 단락입니다</p>
	</div>
	<br>
	<button id="button1">addClass()</button>
	
</body>
</html>

 

 

 

 

 

 

 

<thead>태그는 HTML테이블에서 헤더 콘텐츠들을 하나의 그룹으로 묶을 때 사용

<tbody> 요소는 표의 여러 행(<tr>)을 묶어서 표 본문을 구성함</tbody>

 

 

 

 

 

클릭하면 테이블 나오고, clear하면 테이블 사라짐

 

 

 

 

 

 

알림으로 div 안의 내용

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
//children은 어떤 요소의 자식 요소 선택
$(document).ready(function(){
	var $nodes = $('#root').children();
	alert('Number of nodes is '+$nodes.length);
	var txt="";
	$('#root').children().each(function(){
		txt+=$(this).text();
	});
	alert(txt);
	
	//jQuery로 배열을 사용할 때 each() for in 반복문과 같이 배열이나 객체 요소 검사 가능
});

</script>
</head>
<body>

	<div id="root">
	<div>Darjeeling</div>
	<div>Assam</div>
	<div>Kerala</div>
	</div>

</body>
</html>

 

 

 

 

 

 

children은 어떤 요소의 자식 요소 선택

jQuery로 배열을 사용할 때 each() for in 반복문과 같이 배열이나 객체 요소 검사 가능

 

bind(),on() 둘 다 이벤트 처리 기능을 하는 메서드

 

 

 

 

 

 

각각 누르면 alert 내용 뜸(버튼 아니고 해당 text누르면)

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!-- bind(),on() 둘 다 이벤트 처리 기능을 하는 메서드 -->
<script type="text/javascript">

$(document).ready(function(){
	$('.bold').bind('click', function(){
		alert('볼드 버튼');
	});
	$('.italic').bind('click', function(){
		alert('이텔릭 버튼');
	});
	
});

</script>
</head>
<body>
	<span class="bold button">볼드</span>
	<span class="italic button">이텔릭</span>
	
</body>
</html>

 

 

 

 

 

 

마우스 위로 올리면 배경색 폰트색 바뀜

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
.buttons{
width:80px;
float:left;
text-align:center;
margin:5px;
border:2px solid;
font-weight:bold;
}

</style>
</head>
<body>
<script type="text/javascript">

$(document).ready(function(){
	$('.buttons').mouseover(function(){
		$('p').css({
			'background-color':'cyan',
			'font-weight':'bold',
			'color':'blue'
		});
	});
});
</script>

<span class="buttons">하이라이트</span><br><br>
<p>나는멋쟁이</p>
</body>
</html>

 

 

 

 

 

add 누르면 글 뜨고 remove 누르면 글 삭제

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style type="text/css">
.buttons{
width:80px;
float:left;
text-align:center;
margin:5px;
border:2px solid;
font-weight:bold
}

</style>
</head>
<body>
<script type="text/javascript">

$(document).ready(function(){
	$('.add').click(function(){
		$('div').prepend('<p>랄랄랄ㄹ라라라</p>');
	});
	$('.remove').click(function(){
		$('p').remove();
	});
});

</script>
<span class="add buttons">add</span>
<span class="remove buttons">remove</span><br>
<div>
</div>
</body>
</html>

 

 

 

 

비동기로 출력하기

비동기테스트 누르면 5초 있다가 count 값이 뜸

jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
var xhr; //통신의 주체

function createXMLHttpRequest() {
	if(window.ActiveXObject) { //ms일 경우, 
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	//익스플로어는 객체 생성된 부분이 안 보임
	} else { // ms가 아닌 경우 
		xhr = new XMLHttpRequest();
	}
}

function startRequest() {
	createXMLHttpRequest();
	//서버 응답이 오면 수행될 메서드 등록
	xhr.onreadystatechange=callback;
	
	//요청 방식 get, servlet프로그램명, true:비동기
	xhr.open("get", "AsynServlet", true);
	xhr.send(null);
}

function callback() {
	
	if(xhr.readyState==4) {
		if(xhr.status==200)
		document.getElementById("result").innerHTML=xhr.responseText;
	}
	
}

</script>
</head>
<body>
<button type="button" onclick="startRequest()">비동기 테스트</button>
<span id="result"></span>
</body>
</html>

 

 

servlet

    private int count=0;
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		response.setContentType("text/html;charset=utf-8");
		response.setHeader("Cache-Control", "no-cache");
		PrintWriter out=response.getWriter();
		
		try {
			Thread.sleep(5000);
		} catch(InterruptedException e) {
			e.printStackTrace();
		}
		out.print("count : "+count++);
		System.out.println(count);
		out.close();

		
	}

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90

'국비 학원 가서 개발새발' 카테고리의 다른 글

국비학원 48일차) ajax, Jquery, js  (0) 2022.12.07
국비학원 47일차) ajax, Jquery  (0) 2022.12.06
국비학원 33일차) 혼자 개발하기  (0) 2022.11.16
국비학원 30일차) 스프링 혼자 공부  (0) 2022.11.11
국비학원 29일차) mvc  (0) 2022.11.09

관련글

티스토리툴바