스프링 백엔드 개발 문법 총정리, jQuery, Selector spring 총정리

🥕 spring을 공부하며 jQuery & Selector에 대해 정리해볼 것이다! 모두가 백엔드 개발자가 되는 그 날까지..화이팅…✨

📌 jQuery

존 레식이 자바스크립트를 이용해 만든 라이브러리 언어. 함수들의 집합 

#1 호환성 문제 해결 
	-> jQuery 에서 이를 해결하게됨. 
    
#2 쉬운 애니메이션 효과 구현 
	
1) 라이브리 연동 
	offline : 다운받아서 resource 폴더에 넣기 
	online	: CDN 

 	<head>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	</head>

📌 선택자 : Selector

selector는 HTML 요소 선택해서 가져옴

# 선택자 사용
$("") 안에 문자형데이터로 CSS 선택자 입력. 

$("선택자").css("스타일속성명", "값");	--> 스타일 적용 
$("선택자").attr("속성명", "값"); 	--> 속성 적용 

1) jquery 기본 구조 
#1. ready() 함수 : 문서객체가 준비되면...
<script>
	$(document).ready(function(){
		// jquery 작성 

	}); 
</script>
#2. 즉시함수로 : 문서객체가 준비되면...
<script>
	$(function(){
		// jquery 작성 

	}); 
</script>

🌳 기본선택자

1) 직접 선택자 
	전체  	: *		ex) $("*")
	아이디 	: #아이디값
	클래스	: .클래스값 
	태그	: 태그명 
	그룹	: 선택자,선택자,....  
	종속	: 태그명#아이디값    태그명.클래스값	

2) 인접 관계 선택자 
	부모		: $("선택자").parent(); 	.parents() 부모들 -> html까지 
	하위요소	: $("기준요소선택자 요소선택자") 	#wrap h1 
	자식		: $("선택자 > 자식선택자")
			  $("선택자").children("자식선택자"); 
	형		: $("선택자").prev(); 	.prevAll() 형들 
	동생		: $("선택자").next();   .nextAll() 동생들 
	전체형제	: $("선택자").siblings(); 
	가장가까운상위 	: $("선택자").closest("선택자");

🌳 체이닝 기법

$(“선택자”).css(“속성명”, “값”).css(“속성명”, “값”).css()…

🌳 배열 관련 메서드

1) each() / $.each() 
	선택한 요소들의 배열에 저장된 요소를 순서대로 하나씩 선택하면서 인덱스 정보를 가져옴 

	$("선택자").each(function(매개변수1, 매개변수2){ // 실행코드; }); 
	$.each($("선택자"), function(매개변수1, 매개변수2){ //실행코드; }); 
	매개변수1 = 인덱스, 매개변수2 = 요소대입 
	
	$("선택자").each(function(){ $(this) }); 
	$.each($("선택자"), function(){ $(this) }); 
	$(this) = 배열에 저장된 요소가 대입. 

2) $.map()
	배열에 저장된 데이터 수만큼 메서드 반복, 리턴은 메서드에서 반환되는 데이터가 
	새 배열에 저장되 그 배열을 리턴함. 

	$.map(Array, function(매개변수1, 매개변수2){
		......
		return 데이터; 
	}); 

	매개변수1 = 데이터 
	매개변수2 = 인덱스

🌳 속성 탐색자

🌱선택한 요소를 기준으로, 일치하는 속성의 포함여부를 따져 요소를 선택

1) $(“선택자[속성명]”) : 선택한 요소에 지정한 속성이 있는 요소만 선택 $(“h1[class]”)
2) $(“선택자[속성명=값]”) : 선택한 요소에 속성명=값이 맞는 요소
3) $(“선택자[속성명^=값]”) : 해당 속성에 값으로 시작하는 요소 선택
4) $(“선택자[속성명$=값]”) : 해당 속성에 값으로 끝나는 요소 선택
5) $(“선택자[속성명*=값]”) : 해당 속성에 값을 포함하는 요소 선택
6) $(“:type속성값”) : input 태그의 type 속성값이 일치하는 요소만 선택 $(“:radio”)
7) $(“선택자:visible/hidden”) : 선택 요소가 visible / hidden 상태인것
8) $(“선택자:selected”) : selected 상태인 요소 선택
9) $(“선택자:checked”) : 체크된 상태인 요소 선택

🌳 유용한 메서드

is()	: 선택한 요소의 상태가 지정한 속성과 일치하면 true, 아니면 false
	$("선택자").is(":checked"); 
    
get()	: 선택자에 get(0)을 적용하면 자바스크립트 DOM방식 스타일에 사용가능 
	$("선택자").get(0).style.color="#fff"; 
    

has()	: 선택요소중 지정요소를 포함하는 것만 선택 
	$("li").has("span") : li중 span을 포함하는 li 
    
not()	: 선택 요소중 not으로 지정한것 제외하고 
	$("li").not(":first");
    
find()	: 선택 요소중 특정 요소를 한번 더 찾기 
	$("li").find("strong");

🌳 속성 조작 메서드

1) $("선택자").html()	: 선택요소의 하위 요소를 가져와 문자열로 리턴 
		.html("새요소") : 선택요소의 하위요소를 모두 지우고 새요소로 바꿔줌. 

2) $("선택자").text()	: 선택요소의 텍스트만 가져옴 
		.text("새텍스트") : 새 텍스트로 바꾸기 

3) $("선택자").attr("속성명")	: 해당 속성값 리턴 
		.attr("속성명", "새값") : 속성의 값 변경 	$("a#test").attr("href", "https://naver.com");
		.attr({"속성명":"값", "속성명":"값", ...});

4) $("선택자").removeAttr("속성")	: 선택한 속성 삭제 

5) $("선택자").css("속성명")		: 속성값 리턴 
		.css("속성명","새값")	: 속성값으로 지정 

6) $("선택자").addClass("class값")	: class값 추가 
   $("선택자").removeClass("class값")	: class값 삭제 
   $("선택자").toggleClass("class값")	: class값이 있으면 삭제, 없으면 추가
   $("선택자").hasClass("class값")	: class값이 있으면 true, 없으면 false 리턴 

7) $("선택자").val()			: input태그에서 주로 사용. value 속성값 리턴 
		.val("새값")		: value값 새값으로 적용

🌳 수치 조작 메서드

height()	: 높이값 리턴 (안쪽 여백과 선두께 제외) 

height(새값)	: 높이값 수정 

width()		: 너비값 리턴 

width(새값)	: 너비값 수정 

innerHeight() / innerWidth()	: 안쪽 여백 포함 높이값/너비값 리턴, 매개변수주면 수정 

outerHeight() / outerWidth()	: 선두께와 안쪽 여백 포함 높이값/너비값 리턴, 매개변수 주면 수정 

position()	: 요소의 포지션 위치값 (선택한 기준요소로부터의 상대값)  	
		.position().left; (x) 
		.position().top;  (y)

offset()	: 문서기준으로 수평/수직 떨어져있는 값 
		.offset().left; .offset().top; 

scrollLeft()	: 수평 스크롤 이동한 값  $(window).scrollLeft(); 

scrollTop()	: 수직 스크롤 이동한 값

🌳 객체 편집 메서드

🌱 요소를 복제, 새요소 생성, 의도한 위치에 삽입, 삭제 

1) $("선택자").before("새요소"); 	: 선택 요소 이전 위치에 새요소 추가 
2) .after("새요소")			: 선택 요소 뒤에 새요소 추가 
3) .append("새요소")			: 선택 요소 안에 마지막 위치에 새요소 추가 
4) .prepend("새요소")			: 선택 요소 안에 앞 위치에 새요소 추가 
5) .clone()				: 요소 복제, 매개변수 true = 이벤트까지 복제, false = 요소만 복제 
6) .empty()				: 선택 요소의 모든 하위 요소 삭제 
7) .remove()				: 선택 요소 삭제 
8) .replaceAll()			: 선택한 요소를 새요소로 바꿈
9) .unwrap()				: 선택한 요소의 부모 요소를 삭제 
10).wrap("새요소")			: 선택한 요소를 새요소로 감싸기 
11) .wrapInner("새요소")		: 선택한 요소의 모든 하위요소를 새요소로 감싸기

🌳 이벤트 등록 메서드

✔이벤트 : 사용자가 브라우저에서 취하는 모든 행위

✔이벤트 핸들러 : 이벤트 발생시 실행되는 코드 
		function() { ... }

✔이벤트 등록메서드 : 특정 동작이 일어났을때 저장된 핸들러를 실행시키는 일을함 
	.click(function(){...}) : 클릭 이벤트 등록메서드 

1) 단독 이벤트 등록 방식 

	$("이벤트 대상 선택").이벤트 등록 메서드(function(){ // js 코드... }); 
	$("이벤트 대상 선택").on("이벤트종류", function(){ // js 코드... }); 

2) 그룹 이벤트 등록 방식 : 2개 이상의 동작에 대한 이벤트를 등록 on()
	# type1
	$("이벤트 대상 선택").on("이벤트종류1 이벤트종류2...", function(){ //js 코드... }); 

	# type2 
	$("이벤트 대상 선택").on({
		"이벤트 종류":function(){},
		"이벤트 종류":function(){},
		"이벤트종류 이벤트종류" : function() {},
		....
	}); 

3) 이벤트 제거 메서드 
	$("이벤트 대상").off("제거할 이벤트 종류"); 

4) 로딩 이벤트 메서드 
	사용자가 브라우저에서 HTML문서를 요청, HTML 문서의 로딩이 완료되면 이벤트 핸들러 실행 

	#1. ready()	: 요청한 HTML 문서객체의 로딩이 끝나면 이벤트 발생 
	#2. load()	: 외부에 연동된 소스(img,video...)의 로딩이 끝나면 이벤트 발생 시킴 
	#3. error()	: 이벤트 대상요소에서 오류가 발생하면 이벤트 발생

🌳 마우스 이벤트

마우스를 이용해 취하는 모든 행위 

1) click() 
2) dbclick()
3) <a>, <form> 태그에 클릭 이벤트 적용시 기본 이벤트 차단 
	
	<a> -> 클릭 -> 링크로 이동 
	<form> <submit> -> 클릭 -> action에 등록된 주소로 이동 

	# 차단법 
	#1. return false 이용 
		$("a또는form").이벤트메서드(function(){
			js코드...
			return false;
		}); 

	#2. preventDefault() 메서드 이용 
		$("a또는form").이벤트메서드(function(e){ // e = 이벤트 발생시킨 객체 
			e.preventDefault(); 
			js코드...
		}); 
4) mouseover()	
5) mouseout()	
6) hover()
7) mouseenter()
8) mouseleave()
9) mousemove()
10) mousedown()
11) mouseup()
12) scroll()

🌳 포커스 이벤트

포커스 : 마우스로 <a> 또는 <input> 태그를 클릭하거나 tab키를 누르면 생성됨. 
키보드 이벤트 	

1) focus()		mouseover
2) blur()		mouseout
3) focusin()
4) focusout()

🌳 data()

🌱 HTML 요소에 데이터를 저장하고 읽는 역할을 하는 함수.

🌱쉽게 적용가능, HTML 요소에 data를 저장하기때문에, js에 data저장을 위한 변수 설정이 필요없어짐. -> 간결 

1) 저장 
	$("선택자").data("key", "value"); 
	key = 문자열 
	value = object 

	* HTML5 에서는 data-* 형식으로 미리 데이터를 저장할 수 있다. 
	< .... data-key="value" >

2) 읽기 
	$("선택자").data("key"); -> value 리턴 

3) 삭제
	$("선택자").removeData("key");

🌳 change()

🌱선택한 폼 요소의 값을 새값으로 바꾸고, 포커스가 다른 요소로 이동하면 이벤트 발생 

.change(function(){});
.on("change", function(){});

🌳 키보드 이벤트

keydown()
keypress() 
keyup()

🌳 이벤트 발생한 요소 추적

🌱이벤트를 발생시킨 요소의 정보를 구하는 방법 

$(this) 
	이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 추적가능

🌳 효과 Effect 메서드

* 없어지는 
hide()
fadeOut()
slideUp()

* 보여지는애들 
show()
fadeIn()
slideDown()

toggle()
fadeToggle()
slideToggle()

위효과메서드(소요시간, 가속도, 콜백함수); 
fadeTo(소요시간, 투명도, 콜백함수); 

- 소요시간 : slow, normal, fast / 1000(1초), 500(0.5초) 
- 가속도 : swing, linear
- 콜백함수 : 효과가 끝난 후 실행할 함수(생략가능) 
- 투명도 : 0 ~ 1사이 (1에 가까울수록 선명)

스프링 백엔드 개발 문법 총정리, jQuery, Selector spring 총정리

📌 jQuery

📌 선택자 : Selector

🌳 기본선택자

🌳 체이닝 기법

🌳 배열 관련 메서드

🌳 속성 탐색자

🌳 유용한 메서드

🌳 속성 조작 메서드

🌳 수치 조작 메서드

🌳 객체 편집 메서드

🌳 이벤트 등록 메서드

🌳 마우스 이벤트

🌳 포커스 이벤트

🌳 data()

🌳 change()

🌳 키보드 이벤트

🌳 이벤트 발생한 요소 추적

🌳 효과 Effect 메서드

이것이 좋아요:

답글 남기기 응답 취소

오펙스(Opex)란? 중요성 및 항목 정리 : 비용 카펙스 비교 뜻 정의

사토시차트란? 필요성과 장점 투자전략 : 보는 방법 보는 곳 해석

국고채란? 특징과 종류 리스크는? 정부 자금조달 수단 이해하기

크레딧이란? 크레딧 시장 이해하기: 기업의 자금 조달과 투자 뜻

📌 jQuery

📌 선택자 : Selector

🌳 기본선택자

🌳 체이닝 기법

🌳 배열 관련 메서드

🌳 속성 탐색자

🌳 유용한 메서드

🌳 속성 조작 메서드

🌳 수치 조작 메서드

🌳 객체 편집 메서드

🌳 이벤트 등록 메서드

🌳 마우스 이벤트

🌳 포커스 이벤트

🌳 data()

🌳 change()

🌳 키보드 이벤트

🌳 이벤트 발생한 요소 추적

🌳 효과 Effect 메서드

이 글 공유하기:

이것이 좋아요:

답글 남기기 응답 취소