[jQuery]jQuery 설치와 사용
제이쿼리(jQuery)란 자바스크립트(JavaScript)의 함수들을 모아놓은 일종의 프레임워크다. 홈페이지에서 다운로드해서 프로젝트에 jar 파일처럼 넣어 사용하는데 라이브러리(lib)에 넣진 않는다. 그냥 프로젝트 내에 js폴더를 만들고 jQuery 파일과 작성용 js 페이지를 같이 넣어놓으면 된다.
다운로드
jquery.com 홈페이지에 들어가면 아래처럼 보이는 Download에 들어간다.
그리고 아래의 uncompreessed development jQuery 3.6.0을 받으면 된다. 이때 그냥 클릭으로는 다운로드할 수 없기 때문에 링크를 우클릭하여 따로 저장해줘야 한다. 링크 복사가 아니라 저장!
그렇게 받은 파일을 복사하여 이클립스 - 내 프로젝트 내에 붙여 넣으면 설치가 완료된다.
jQuery 사용
제일 먼저 jQuery 코드를 작성할 페이지에 script 태그로 jQuery 파일을 삽입하고, 다시 sciprt 태그를 열어 그 안에 jQuery(document).ready(function() { JS코드 }); 형태로 작성한다. 이것은 document, 즉 해당 페이지가 성공적으로 준비(ready)됐으며 jQuery 형태로 내부 코드를 적용시키겠다는 뜻이다. 아래처럼 두 버전으로 축약해서 사용할 수도 있다.
일반적으로 jQuery는 $('적용대상').메서드(결과); 이런 형식으로 쓰는데, 메서드는 click이나 css, attr, html, append, bind, toggle, next, val 처럼 매우 종류가 많다. 이벤트이기도 하고 대상과 관련된 것을 지칭하거나 어떤 상태를 나타내기도 하는 등 다양하게 쓸 수 있다.
지정하는 대상은 전체(*)가 될 수도 있고 태그명, id명, class명, 또는 input[]로도 쓴다. 예를 들어 input[type=text]라고 하면 text타입인 input 태그 대상들에게 메서드가 적용된다. 아래는 css로 글자나 배경색을 지정하는 코드다.
$(document).ready(function() {
$('h1').css('color','green'); //태그명
$('#ta').css('color','red'); //id값
$('.ta2').css('color','blue'); //class값
$('input[type=text]').css('color','pink');
//태그[속성~=값] 특정 단어포함
//태그[속성^=값] 시작단어
//태그[속성$=값] 끝단어
//태그[속성*=값] 특정 값 포함
//table 내 tr태그가 여러 줄일 때 가능
$('tr:odd').css('background','yellow');
$('tr:even').css('background','orange');
});
그리고 index를 사용하여 배열 값도 넣을 수 있다. 아래처럼 속성:값 쌍으로 여러 속성에 적용시킬 수도 있고, 데이터 대신 함수(function)를 넣어도 된다.
$(document).ready(function() {
var bgcolor = ['lime','skyblue','purple'];
//css({속성:값, 속성:값})
$('h1').css({
color:'grey', //글자색
background:function(index) { //배경색은 배열 적용
return bgcolor[index]; //순서대로 lime, skyblue, purple
}
});
});
attr 메서드는 속성 자체를 나타내는데, width나 height, 이미지의 src 등에 적용할 수 있다.
$(document).ready(function() {
$('img').attr('width',function(index) { //함수와 배열 적용
return (index+1)*200;
});
$('img').attr({
width: function(index) { //width는 배열
return (index+1)*200;
},
height: 300 //height는 지정값
});
});
그리고 html 메서드는 해당 태그의 데이터를 수정, append 메서드는 기존 데이터 뒷부분에 데이터를 새로 추가하는 것이다. html 코드 형태기 때문에 아래처럼 태그 추가도 가능하다.
$(function() {
$('h1').html('html'); //h1 내용 'html'로 변경
$('h1').append('h1태그 뒷부분 추가'); //'html' 뒤에 해당 내용 추가
$('table').append('<tr><td>1</td><td>제목1</td></tr>'); //table 태그에 행 한 줄 추가
});
원래 button이나 submit 버튼에 자바스크립트로 onclick 이벤트를 넣었듯이, jQuery에서도 click 메서드가 있다. onclick 이벤트와 똑같은 방식이며, 아래 보이는 코드는 h1태그를 클릭했을 때 h1태그의 바로 다음인 div태그에 toggle(열기/닫기)을 적용시킨 것이다.
그리고 form 태그에 submit 버튼도 jQuery에서 조작할 수 있는데, submit 메서드를 사용하면 일반 button도 submit처럼 작동하게 된다.
<script type="text/javascript">
$(document).ready(function() {
$('#myform').submit(function() {
if($('#myid').val() == "") {
alert("아이디를 입력하세요");
$('#myid').focus();
return false;
} else if($('#mypass').val() == "") {
alert("비밀번호를 입력하세요");
$('#mypass').focus();
return false;
} else if($('#mysel').val() == "") {
alert("목록을 선택하세요");
$('#mysel').focus();
return false;
} else if(!$('#myra1').is(":checked") && !$('#myra2').is(":checked")) {
alert("라디오박스를 선택하세요");
return false;
} else if(!$('#mych1').is(":checked") && !$('#mych2').is(":checked")) {
alert("체크박스를 선택하세요");
return false;
}
});
});
</script>
<form action="" method="post" id="myform">
아이디 : <input type="text" name="id" id="myid"><br>
비밀번호 : <input type="password" name="pass" id="mypass"><br>
목록선택 : <select name="sel" id="mysel">
<option value="">목록을 선택하세요</option>
<option value="목록1">목록1</option>
<option value="목록2">목록2</option>
<option value="목록3">목록3</option>
</select><br>
라디오박스 : <input type="radio" name="ra" value="1" id="myra1">라디오1
<input type="radio" name="ra" value="2" id="myra2">라디오2<br>
체크박스 : <input type="checkbox" name="ch" value="1" id="mych1">체크1
<input type="checkbox" name="ch" value="2" id="mych2">체크2<br>
<input type="submit" value="전송">
</form>