데일리로그C:
article thumbnail
Published 2023. 3. 2. 11:40
230302_JQuery JAVA/model2

JQuery 

   ㄴ> java script 확장판임(< script></script> 안에서 작성해야함)

 

1. 연결방법

1) Download 방식

https://jquery.com/download/ - 접속

Download the compressed, production jQuery 3.5.1 - 최신버전을 다운로드

웹서버에 저장후 사용
<script src="/js/jquery-3.5.1.min.js"></script>

 

 

2) CDN 방식 

https://code.jquery.com/ - 접속 

jQuery Core 3.5.1 - uncompressed, minified, slim, slim minified - 클릭 

웹페이지 상단에 적용후 사용
<script>
 src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
 integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
 crossorigin="anonymous">
</script>

 

 

3) jQuery Migrate Plugin 방식

--> 이전, 이후 버전에도 문제 없이 사용하기 위해

웹페이지 상단에 적용후 사용
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

 

test01.jsp

<%@ 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>
</head>
<body>

<!-- JQuery 3번째 방법 -->
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<script>

	//정규식(이용하기)
	$(document).ready(function(){
		// 실행문
		console.log("test 테스트~");
	});
	
	
	function abc(){
		
		//약식 = document.ready 생략가능(가끔 실행 안먹을 떄 있으므로 정규식 사용하기)
		$(function(){
			// 실행문
			console.log("test2 테스트2~");
		});
	}
	
</script>

<span onclick="abc()">클릭</span>

</body>
</html>

 

 

test02.jsp

<%@ 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>
</head>
<body>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<script>
	$(document).ready(function(){
		// 실행문
		$(".logo").css("border","4px solid yellow"); // class logo를 border=4px solid yellow 주겠다
	});
</script>

<header id="header">
	<div class="logo">로고</div>
</header>

</body>
</html>

 

$(.class명).css("속성","값")
$(#id명).css("속성","값")
$(태그명).css("속성","값")

 

 

test02.jsp

<%@ 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>
</head>
<body>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<script>
	// 반복문
	var city = ["서울","대전","대구","부산"];
	for(i=0; i<city.length; i++){
		document.write(city[i] + "<br>");
	}
	
	document.write("<br>");
	
	//반복문(jquery 이용한 - 매개변수 이용)
	$.each(city, function(index, value){
		document.write(index);
		document.write(value);
		document.write("<br>");
	});
	
	document.write("<hr>");
	
	var s = {subject:"html", grade:1, days:20}  // json 타입의 값  {key(변수):value, }
	$.each(s, function(key,value){
		document.write(key+ ":");
		document.write(value);
		document.write("<br>");
	});
	
	document.write("<br>");
	
	for(sub in s) {
		document.write(sub + ":" + s[sub] + "<br>");
	}
    
    document.write("<hr>");
	
	//반복문(map)
	var c2 = $.each(city, function(index, value){ // index
		
		if(index < 2) {
			return value;
		}
	});
	document.write("c2 : " +c2.toString());
	document.write("<br>");
	
	var c3 = $.map(city, function(value, index){ //매개변수의 위치가 each구문과 반대임
	
		if(index < 2) {
			return value;
		}
	});
	document.write("c3 : " +c3.toString());
	document.write("<br>");
    
</script>

</body>
</html>

 

* $.each --> 반복문이지만 조건 사용 못함

 

 

test03.jsp

<%@ 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>
</head>
<body>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

id2 : <input id="id2" value="1111"><br>
id3 : <input id="id3" value="2222"><br>

result2 : <input id="result2" value=""><br>
result3 : <input id="result3" value=""><br>

id4 : <div id="id4"><s>3333</s></div><br>
id5 : <div id="id5">4444</div><br>

result4 : <div id="result4"></div><br>
result5 : <div id="result5"></div><br>


<script>
	console.log(id2.value);
	console.log($("#id3").val());
	console.log(id4.innerHTML);
	console.log($("#id5").text());
	
	////////////////////////////////////////////
	
	result2.value = id2.value;
	
	var id33 = $("#id3").val();
	$("#result3").val(id33);
	
	////////////////////////////////////////////
	
	var str = $("#id4").text(); // 영역에 있으므로 test()로 
	$("#result4").html(str); // 태그까지 같이 출력
	
	var str2 = $("#id5").text(); // 영역에 있으므로 test()로 
	$("#result5").text(str2);
</script>


</body>
</html>

 

test04.jsp

<%@ 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>
</head>
<body>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<style>
.bg {
	padding: 40px;
	background: #ccc;
}
.inner {
	padding: 20px;
	background: #999;
}
</style>
    
<script>
	$(document).ready(function(){
		//.wrap1
		$(".wrap1").mouseover(function(){
			$(".display1").append("<b>마우스오버</b>");
		});
		$(".wrap1").mouseout(function(){
			$(".display1").append("<font color=red>마우스아웃</font>");
		});
		$(".wrap1").mouseleave(function(){
			$(".display1").append("<font color=blue>마우스떠남</font>");
		});
		
		//.wrap2
		$(".wrap2").mouseenter(function(){
			$(".display2").append("<b>마우스들어감</b>");
		});
		$(".wrap2").mouseout(function(){
			$(".display2").append("<font color=red>마우스아웃</font>");
		});
		$(".wrap2").mouseleave(function(){
			$(".display2").append("<font color=blue>마우스떠남</font>");
		});
	});
</script>

<div class="wrap1 bg">
	<div class="inner">mouseover</div>
</div>
<div class="display1"></div>

<br>

<div class="wrap2 bg">
	<div class="inner"> mouseenter</div>
</div>
<div class="display2"></div>

</body>
</html>

 

test05.jsp

<%@ 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>
</head>
<body>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<div id="abc" onclick="aaa()">클릭</div><br>
<div id="def">클릭</div><br>
<div id="ggg">클릭</div><br>


<script>
	function aaa() {
		alert("경고창 띄우기");
	}
	
	
	$("#def").click(function(){
		alert("경고창 띄우기2");
		location.href=""; // jquery 안에 script 사용가능
	});
	
	
	$("#ggg").on("click",function(){
		alert("경고창 띄우기3");
	});
	
</script>

</body>
</html>

 

 

test06.jsp

<%@ 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>
</head>
<body>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>

<span id="bbb">클릭
	<div id="abc" style="display:none">메뉴<br>메뉴1<br>메뉴2</div>
</span>



<script>

	//마우스 올렸을 때
	$("#bbb").on("mouseover",function(){
		$("#abc").show();
	});
	
	// 마우스 들어갔을 때(위와 동일)
	$("#bbb").on("mouseenter",function(){
		$("#abc").show();
	});
	
	// 마우스가 나왔을 때 (서브메뉴 클릭이 안됨)
	$("#bbb").on("mouseout",function(){
		//$("#abc").hide("slow");
	});
	
	// 마우스가 떠났을 때 (서브메뉴 갔다가 다시 클릭으로 갔을 때 hide됨)
	$("#bbb").on("mouseleave",function(){
		$("#abc").hide("slow");
	});
	
</script>


</body>
</html>

 

 

 

test07.jsp  --> 4초마다 사진 자동으로 넘어가게 설정하는 jquery

<style>
	* {
		margin: 0;
		padding: 0;
	}
	body {
		font-family: "굴림", sans-serif;
		font-size: 12px;
	}
	button{
		cursor:pointer;
	}
	#wrap {
		width: 200px;
		margin: 20px auto;
	}
	#wrap .page {
		text-align: right;
		margin-bottom: 5px;
	}
	#wrap .page .page_n {
		display: inline-block;
		margin-right: 10px;
	}
	#wrap .page button {
		border: none;
		background: #666;
		color: #fff;
		width: 20px;
		height: 20px;
		line-height: 1.5;
		overflow: hidden;
	}
	#wrap .vis {
		width: 200px;
		height: 200px;
		border: 2px solid #505900;
		overflow: hidden;
	}	
</style>

<script>
	$(document).ready(function() {
		var totalNum = $(".vis > div").length // 4
		var currentNum = 1;
		$(".page_n > span:first").text(currentNum);
		$(".page_n > span:last").text(totalNum);
		$(".next_b").click(function() {
			currentNum++;
			if (currentNum > totalNum) {
				currentNum = 1;
			}
			$(".vis div:first").insertAfter(".vis div:last");
			$(".page_n > span:first").text(currentNum);
		});
        
		$(".prev_b").click(function() {
			currentNum--;
			if (currentNum < 1) {
				currentNum = totalNum;
			}
			$(".vis div:last").insertBefore(".vis div:first");
			$(".page_n > span:first").text(currentNum);
		});

		//시간 설정 단위로 자동 실행 처리
		setInterval(function() {
			currentNum++;

			if (currentNum > totalNum) {
				currentNum = 1;
			}

			$(".vis div:first").insertAfter(".vis div:last");
			$(".page_n > span:first").text(currentNum);
		}, 4000); //4초
	});
</script>

<div id="wrap">
	<div class="page">
		<span class="page_n">
			<span></span> / <span></span>
		</span>
		<button class="prev_b">&lt; 이전</button>
		<button class="next_b">&gt; 다음</button>
	</div>
	<div class="vis">
		<div><a href="#"><img src="1.jpg" alt="HTML"></a></div>
		<div><a href="#"><img src="2.jpg" alt="CSS"></a></div>
		<div><a href="#"><img src="3.jpg" alt="Javascript"></a></div>
		<div><a href="#"><img src="4.jpg" alt="jQuery"></a></div>
	</div>
</div>

 

 

[ 회원가입 아이디 존재 여부에 따라 ]

<script>
$.ajax({
	url: "idok", //전송받을 페이지 경로
	type: "post", //데이터 읽어오는 방식
	dataType: "text", //데이터 방식
	data: "id="+$("#id").val(), //데이터 전달
	error:function(){ //실패일 경우
		alert("실패");
	},
	success:function(text){ //성공일 경우
		$("#id_result").html(text);
	}
});
</script>

 

저작자표시

'JAVA > model2' 카테고리의 다른 글

230302_web2(7)-분류관리  (0) 2023.03.02
230302_web2(6) - 아이디중복확인  (0) 2023.03.02
230228_web2(5)-첨부파일  (0) 2023.02.28
230228_web2(4)-회원목록  (0) 2023.02.28
230227_web2(3) admin  (0) 2023.02.27
profile

데일리로그C:

@망밍

포스팅이 도움됐다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

profile on loading

Loading...

검색 태그

.value
코딩
HTML
포뇨
Robo3T
나홀로메모장
짱구인형
개발일지
5주차
웹개발
파이썬
코딩오류
스파르타
모두의책리뷰
적응중..
on속성
자바스크립트
MongoDB
CSS
3주차
PROJECT
좋아연
앱개발
그림
몽고DB
메디방
서버
데이터베이스
AWS
4주차

티스토리툴바