본문 바로가기
JQuery

JQuery(4) - 복습(선택자, 이벤트), 추가 정리사항

traveler-Hwang 2024. 7. 15. 15:08
728x90
반응형

1) JQuery

   1-1) 복습

      1-1-1) 선택자

      1-1-2) 이벤트

   1-2) 추가 정리사항

 

 

 

 

 

1) JQuery

1-1) 복습

[src/main/java] - [net.datasa.web2.controller] 안에 JqueryController.java 파일 생성 후 아래와 같이 작성 

package net.datasa.web2.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import lombok.extern.slf4j.Slf4j;

// web2 프로젝트에 controller와 HTML 추가

@Slf4j
@Controller
@RequestMapping("jq")
public class JqueryController {
	@GetMapping("jquery1")
	public String jquery1() {
		return "jqView/jquery1";
	}
	
	@GetMapping("jquery2")
	public String jquery2() {
		return "jqView/jquery2";
	}
	
	@GetMapping("jquery3")
	public String jquery3() {
		return "jqView/jquery3";
	}
	
	@GetMapping("jquery4")
	public String jquery4() {
		return "jqView/jquery4";
	}
}

 

 

[src/main/resources] - [templates] 안에 home.html 파일 생성 후 아래와 같이 작성

<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<title>web2</title>
</head>
<body>
	<h1>[ web2 ]</h1>
	
	<p th:if="${session.loginId != null}" th:text="로그인해야만보이는페이지"></p>
	<p th:if="${session.loginId == null}" th:text="환영합니다."></p>
	
	<ol>
		<li>Lombok & Logger 사용
			<ul>
				<li>
					<a href="lom/lombok">Lombok 사용하기</a>
				</li>
				<li>
					<a href="lom/logger">Logger 사용하기</a>
				</li>
				<!--
				여기는 메인화면입니다. 위의 l은 소문자 L입니다.
				글꼴 때문에 꼬부라져 보이는 것입니다.
				-->
			</ul>
		</li>
		<li>서버로 데이터 보내기/받기
			<ul>
				<li>
					<a href="param/view1">GET 방식으로 보내기</a>
				</li>
				<li>
					<a href="param/view2">POST 방식으로 보내기</a>
				</li>
				<li>
					<a href="param/model">Model 객체 이용하기</a>
				</li>
			</ul>
		</li>
		<li> 예제
			<ul>
				<li>
					<a href="ex/calc1">계산기</a>
				</li>
				<li>
					<a href="ex/calc2">계산기2</a>
				</li>
				<li>
					<a href="ex/count">방문횟수 카운트</a>
				</li>
				<li>
					<a href="ex/count2">닉네임 설정 및 방문횟수 카운트</a>
				</li>
			</ul>
		</li>
		
		<li> jQuery
			<ul>
				<li>
					<a href="jq/jquery1">선택자</a>
				</li>
				<li>
					<a href="jq/jquery2">이벤트</a>
				</li>
				<li>
					<a href="jq/jquery3">배열</a>
				</li>
				<li>
					<a href="jq/jquery4">문서객체 조작</a>
				</li>
			</ul>
		</li>
		
		<li> 세션 사용
			<ul>
				<li>
					<a href="ss/session1">세션에 값 저장</a>
				</li>
				<li>
					<a href="ss/session2">세션에서 값 읽기</a>
				</li>
				<li>
					<a href="ss/session3">세션의 값 삭제</a>
				</li>
				
				<li>
					<a href="ss/login">로그인</a>
				</li>
				<li>
					<a href="ss/logout">로그아웃</a>
				</li>
				<li>
					<a href="ss/loginTest">로그인해야 들어갈 수 있는 메뉴</a>
				</li>
			</ul>
		</li>
		<li> 쿠키 사용
			<ul>
				<li>
					<a href="ck/cookie1">쿠키 저장</a>
				</li>
				<li>
					<a href="ck/cookie2">쿠키 읽기</a>
				</li>
				<li>
					<a href="ck/cookie3">쿠키 삭제</a>
				</li>
			</ul>
		</li>
		<li> localStorage와 sessionStorage의 사용
			<ul>
				<li>
					<a href="local/save">값 저장</a>
				</li>
				<li>
					<a href="local/read">값 읽기</a>
				</li>
				<li>
					<a href="local/delete">값 삭제</a>
				</li>
			</ul>
		</li>
		<li> Thymeleaf 문법
			<ul>
				<li>
					<a href="th/thymeleaf1">타임리프 연습1</a>
				</li>
				<li>
					<a href="th/thymeleaf2">타임리프 연습2</a>
				</li>
			</ul>
		</li>
	</ol>
</body>
</html>

 

 

 

1-1-1) 선택자

(1) [src/main/resources] - [templates.jqView] 안에 jquery1.html 파일 생성 후 아래와 같이 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script th:src="@{/js/jquery-3.7.1.min.js}"></script>
<script>
	$(document).ready(function() {
		// 전체 선택자
		$("*").css("color", "green");
		
		// 태그 선택자
		$("p").css("color", "blue");
		
		// id 선택자
		$("#text1").css("color", "red");
		
		// class 선택자
		$(".text2").css("color", "pink");
		
		// 자식 선택자
		// $("div > p").css("color", "red");
		
		// 자손 선택자
		$("div p").css("color", "red");
		
		// 속성 선택자
		$("input[type='password']").css({
			"color" : "red",
			"background-color" : "yellow"
		});
	});
</script>
</head>
<body>
	<h1>[ jquery - 선택자 ]</h1>
	<p>p태그 사용</p>
	<p>p태그 사용</p>
	<p id="text1">p태그 사용</p>
	<p class="text2">p태그 사용</p>
	<p class="text2">p태그 사용</p>
	
	<div>
		<p>이 글자는 빨간색이 됩니다.</p>
		<span>
			<p>이 글자는 빨간색이 되지 않습니다.</p>
		</span>
	</div>
	<div>
		<p>이 글자도 빨간색이 됩니다.</p>
	</div>
	
	<form>
		<input type="text" value="텍스트 필드">
		<input type="password" value="12345">
		<button>버튼</button>
	</form>
	
</body>
</html>

 

 

(2) 결과 화면

첫 접속 화면

 

 

"선택자" 문구 클릭 시 화면

 

 

 

1-1-2) 이벤트

(1) [src/main/resources] - [templates.jqView] 안에 jquery2.html 파일 생성 후 아래와 같이 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery2</title>
<script th:src="@{/js/jquery-3.7.1.min.js}"></script>
<script>
	$(document).ready(function() {
		// on() : 객체와 이벤트 함수를 연결시키는 역할을 한다.
		$("#button1").click(button1test);
		$("#button2").on("click", button2test);
		$("#button3").on("click", button3test);
		
		$("#text1").on("click", function() {
			alert("text1 클릭함");
		});
		$("#text2").on("click", function() {
			// trigger : 이벤트 강제 발생(특정 객체에 대한 이벤트 상황을 강제로 만들어주는 역할을 한다.)
			$("#text1").trigger("click");
		});
		$("#text3").on("click", function() {
			setTimeout(function() {
				$("#text1").trigger("click");
			}, 3000);
		});
		
		// mouseenter : 어딘가에 마우스 포인트가 올라가는 경우에 해당하는 이벤트
		$("#img1, #img2").on("mouseenter", function() {
			$(this).css("width", 100);
			$(this).css("height", 100);
		});
		// mouseleave : 다른 곳으로 마우스 포인트가 옮겨가는 경우에 발생하는 이벤트
		$("#img1, #img2").on("mouseleave", function() {
			$(this).css("width", 200);
			$(this).css("height", 200);
		});
		$("#img1, #img2").on("click", function() {
			// 클릭할 때마다 크기가 10픽셀씩 늘어난다.
			// wl은 현재 클릭한 아이콘의 넓이값(width)을 String 타입(문자열)으로 구해준다.
			let wl = $(this).css("width"); // "100px"
			console.log(wl);
			
			// width() : 넓이의 숫자값만을 구해준다.
			// height() : 높이의 숫자값만을 구해준다.
			let w = $(this).width(); // 100
			let h = $(this).height(); // 100
			
			$(this).css("width", (w + 10));
			$(this).css("height", (h + 10));
		});
		
		// focus : 클릭해서 커서를 두고 입력할 수 있는 상태에 해당하는 이벤트
		$("#input1, #input2").on("focus", function() {
			$(this).css("background-color", "yellow");
		});
		// blur : 다른 곳을 클릭하여 focus를 뺏겼을 때 발생하는 이벤트
		$("#input1, #input2").on("blur", function() {
			$(this).css("background-color", "white");
		});
	});
	
	function button1test() {
		alert("button1 클릭함");
	}
	
	function button2test() {
		// off() : 객체와 이벤트 함수의 연결을 끊어버리는 역할을 한다.
		// $("#button1").off();
		// $("#button1").off("click");
		$("#button1").off("click", button1test);
	}
	
	function button3test() {
		$("#button1").on("click", button1test);
	}
</script>
</head>
<body>
	<h1>[ jquery - 이벤트 ]</h1>
	
	<p>이벤트 처리 - on, off</p>
	<p>
		<button id="button1">버튼1</button>
	</p>
	<p>
		<button id="button2">버튼2</button>
	</p>
	<p>
		<button id="button3">버튼3</button>
	</p>
	
	<p id="text1">이벤트 연결된 객체</p>
	<p id="text2">이벤트 강제 발생</p>
	<p id="text3">시간 지연 이벤트</p>
	
	<p>여러 객체의 mouseenter, mouseleave 이벤트</p>
	<p><img id="img1" src="../images/arrowIcon.png"></p>
	<p><img id="img2" src="../images/saveIcon.png"></p>
	
	<p>focus, blur, keyup 이벤트</p>
	<p><input id="input1" type="text"></p>
	<p><input id="input2" type="text"></p>
	
</body>
</html>

 

 

(2) 결과 화면

첫 접속 화면

 

 

"이벤트" 문구 클릭 시 화면

 

 

"버튼1, 버튼2, 버튼3" 버튼 클릭 시 화면

- 버튼1 : "button1 클릭함"이라는 경고창을 띄워줌

- 버튼2 : 버튼1 클릭 시의 이벤트 함수를 발생하지 않도록 함

- 버튼3 : 버튼1 클릭 시의 이벤트 함수를 발생하도록 함

 

 

"이벤트 연결된 객체, 이벤트 강제 발생, 시간 지연 이벤트" 문구 클릭 시 화면

- 이벤트 연결된 객체 : "text1 클릭함"이라는 경고창을 띄워줌

- 이벤트 강제 발생(trigger) : "이벤트 연결된 객체" 문구 클릭 시의 이벤트 함수를 강제로 발생하도록 함

- 시간 지연 이벤트(setTimeout) : "이벤트 연결된 객체" 문구 클릭 시의 이벤트 함수를 일정 시간(3초) 후에 발생하도록 함

 

 

"이미지(2개)" 클릭 시 화면

 

 

 

 

"Input Box(2개)" 입력 시 화면 : 글자수 세서 결과 표시

 

 

 

 

 

1-2) 추가 정리사항

th:src="@{/js/jquery-3.7.1.min.js}"; : thymeleaf를 사용하여 절대경로를 표현하는 코드

>> 사용하는 이유 : src="/js/jquery-3.7.1.min.js"를 사용해도 결과는 같지만

"application.properties"의 설정에서 "/" 뒤의 뭔가가 붙는 경우(“/abc 등”)가 발생해도

자동으로 절대경로를 제대로 적용시키기 위해 사용함!

 

src="/js/jquery-3.7.1.min.js"의 경우에는 application.properties에서 “/” 뒤의 뭔가가 붙는 경우(“/abc 등”)에는

경로 오류가 발생한다!

 

$("*") : JQuery에서 현재 페이지 전부 다를 가리키는 표현이다!

 

 

 

 

 

 

 

저작자표시

'JQuery' 카테고리의 다른 글

JQuery(5) - 복습2(배열, 문서 객체 조작)  (0) 2024.07.16
JQuery(3) - 이벤트, 애니메이션 효과, 예제(버튼 선택에 따른 링크 이동, 텍스트 타이핑 커서 구현)  (0) 2024.06.17
JQuery(2) - 선택자, 배열 및 함수, 문서 객체  (0) 2024.06.14
JQuery(1) - 기본 개념  (0) 2024.06.14

'JQuery' Related Articles

티스토리툴바