[jQuery] 유효성체크(자바스크립트 vs 제이쿼리), 제이쿼리 기본효과

💡 핵심 요약 (TL;DR)

'유효성체크(자바스크립트 vs 제이쿼리), 제이쿼리 기본효과'에서 다루는 각 기술의 핵심 개념과 동작 방식의 차이점을 분석한 내용이다. 동작 원리와 장단점을 비교 파악하여 프로젝트 개발 상황에 적합한 방식을 선택할 수 있다.

유효성체크 : 자바스크립트 vs 제이쿼리

• 처리속도 : 자바스크립트 > 제이쿼리
• 유동성 : 자바스크립트 < 제이쿼리
• 필요 상황에 맞게 쓰면 됨

<!-- 제이쿼리 라이브러리연결  -->
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
//js로 유효성 체크
function check(){
	//let v = document.fr.txt.value; //name속성값으로 변수설정
	let v= document.getElementById("data").value; //id속성값으로 변수설정
	console.log(v)
	if(v == ""){
	 alert(" 데이터를 입력하시오 ");
	 document.fr.txt.focus();
	 return false;
	}
}

//제이쿼리를 이용한 유효성 체크
$(function(){
	$('#fr2').submit(function(){
		//alert("제이쿼리 사용 폼태그 제어")
		let data = $('#data2').val();
		//alert(data);
		if(data == ""){
			$('#data2').focus();
			return false
		}
	});

});

</script>

</head>
<body>
	<form action="a.jsp" method="get" id="fr" name="fr" onsubmit="return check()">
		데이터1 : <input type="text" name="txt" id="data">
		<input type="submit" value="전송">	
	</form>
	
	<form action="b.jsp" method="get" id="fr2" >
		데이터2 : <input type="text" name="txt2" id="data2">
		<input type="submit" value="전송2">	
	</form>	

</body>

제이쿼리 기본효과

효과	설명
hide()	선택된 요소 사라지게하기
show()	선택된 요소 보여지게하기
toggle()	선택된 요소의 이전 상태에 따라 현재 상태를 반대로 바꿔주기
fadeIn/fadeOut/fadetoggle()	fade형태로 업/다운/토글 구현
SlideUp/SlideDown/SlideToggle()	슬라이드형태로 업/다운/토글 구현
fadeTo()	투명도조절(0부터 1까지 값. 0으로갈수록 옅어짐) 주로 쇼핑몰 매진상품에 사용

• 속도 값 총 4개 입력가능

  1. fast
  2. normal
  3. slow
  4. 1/1000(밀리초)단위

• 콜백함수 : 적용하려고 하는 효과가 모두 실행된 후 그 다음에 실행되는 함수를 일컬음.

예시

See the Pen ExKxzeR by sowon-dev (@gracehopperdev) on CodePen.

#ITWILL(JAVA)jQuery