[KOSTA] Spring 기반 Cloud 서비스 개발자 양성 과정 43일차 - jQuery 실습
0
💻 KOSTA Spring 기반 Cloud 서비스 구현 개발자 양성 과정 실습
목록 보기
36/47
.png)
📃 속성값 추출 및 기본 이벤트 취소
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(function() {
$('#my-form').submit(function(event){
var name = $('#name').val(); // id = name 속성값 추출
var password = $('#password').val(); // id = password 속성값 추출
alert(name + " : " + password);
//기본이벤트 취소
event.preventDefault();
})
});
</script>
</head>
<body>
<form id="my-form" action="server.jsp">
<table>
<tr>
<td>이름: </td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>비밀번호: </td>
<td><input type="password" name="password" id="password" /></td>
</tr>
</table>
<input type="submit" value="제출" />
</form>
</body>
</html>
📃 all 버튼 클릭시 전체 선택
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(function(){
$('#all-check').change(function() {
if(this.checked){
$('#check-item :checkbox').attr('checked', true);
}else{
$('#check-item :checkbox').attr('checked', false);
}
});
})
</script>
</head>
<body>
<input type="checkbox" id="all-check" />
<label>All</label>
<div id="check-item">
<input type="checkbox" />
<label>A Option</label>
<input type="checkbox" />
<label>B Option</label>
<input type="checkbox" />
<label>C Option</label>
</div>
</body>
</html>
📃 animate 이용해 버튼 클릭시 텍스트 크기 조절
default
bigger
smaller
$(function(){
var $speech = $('div.speech');
var defaultSize = parseInt($speech.css('fontSize'));
$('#switcher button').click(function(){
var num = parseInt($speech.css('fontSize'));
switch(this.id){
case 'switcher-large':
num *= 1.2;
break;
case 'switcher-small':
num /= 1.2;
break;
default:
num = defaultSize;
break;
}
$speech.animate({fontSize: num+'px'}, 'slow');
});
});
DB 엔지니어👍