[jQuery] 기초

키워드 : 기초, Back으로 전송, 애니메이션, GET통신,

Jquery 엔진 로드
- jquery 사이트에서 파일을 복붙해서 javascript파일을 만들어서 여기에 script 연결

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery 사용법</title>
<script src="./jquery.js"></script>
<script>
//아래 함수는 책버전 (요즘 이렇게 안씀)
$(document).ready(function(){
	var $a = "홍길동";
	console.log($a);
});

//단축어 버전 (실무에서 사용)
$(function(){
	var $a = "홍길동";
	console.log($a);
});

//더단축 버전 (실무에 사용 고수버전)
$(()=>{
	var $a = "홍길동";
	console.log($a);
})

// var a와 var $a 는 다름! 자스와 혼용 => 안돼! jquery 쓸땐 변수 $붙여 쓰기 
// jquery는 $로 시작하기

$(function(){
	//함수는 항상 이 안에 넣어야함 밖에 쓰면 작동안함!! 주의 
	
	$("#btn").click(function(){		//아이디 속성으로 이벤트 핸들링 
		console.log("아이디 테스트");
	});
	$(".btn").click(function(){		//클래스 속성으로 이벤트 핸들링 
		console.log("클래스 테스트");
	});
	
	$("#btn2").click(function(){ 
		//if(frm.mid.value==""){
		//	alert("아이디를 입력하세요!");
		//}
		
		/*
		//자스버전 아이디 가져오기 코드 => jquery랑 혼용하면 망함!
		var m = doument.getElementById("mid");
		console.log(m.value);
		*/
		
		/*
		//jquery버전 아이디 가져오기
		var $m = $("#mid").val();
		console.log($m);
		*/
		
		/*
		//val() = value 
		//값 넣기 
		$("#mid").val("홍길동");	//해당 오브젝트에 값을 이관
		*/
		
		var $m = $("#mid").val();
		if($m==""){
			alert("아이디를 입력하세요!");
			$("#mid").focus();
		}else{
			location.href="./jq2.html";
		}
	});
	
	//click, submit, change 다 있음 
	$("#btn3").click(function(){
		$abc();
		abc();
	});
	
	//책버전 $.fn.abc (요즘안씀)
	$abc = function(){	//일반 jquery 함수 
		console.log("$abc()");
	}
	
	function kkk(){
		console.log("kkk함수");
	}
	
});

	function abc(){
		console.log("abc()");
	}

	function zzz(){
		$abc();
		//kkk();	//jquery 엔진 안에 들어간 함수라서 호출 불가능함 !!!!
		//jquery 안에 있는 js함수를 호출 할 수 없음 ! 
	}

</script>
</head>
<body>

<!-- jquery는 onclick이 없음 id가 난무함 -->
<input type="button" value="클릭" id="btn"><br>
<!-- jquery는 클래스로 핸들링하면 충돌 많이 발생해서 주로 아이디로 핸들링함  -->
<input type="button" value="클릭" class="btn"><br>
<br><br><br>

<input type="text" name="mid" id="mid">
<input type="button" value="중복체크" id="btn2">
<br><br><br>

<input type="button" value="핸들링" id="btn3">
<input type="button" value="핸들링2" onclick="zzz()">

</body>
</html>

jQuery Ready 함수 표현 방법
- $(document).ready(function(){ }); 하수
- $(function(){ }); 중수
- $(()=>{ }); 고수
jQuery의 변수는 모두 $로 시작
jQuery의 함수는 모두 jQuery Ready 함수안에 넣기
jQuery는 주로 id로 핸들링
onclick 쓰지않고 id로 함수에서 처리
jQuery와 Javascript를 혼용하지않도록 주의!!!!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form - Back-end에게 전달</title>
<script src="./jquery.js"></script>
<script>

$(function(){
	//form id값을 submit으로 핸들링하여 적용하는 방식 
	$("#frm").submit(function(){
		if($("#sid").val() == ""){
			alert("아이디를 입력하세요!");
			return false;
		}else if($("#spw").val() == ""){
			alert("패스워드를 입력하세요!");
			return false;
		}else{
			return;
		}
	});
	
	$("#btn").click(function(){
		//radio, checkbox : true, false 
		var $ck = $("#agree").is(":checked");
		console.log($ck);
	});
	
	//여기서 새로운 this 발견!
	//여기서의 this는 se를 의미함 
	$("#se").change(function(){
		var $v = $(this).val();
		console.log($v);
	});
	
});

</script>
</head>
<body>

<form id="frm" method="post" action="../shop/shop_loginok.do">
아이디 : <input type="text" name="sid" id="sid">
패스워드 : <input type="password" name="spw" id="spw">
<input type="submit" value="로그인">
</form>

<br><br><br>

<input type="checkbox" id="agree">약관에 동의
<input type="button" value="클릭" id="btn">

<br><br><br>

<select id="se">
<option value="SKT">SKT</option>
<option value="KT">KT</option>
<option value="LGT">"LGT"</option>
</select>

</body>
</html>

Form을 이용해 Back-end에게 전달
- form의 아이디를 이용해서 submit으로 핸들링
- 체크박스 핸들링
- 셀렉트 핸들링

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션-jquery</title>
<!-- 애니메이션필요할때 jquery 사용 -->
<script src="./jquery.js"></script>
<style>
.box{
width:0px;
height:30px;
background-color:red;
}
</style>
<script>
$(function() {
	var $data = [150,250];	
	
   $("#btn").click(function() {
      $("#box").animate({
         "width":$data[0]+"px"
      },1500);
   });
   
   $("#btn2").click(function() {
      $("#box").animate({
         "width":$data[1]+"px"
      },1500);
   });
   
   $("#close").click(function(){
	  $(".popup").fadeOut(1500); 
   });
   
});
</script>
</head>
<body>
<input type="button" value="클릭" id="btn">
<input type="button" value="클릭2" id="btn2">
<div class="box" id="box"></div>

<div class="popup">
<div class="close" id="close">X</div>
</div>
<style>
.popup{
width:500px;
height:500px;
background-color:skyblue;
position: relative;
} 
.close{
width:50px;
height:50px;
background-color:black;
color:white;
font-size:25px;
text-align: center;
line-height: 50px;
position: absolute;
left:100%;
}
</style>
</body>
</html>

jQuery로 애니메이션 활용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax - jquery (GET)</title>
<script src="./jquery.js"></script>
<script>
$(function(){
	var $data;	//ajax에서 return 받는 결과값(Back-end 주는 내용)
	$("#btn").click(function(){
		var $mid = $("#mid").val();
		if($mid==""){
			alert("아이디를 입력하셔야 합니다.");
		}else{	//Ajax - Jquery 전용 (GET)
		/*
		두가지 방식 
		$.ajax({}); : 여기서 GET과 POST를 정함 
		$.get({});	: GET 전용 
		$.post({});	: POST 전용 
		*/
		
		$.ajax({
			//url : back-end쪽 경로 
			url:"../shop/idcheck.do?sid="+$mid,
			cache:false,	//기본은 true => 새로고침해도 값을 가지고있음 / false : 자동으로 갱신하는 형태  
			type:"GET",		//GET, POST, PUT, DELETE
			dataType:"HTML",	//TXT,HTML,JSOP,XML	
			//dataType을 "TXT"로 쓸수도있는데 백에서 "ok","no"로 보냈지만 메세지로 보냈기때문에 HTML로 설정해야 오류안남 만약 그래도 TXT를 쓰고싶다면 printWriter로 직접찍어서 포워드해서 txt파일로 만들어서 프론트한테 줘야함 
			success:function($data){	//통신성공 및 ㄱeturn값 처리 
				console.log($data);
			},
			error:function(){		//Back-end와 통신에러가 발생시 
				console.log("통신 에러");
			}
		});
		
		}
	});
});
</script>
</head>
<body>
아이디 : <input type="text" id="mid">
<input type="button" value="중복체크" id="btn">
</body>
</html>

jQuery를 이용해 GET 통신

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바