<script type="text/javascript">
$(document).ready(function (){
$("#btn").click(function(){
let v1 = $("#v1").val();
let v2 = $("#v2").val();
let result = Number(v1) + Number(v2);
$("#result").val(result);
});
$("#quantity").change(function(){
let price = $("#price").val();
let count = $(this).val();
let total = Number(price) * Number(count);
$("#total").text(total);
});
$("#btnTotal").click(function(){
let total = 0;
$("input:checkbox:checked").each(function (index,item) {
total = total + Number(item.value);
});
$("#totalPrice").text(total);
});
});
</script>
</head>
<body>
<h1>1. +연산</h1>
<input type="number" id="v1" value="10">+
<input type="number" id="v2" value="20">=
<input type="text" id="result" value="">
<button id="btn">연산</button><br>
<br>
<br>
<h1>2. 총합 구하기</h1>
가격<input type="text" id="price" value="2500">X
수량<select id="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
총합:<span id="total"></span>
<hr>
<hr>
<hr>
<h1>3. 총합 구하기2 (선택된 값만)</h1>
<div>
바나나(1000원) <input type="checkbox" name="fruit" class="fruit" value="1000"><br>
사과(500원) <input type="checkbox" name="fruit" class="fruit" value="500"><br>
배(1500원) <input type="checkbox" name="fruit" class="fruit" value="1500"><br>
<button id="btnTotal">총합구하기</button><br>
선택한 총가격:<span id="totalPrice"></span>
</div>
<h1>16.리스트 추가</h1>
<script>
$(document).ready( function() {
$("#add").click(function(){
let text = $("#words").val();
if(text =="")
return;
let list = $("<li></li>");
list.text(text);
$("#uList").append(list);
});
});
</script>
<input type="text" id="words">
<button type="button" id="add" >추가</button><br>
<ui id="uList"></ui>
<br>
<br>
<br>
<h1>17.리스트 삭제</h1>
<script type="text/javascript">
$(document).ready(function (){
$("#add2").click(function (){
let text = $("#words2").val();
if(text == "")
return;
let list = $("<li class='plant' ></li>");
list.text(text + " X");
$("#uList2").append(list);
});
$(document).on("click","#uList2 .plant",function(){
$(this).remove();
});
});
</script>
<input type="text" id="words2">
<button type="button" id="add2" >추가</button><br>
<ui id="uList2"></ui>
<h1>13.아스키코드 출력</h1>
<script type="text/javascript">
$(document).ready(function (){
//예전 jQuery라면 on이 아니라 bind나 live
$("#word4").on("propertychange change keyup paste input", function(event) {
var currentVal = $(this).val();
console.log(currentVal.codePointAt(0));
$("#code").text(currentVal.codePointAt(0));
});
});
</script>
<input type="text" id="word4" maxlength='1'>
<span id="code"></span>
'프로그래밍 언어 > JQuery(제이쿼리)' 카테고리의 다른 글
| Jquery 를 통한 동적 행 추가 및 삭제 (0) | 2023.07.21 |
|---|---|
| Jquery 및 ajax 이용하여, 동적으로 table 생성하는 예제 (0) | 2022.06.29 |
| STS 및 Eclipse(이클립스) 에서 Javascript 및 Jquery 자동 완성 기능 사용하기 (0) | 2022.06.27 |
| jQuery의 Ajax 설정 (0) | 2022.06.21 |