Javascript 기초문법Ⅶ
19. JQuery 시작하기
자바의 .class들을 압축한 것이 jar파일인 것처럼
자바스크립트들의 함수들을 모아 압축한 파일 ->.js이다.
수많은 라이브러리들이 있는데 JQuery도 그 중에 하나이다.
1) 제이쿼리로 id 접근하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>27_jQuery01.html</title>
</head>
<body>
<form name="memfrm">
<input type="text" name="uid" id="uid" value="star">
</form>
<!-- jQuery 라이브러리 -->
<script src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//1) Javascript로 접근하기
alert(document.memfrm.uid.value);
alert(document.getElementById("uid").value);
//2) jQuery로 접근하기
alert($('#uid').val());
</script>
</body>
</html>
2) 제이쿼리로 input 기능 활용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script src="../js/jquery-3.4.1.min.js"></script>
<title>28_jQuery02.html</title>
<style>
@charset "utf-8";
#btn_idcheck, #btn_join { width:100px; height: 32px; border: 1px solid #48b4e0; border-radius: 20px; background-image: linear-gradient(45deg, skyblue, #48b4e0); color:#fff; }
#btn_reset { width:100px; height: 32px; border: 1px solid #999; border-radius: 20px; background-image: linear-gradient(45deg, #999, #ddd); color:#fff; }
</style>
</head>
<body>
<h1>회원가입</h1>
<form name="memfrm" id="memfrm">
아이디: <input type="text" name="uid" id="uid" placeholder="아이디를 입력하세요.">
<hr>
<button id="btn_idcheck">ID중복확인</button>
<button id="btn_join">회원가입</button>
<button id="btn_reset">다시쓰기</button>
</form>
<script type="text/javascript">
//jQuery 이벤트
$("#btn_idcheck").on("click",function(){
window.open("blank.html","idwin","width=250, height=200");
});
$("#btn_join").click(function(){
var uid=$("#uid").val();
uid=uid.trim();
if(uid.length< 8 || uid.length>=13){
alert("아이디는 8~13글자 사이여야 합니다.");
$("#uid").focus();
return false;
}//if end
//type=submit과 같은 기능.
document.memfrm.submit(); //javascript
$("#memfrm").submit(); //jqeury
});//click end
$("#btn_reset").click(function(){
//type=reset과 동일한 기능
document.memfrm.reset(); //javascript
$("#memfrm").reset(); //jqeury
});
</script>
</body>
</html>
3) 제이쿼리로 문자열 다루기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script src="../js/jquery-3.4.1.min.js"></script>
<title>29_jQuery03.html</title>
<style>
#text, #html{
width: 250px;
height: 100px;
border: 1px solid #333;
margin-bottom: 40px;
}
</style>
</head>
<body>
<p><button type="">입력</button></p>
<hr>
<div id="text"></div>
<div id="html"></div>
<script>
$("button").click(function(){
var txt="<img src='../images/k7.png'>";
//documnet.getElementById("html").innerHTML=txt;
//jQuery
//단순 문자열출력
$("#text").text(txt);
//문자열이 마크업되면서 출력(요소생성)
$("#html").html(txt);
});
</script>
</body>
</html>'Frontend' 카테고리의 다른 글
| React | 2.npm 설치 및 사용법 (1) | 2019.07.22 |
|---|---|
| React | 1. React는? (0) | 2019.07.16 |
| 자바스크립트 완벽가이드 목차 (0) | 2019.07.15 |
| 07월 15일 월 | UI 화면구현 09 - Javascript 기초문법Ⅵ (0) | 2019.07.15 |
| 07월 12일 금 | UI 화면구현 08 - Javascript 기초문법Ⅴ (0) | 2019.07.12 |
댓글