요소 접근
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_jquery이벤트.html</title>
<script src="jquery-3.6.1.min.js"></script>
</head>
<body>
<h3>jQuery 이벤트</h3>
<form id="memfrm" name="memfrm" action="ok.jsp">
아이디 : <input type="text" id="uid" name="uid" value="ITWILL">
<hr>
<!-- <button>요소는 기본 속성이 type="submit"과 동일하다-->
<button id="btn_idcheck">ID중복확인</button>
<button id="btn_join">회원가입</button>
<button id="btn_reset">다시쓰기</button>
</form>
<script>
//<input type="text" id="uid" name="uid" value="ITWILL">에 접근
//1)JavaScript 접근
alert(document.getElementById("uid").value);
//2)jQuery 접근
//-> 기본 문법 : $(선택자).action()
alert($("#uid").val());
</script>
</body>
</html>type의 기본은 text이다. 따라서 생략 시 text가 자동 적용된다.
$ 안에는 선택자가 들어간다. id의 경우 #, 클래스의 경우 . 이다.
이벤트 함수
https://www.w3schools.com/jquery/jquery_events.asp
jQuery Event Methods
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
이벤트를 발생시킬 수 있는 방식은 여러가지가 있다.
$("선택자").click(function(){})
$("선택자").on(click, function(){})
//id="btn_idcheck"에 클릭 이벤트와 함수 연결하기
$("#btn_idcheck").click(function(){})
$("#btn_idcheck").on(click, function(){})선택된 요소를 클릭하면 function이 실행된다.
id중복확인 버튼을 클릭하면 발생하는 이벤트
$("#btn_idcheck").click(function(){
//id=btn_idcheck 클릭 했을때 팝업창 띄우기
window.open("blank.html", "popwin", "width=350, height=300");
}); //click() end
회원가입 버튼을 클릭하면 발생하는 이벤트
$("#btn_join").click(function(){
let uid = $("#uid").val();
uid = uid.trim();
if(!(uid.length>=8 && uid.length<=12)){
alert("아이디 8~12글자 이내 입력해주세요~");
$("#uid").focus();
return false; //<button>요소의 기본속성이 submit이므로 return false를 주면 서버로 전송되지 않음
}//if end
$("#memfrm").submit(); //<form id=memfrm></form>를 서버로 전송
});//click endjQuery 이벤트
다시쓰기 버튼을 클릭하면 발생하는 이벤트
$("#btn_reset").click(function(){
$("#memfrm").reset(); //<form id=memfrm></form>를 원래대로
return false;
});//click end
'웹개발 교육 > jQuery' 카테고리의 다른 글
| [42일] jQuery (6) - 반복문 (0) | 2022.09.26 |
|---|---|
| [42일] jQuery (5) - 속성 관련 메소드 (0) | 2022.09.26 |
| [42일] jQuery (4) - css 메소드 (0) | 2022.09.26 |
| [42일] jQuery (3) - text()와 html() (0) | 2022.09.26 |
| [42일] jQuery (1) - 다운로드 및 설정 (0) | 2022.09.26 |
