Jun's Blog
JQuery의 활용 - (1) 본문
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery 테스트 01</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log('호호호');
// 변수 선언시 자바 스크립트는 var 키워드를 사용합니다.
var a = 10;
var b = 5;
var c = a + b;
var result = a + ' + ' + b + ' = ' + c;
console.log(result);
var label_count = $('label').length;
console.log('라벨의 개수 : ' + label_count);
/*$('#label_cnt').html('aaa');*/
// id 속성이 label_cnt인 요소를 찾아서
$('#label_cnt').html(label_count);
// addClass() 메소드는 모든 라벨에 class="label_style"를 동적으로 추가합니다.
$('label').addClass('label_style');
// removeClass() 메소드는 addClass()의 반대 개념입니다.
$('#age').removeClass('label_style');
// css() 메소드는 메소드 체이닝을 이용하여 연속적으로 스타일링 가능합니다.
$('#hobby').css('color', 'blue').css('background-color', 'red');
/*
html(); 읽기
html(label_count); 쓰기
.css('color') 읽기
.css('color', 'blue'); 쓰기
*/
var label_string = '';
// each() 메소드 : label의 각각에 대하여 function 내의 동작을 반복 수행을 합니다.(java for문과 유사)
$('label').each(function(){
//label_string += 'a';
label_string += $(this).text().replace(' : ', '') + ' ';
});
$('#label_text').html(label_string);
$('#check01').click(function(){
// 체크 박스 목록을 checklist라는 배열에 저장합니다.
var checklist = $(':checkbox');
console.log('type="checkbox"인 항목 개수 : ' + checklist.length)
var result = '';
for(var i=0; i < checklist.length; i++){
if(checklist[i].checked){
result += checklist[i].value + ' ';
}
}
$('#check_result_01').html(result);
});
$('#check02').click(function(){
var checklist = $('input[type="checkbox"]:checked');
var result = '';
for(var i=0 ; i < checklist.length; i++){
result += checklist[i].value + ' ';
}
$('#check_result_02').html(result);
});
$('#radio01').click(function(){
var result = '';
var radiolist = $(':radio');
console.log('type="radio"인 항목 개수 : ' + radiolist.length)
for(var i=0 ; i < radiolist.length; i++){
if(radiolist[i].checked){
result += radiolist[i].value + ' ';
}
}
$('#radio_result_01').html(result);
})
$('#radio02').click(function(){
var result = '';
var radiolist = $('input[type="radio"]:checked');
for(var i=0 ; i < radiolist.length; i++){
result += radiolist[i].value + ' ';
}
$('#radio_result_02').html(result);
})
});
</script>
<style type="text/css">
.label_style{background-color: yellow; font-size: 30px;}
</style>
</head>
<body>
<!-- html 주석 -->
<h1>폼 양식</h1>
<form action="">
<label>이름 : </label>
<input type="text" name="name" value="홍길동" >
<br/><!-- br 태그는 엔터키 효과 -->
<label id="age">나이 : </label>
<input type="text" name="age">
<br/>
<label>이미지 : </label>
<input type="file" name="image">
<br/>
<label>숨김 파라미터 : </label>
<input type="hidden" name="money" value="1200000">
<br/>
<label>성별 : </label>
<input type="radio" name="gender" value="1" checked="checked">남자
<input type="radio" name="gender" value="2">여자
<br/>
<label id="hobby">취미 : </label>
<input type="checkbox" name="hobby" value="당구">당구
<input type="checkbox" name="hobby" value="축구" checked="checked">축구
<input type="checkbox" name="hobby" value="야구" checked="checked">야구
<input type="checkbox" name="hobby" value="농구">농구
<br/>
<label>직업 : </label>
<select name="job">
<option value="-">-- 선택해 주세요
<option value="의사">의사
<option value="판사" selected="selected">판사
<option value="변호사">변호사
<option value="검사">검사
</select>
<br/>
<label>코멘트 : </label>
<textarea name="comment" rows="10" cols="50"></textarea>
<br/>
<br/>
<input type="submit" value="전송">
<!-- entity : 특수 문자나 whitecharacter 등을 표현하기 위한 기법 -->
<input type="reset" value="초기화">
</form>
<hr/>
라벨 개수 : <span id="label_cnt"></span>
<br/>
라벨 문구 : <span id="label_text"></span>
<br/><br/><br/>
<button id='check01'>체크 요소 확인 01</button><br/>
<button id='check02'>체크 요소 확인 02</button><br/>
체크 결과 01 : <span id="check_result_01"></span><br/>
체크 결과 02 : <span id="check_result_02"></span><br/>
<button id='radio01'>라디오 요소 확인 01</button><br/>
<button id='radio02'>라디오 요소 확인 02</button><br/>
라디오 결과 01 : <span id="radio_result_01"></span><br/>
라디오 결과 02 : <span id="radio_result_02"></span><br/>
</body>
</html>
'WEB > JQuery' 카테고리의 다른 글
| JQuery의 활용 - (2) (1) | 2025.02.03 |
|---|
