본문 바로가기
STUDY/jQuery & Ajax

jQuery

by Anne of Green Galbes 2019. 3. 29.

jQuery


jQuery(script + gui) + Ajax = 부트스트랩


1. 필요한 파일 다운

https://jquery.com/download/에서 다운


https://jqueryui.com/download/에서 다운

1.12.1(Stable, for jQuery1.7+) 다운


2. 파일 확인


3. jQuery 예제

○ https://jqueryui.com/에서 다양한 예제 확인 가능


① test1.jsp

○ <script type="text/javascript" src="<%=cp%>/data/js/jquery-3.3.1.min.js"></script> 작성해야 jquery사용 가능

○ script

자바스크립트 사용

○ 자바스크립트는 변수에 숫자, 문자, 함수 다 넣을 수 있다

○ 다음은 다 같은 함수


function welcome(){

alert("환영");

}

var welcome = welcome();


             ▼


var welcome = function welcome(){

alert("환영");

}


             ▼


var welcome = function(){

alert("환영");

}


             ▼

내장개체에다 함수를 넣은 것

window.onload = function(){

alert("환영");

}

jQuery 사용

○ $()를 사용


$(document).ready(function(){

alert("환영");

});


             ▼


$(function(){

alert("환영!!!!");

})

○ body부분 색 변경

$(document).ready(function(){

$(document.body).css("background","pink");

});


② test2.jsp

○ <script type="text/javascript" src="<%=cp%>/data/js/jquery-3.3.1.min.js"></script> 작성해야 jquery사용 가능

○ body부분

이름:<input type="text" id="userName"><br/>

성별:<input type="radio" id="gender1" value="M" name="gender">남자

<input type="radio" id="gender2" value="F" name="gender">여자<br/>

취미:<br/>

<select id="hobby" multiple="multiple">

<option value="여행">여행</option>

<option value="영화">영화</option>

<option value="운동">운동</option>

<option value="게임">게임</option>

</select>

<br/><br/>

jQuery:<input type="button" value="확인" id="btnOK"><br/>

javascript:<input type="button" value="확인" onclick="result();">

</body>

○ 같은 내용을 자바스크립트와 jQuery를 사용하여 실행

자바스크립트 사용

○ userName값만 넣은 것


function result(){

var msg = document.getElementById("userName").value;

alert(msg);

}

jQuery 사용

○ jQuery는 무조건 $(function(){  }로 묶어줘야 한다

○ jQuery에서 부를때는 id를 사용


$(function(){

//btnOK버튼을 클릭하면 함수를 실행

$("#btnOK").click(function(){

var msg = $("#userName").val();

msg+= "\r\n" + $("input:radio[name=gender]:checked").val();

//여러개가 올 수 있으니 |으로 연결해라

msg+= "\r\n" + $("#hobby").val().join("|");

alert(msg);

});

});

③ test3.jsp

○ GUI사용

○ 다음 중 한 세트는 넣어야 사용 가능

○ <link rel="stylesheet" type="text/css" href="<%=cp%>/data/css/jquery-ui.css">

<script type="text/javascript" src="<%=cp%>/data/js/jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="<%=cp%>/data/js/jquery-ui.js"></script>


○ <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

○ 실행 화면

○ body부분

<body>

<div id="dialog" title="우편번호 검색">

<p>동이름을 입력하세요</p>

<p><input type="text"></p>

</div>

<div>

<!-- 모달리스 : 현재창이 종료되지 않아도 다른일 실행 가능 -->

<!-- 모달 : 현재창을 종료하기 전까지는 다른일을 실행할 수 없음 -->

<input type="button" value="모달리스" id="btn1">

<input type="button" value="모달" id="btn2">

<input type="button" value="외부파일" id="btn3">

</div>

</body>

○ test4.jsp

   - body

<body>

이창이 보입니까?<br/>

보이면 성공입니다.<br/>

</body>

○ script

  - $(function(){ }); 으로 다음을 묶어 주어야 한다.

- $("#dialog").hide();

처음 화면을 실행할 때 dialog부분이 보이지 않도록

$("#btn1").click(function(){

$("#dialog").dialog({

height:240,

width:300,

modal:false

});

});

$("#btn2").click(function(){

$("#dialog").dialog({

height:240,

width:300,

modal:true

});

});

$("#btn3").click(function(){

$("<div>").dialog({

modal:true,

open:function(){

$(this).load("test4.jsp");

},

height:400,

width:400,

title:"외부파일 띄우기"

});

});


⑤ test5.jsp

○ 탭메뉴

○ 실행화면

○ body

<div id="container">

<ul>

<li><a href="#f1">첫번째</a></li>

<li><a href="#f2">두번째</a></li>

<li><a href="#f3">세번째</a></li>

</ul>

<div id="f1">

테스트1..

</div>

<div id="f2">

테스트2..

</div>

<div id="f3">

테스트3..

</div>

</div>

○ script

<script type="text/javascript">

$(function(){

$("#container").tabs();

});

</script>


저작자표시

'STUDY > jQuery & Ajax' 카테고리의 다른 글

자바스크립트 객체 : JSON 표기법  (0) 2019.04.02
Document Object Model과 XML  (0) 2019.04.02
자바스크립트로 Ajax 구현  (0) 2019.04.01
Ajax 간단한 예제  (0) 2019.03.31
Ajax  (0) 2019.03.29

관련글

댓글

티스토리툴바