* jquery
자바스크립트의 쓸모 있는 코드를 정리해 놓은 것
> 자바스크립트를 더 쉽게 사용
더보기
- 다운로드
Download the uncompressed, development jQuery 3.6.4 > 링크로 저장
> vscode_workspace의 js 폴더로
- [jquery01] jquery
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery01.html</title>
<script src = "../js/jquery-3.6.4.js"></script>
<script>
// 자바스크립트 코드 추가
// 현재 페이지가 로딩된 후에 함수를 test 호출
// window.onload = test; // test라는 함수를 호출
// window.onload = test(); ==> test()를 실행한 후에 리턴 값을 할당
// 페이지가 로딩되면 id가 box1인 영역의 배경색을 blue로...
// id가 box1인 div 자바 스크립트 객체로 가져오기
// 콘솔에 console.dir() 출력
// window.onload = function() { // 익명함수
// var box1 = document.getElementById("box1");
// console.dir(box1);
// box1.style.backgroundColor = "blue";
// }
$(document).ready(function(){ // jquery의 해당 코든느 window.onload와 같음(but, 더 빠름)
// $("선택자")
var jBox = $("#box1"); // jquery 객체 > 0번째 요소에 element 자바 스크립트 객체가 들어있음
// id:box1인 엘리먼트 객체를 jquery 함수로 감싼 객체
console.log(jBox);
// $("선택자").함수(매개변수);
jBox.css("background", "red");
// box2의 배경색을 파랑색 글자색을 빨강색
var jBox2 = $("#box2");
jBox2.css("background", "blue");
jBox2.css("color", "red");
// id가 box3인 엘리먼트의 배경을 노랑색글자를 초록색으로 변경
// $("#box3").css(); // 변수에 안담고 이렇게 써도 됨
// var t = $("box3").css("background", "yellow");
// console.log(t);
// $("#box3").css("color", "green");
// 메서드 체이닝
$("#box3").css("background", "yellow").css("color", "green");
// jquery의 모든 함수는 자신의 객체를 리턴하도록 설계되어 있음
// id가 box4인 엘리먼트의 배경을 pink 글자는 초록색으로
// (함수체이닝방식으로)
$("#box4").css("background", "pink").css("color", "green");
});
</script>
</head>
<body>
<!-- div#box1{이 부분은 id가 box1 입니다.} -->
<!-- <div id="box1">이 부분은 id가 box1 입니다.</div> -->
<!-- div#box2{이 부분은 id가 box2 입니다.} -->
<!-- <div id="box2">이 부분은 id가 box2 입니다.</div> -->
<!-- div#box${이 부분은 id가 box$ 입니다.}*4 -->
<div id="box1">이 부분은 id가 box1 입니다.</div>
<div id="box2">이 부분은 id가 box2 입니다.</div>
<div id="box3">이 부분은 id가 box3 입니다.</div>
<div id="box4">이 부분은 id가 box4 입니다.</div>
</body>
</html>
|
cs |
- [jquery02] 상자 만들기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery02.html</title>
<script src = "../js/jquery-3.6.4.js"></script>
<script>
$(document).ready(function(){ // window.onload 역할 > 익명함수 사용
// var $jDiv = $("#div2"); // 앞에 $를 붙이면 jquery 객체라는 뜻으로 쓰임..
// $jDiv.css("background", "blue");
// $jDiv.css("width", "150px");
// $jDiv.css("height", "150px");
$("#div2").css("background", "blue")
.css("width", "150px")
.css("height", "150px");
// JSON ==> { 속성 : 값, 속성: 값, ...}
$("#container").css({
"background" : "pink",
"width" : "300px",
"height" : "300px"
});
// $("#container").css("background", "pink").css("width", "300px").css("height", "300px");
// id가 div2인 엘리먼트의 width 속성의 값 가져오기
console.log($("#div2").css("width"));
});
</script>
</head>
<body>
<!-- 배경은 블루 너비 150px 높이 150px -->
<div id="div2"></div>
<!-- 배경 핑크 너비 300px 높이 300px -->
<div id="container"></div>
</body>
</html>
|
cs |
- [jquery03] 랜덤 사이즈 상자 만들기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery03.html</title>
<style>
#box1{
background-color: yellowgreen;
width : 300px;
height : 300px;
}
</style>
<script src = "../js/jquery-3.6.4.js"></script>
<script>
function rnd() {
// 버튼을 클릭하면 w, h에 100부터 1000 사이의 정수가 할당되도록
var w = (Math.floor(Math.random()*10)+1)*100;
var h = (Math.floor(Math.random()*10)+1)*100;
$("#box1").css("width", w+"px").css("height", h+"px");
}
</script>
</head>
<body>
<input type="button" value="랜덤사이즈" onclick = "rnd();">
<div id="box1"></div>
</body>
</html>
|
cs |
- [jquery04]
CDN : contents delivery network > jquery를 다운 받아 쓸 수 있는 서버
jquery 사이트 > google cdn >
3.x 스니펫: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery04.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> -->
<script>
// $(document).ready(function(){});
$(function(){
$("#box1").css("width", "300px")
.css("height", "300px")
.css("background", "red");
})
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
|
cs |
- [jquery05] 자스와 jquery 비교(txt, button)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery05.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
// jquery
$(function(){
// $("#btn").on("이벤트명", 함수명);
$("#btn").on("click", function(){ // 버튼 클릭하면 익명 함수 실행
// console.log("jquery test");
// console.log($("#txt").val()); // txt의 value를 콘솔에 출력
// id가 div1인 엘리먼트에 봄비 내리는 종로3가 h1태그
// javascript
var div1 = document.getElementById("div1");
// // div.innerText = "봄비 내리는 종로3가";
// div1.innerHTML = "<h1>봄비 내리는 종로3가</h1>";
// jquery
console.log("----------------------");
// $("#div1").text("노는 게 제일 좋아... 뽀로로");
// $("#div1").html("<h1>노는 게 제일 좋아... 뽀로로</h1>");
// 화면에 내가 입력한 값을 h2태그로 div1에 출력
// jquery
// var msg = "<h2>"+$("#txt").val()+"</h2>";
// $("#div1").html(msg);
$("#div1").html("<h2>"+$("#txt").val()+"</h2>");
})
})
// javascriptㄴ
// window.onload=function(){
// var btn = document.getElementById("btn");
// btn.onclick=prt;
// }
// function prt(){
// console.log("test");
// var txt = document.getElementById("txt").value;
// console.log(txt);
// }
</script>
</head>
<body>
<!-- 1. 버튼을 누르면 콘솔에 간단한 메세지 출력하게 하기 (함수명:prt()) -->
<!-- 2. id:txt 엘리먼트의 값을 콘솔에 출력 -->
<input type="text" name="" id="txt" >
<input type="button" value="출력" id="btn">
<div id="div1"></div>
</body>
</html>
|
cs |
- [jquery06] 토끼 이미지 조절(체이닝/JSON 방식)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery06.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(function() {
// 1. 체이닝 방식
// $("#img").css("weight", "300px").css("height", "300px");
// 2. JSON 방식
$("#img").css({
"weight" : "300px",
"height" : "300px"
})
})
</script>
</head>
<body>
<!-- 토끼의 너비 높이 300px 변경, css(),
1. 체이닝 방식 2. JSON
-->
<img src="../images/rabbit1.png" alt="" id="img">
</body>
</html>
|
cs |
- [jquery07] 하이퍼링크
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery07.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(function(){
// E[A] : a 속성이 존재하는 요소만 선택
// E[A=V] : a 속성의 값이 V 인 요소만 선택
// E[A!=V] : a 속성의 값이 V가 아닌 요소만 선택
// 링크만 배경을 파랑색
// $("a").css("background", "blue");
// 네이버 링크만 선택해서 배경을 red로
// emmet.io : css 선택자를 태그로 변환
// $("a[href!='http://www.naver.com']").css("background", "red");
// a 태그 중 target 속성이 존재하는 대상만 배경을 노랑색
$("a[target]").css("background", "yellow");
})
</script>
</head>
<body>
<!-- input[value="hohoho"] -->
<input type="text" value="hohoho">
<input type="text" name="" id="" value="hahaha">
<p>Hello Web world</p>
<!-- 핸드폰 목록 -->
<ol>
<li>아이폰14 pro</li>
<li>갤럭시 플립4</li>
<li>갤럭시 S23</li>
<li>LG</li>
</ol>
<!-- 네이버링크 -->
<a href="http://www.naver.com">네이버</a>
<!-- 다음링크 -->
<a href="http://www.daum.net">다음</a>
<br><br>
<!-- _balnk 사용하면 새 창으로 열림 -->
<a href="http://www.naver.com" target="_blank">네이버</a>
<a href="http://www.daum.net" target="_blank">다음</a>
</body>
</html>
|
cs |
- [jquery08] 텍스트 창에 입력한 값을 더해서 결과 출력
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery08.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(function(){
// $("#btn").on("이벤트명", "함수명")
$("#btn").on("click", function(){
console.log("출력");
var num1 = parseInt($("#num1").val()); // 문자를 숫자로
var num2 = parseInt($("#num2").val());
// var result = num1+num2;
console.log(result);
$("#result").val((parseInt($("#num1").val()))+parseInt($("#num2").val()));
});
})
</script>
</head>
<body>
<input type="text" name="" id="num1">
+
<input type="text" name="" id="num2">
<input type="button" value="=" id="btn">
<input type="text" name="" id="result">
</body>
</html>
|
cs |
- [jquery09] 퀴즈
- jquery 사이트에서
API Documentation 확인 가능
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery09.html</title>
<style>img { width: 150px; height: 150px;}</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
// 자바 스크립트로 문제 풀기
// jquery
$(function(){
$("#btn4").on("click", function(){
console.log("jquery test");
$("#answer").show(); // id가 answer인 영역을 화면에 보이게
$("#wrong").hide(); // id가 answer인 영역을 화면에 보이게
})
// 1번 버튼을 누르면 id가 wrong인 영역을 보이게
$("#btn1, #btn2, #btn3").on("click", function(){
$("#wrong").show(); // id가 answer인 영역을 화면에 보이게
$("#answer").hide(); // id가 answer인 영역을 화면에 보이게
})
});
</script>
</head>
<body>
<!-- input:button[value"$번" id="btn$"]*4 -->
<input type="button" value="1번" id="btn1">
<input type="button" value="2번" id="btn2">
<input type="button" value="3번" id="btn3">
<input type="button" value="4번" id="btn4">
<div> 조선 시대 장군, 명량, 거북선 하면 떠오르는 인물은?</div>
<div id="bb">
1. 권율 2. 뽀로로 3. 루피 4. 이순신
</div>
<div id="answer" style="display: none";>
<p>정답 : 4 이순신</p>
</div>
<div id="wrong" style="display: none";>
<img src="https://previews.123rf.com/images/chrisdorney/chrisdorney1411/chrisdorney141100080/33563271-%ED%9D%B0%EC%83%89-%EB%B0%B0%EA%B2%BD-%EC%9C%84%EC%97%90-wrong-%EB%B9%A8%EA%B0%84-%EA%B3%A0%EB%AC%B4-%EC%8A%A4%ED%83%AC%ED%94%84%EC%9E%85%EB%8B%88%EB%8B%A4.jpg" alt="">
</div>
</body>
</html>
|
cs |
- [jquery10] 이미지 나타났다 사라졌다 버튼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery10.html</title>
<style>img{ width: 280px; height: 300px;}</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(function(){
$("input[value='숨어']").on("click", function(){
// hide(숫자); 숫자 입력하면 그만큼 천천히 사라짐
// hide(숫자, 함수명); 숫자만큼 천천히 사라지고, 끝나면 함수명 실행
$("img").hide(2000, function(){
alert("완료"); // 사라지고 완료창 뜸
});
})
// 3000동안 천천히 화면에 보이고,
// 끝나면 이미지가 보임이라는 메시지를 경고창으로 띄우기
$("input[value='나와']").on("click", function(){
$("img").show(2000, function(){
alert("이미지가 보임");
});
})
});
</script>
</head>
<body>
<input type="button" value="숨어">
<input type="button" value="나와"> <br>
<img src="https://image.dongascience.com/Photo/2020/03/5bddba7b6574b95d37b6079c199d7101.jpg" alt="">
</body>
</html>
|
cs |
- [jquery11] addclass, removeClass, toggleClass
tr:odd / tr:even
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery11.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
table{
table-layout: auto;
width: 75%;
}
td {
color: blue;
font-weight: bold;
}
.selectStyle{
color:red;
font-size: 50px;
background-color: green;
}
</style>
<script>
$(function(){
$("#btn1").on("click", function(){
// 첫번째 tr 태그에 selectStyle이라는 클래스를 부여
// $("tr:first").addClass("selectStyle");
$("tr:first").toggleClass("selectStyle"); // toggle은 껐다 켰다 가능
})
// 두번째 버튼을 누르면 selectStyle 클래스를 제거(removeClass())
$("#btn2").on("click", function(){
$("tr:first").removeClass("selectStyle");
})
// 세번째 버튼을 누르면 배경을 핑크(홀수번째) > 0번부터..
$("#btn3").on("click", function(){
$("tr:odd").css("background-color", "pink");
})
// 네번째 버튼을 누르면 배경을 핑크(짝수번째) > 0번부터..
$("#btn4").on("click", function(){
$("tr:even").css("background-color", "darkgray");
})
});
</script>
</head>
<body>
<!-- input:button#btn$[value='버튼$']*4 -->
<input type="button" value="버튼1" id="btn1">
<input type="button" value="버튼2" id="btn2">
<input type="button" value="버튼3" id="btn3">
<input type="button" value="버튼4" id="btn4">
<table><tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td>four</td>
</tr>
<tr>
<td>five</td>
</tr>
</table>
</body>
</html>
|
cs |
- [jquery12] 달력
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery12.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
#wrapper{
width: 260px;
height: 280px;
background-color: rgb(173, 219, 237);
}
.box{
float: left;
width: 30px;
height: 30px;
border: 1px solid #000000;
margin: 0 5px 5px 0;
}
/* 7의 배수번째 box 배경색을 red */
.box:nth-child(7n){
background: rgb(212, 109, 109);
}
/* 22번 부터 이후 모든 box 폰트색 변경 */
.box:nth-child(n+22){
color:rgb(46, 46, 202);
}
/* 1번부터 5번까지의 box 배경색 초록 */
.box:nth-child(-n+5){
background: rgb(114, 197, 114);
}
/* 16번 ~ 19 사이 box 배경색 pink */
.box:nth-child(n+16):nth-child(-n+19){
background: pink;
}
/* 25번째 배경을 빨강색 */
.box:nth-child(25){
background: rgb(210, 83, 83);
}
</style>
<script>
</script>
</head>
<body>
<!-- div#wrapper>div.box{$}*30 -->
<div id="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
<div class="box">17</div>
<div class="box">18</div>
<div class="box">19</div>
<div class="box">20</div>
<div class="box">21</div>
<div class="box">22</div>
<div class="box">23</div>
<div class="box">24</div>
<div class="box">25</div>
<div class="box">26</div>
<div class="box">27</div>
<div class="box">28</div>
<div class="box">29</div>
<div class="box">30</div>
</div>
</table>
</body>
</html>
|
cs |
- [Q01] 구구단 출력 > 사용자 입력값
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Q01.html</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(function(){
$("#btn").on("click", function(){
console.log("출력");
var num = parseInt($("#txt").val());
// val() : jquery 함수
// value : 속성(javascript)
console.log(num);
var data = "";
for(var i=1; i<=9; i++) {
console.log(i);
data += "<h2>"+num+" * "+i+" = "+num*i+"</h2>"+"<br>";
}
$("#div1").html(data);
})
})
</script>
</head>
<body>
<input type="text" name="" id="txt">
<input type="button" value="단출력" id="btn" >
<div id="div1"></div>
</body>
|
cs |
- [Q02] 곱셈식 출력 > 사용자 입력값
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(function(){
$("#btn").on("click", function(){
console.log("출력");
var num1 = parseInt($("#num1").val());
var num2 = parseInt($("#num2").val());
var result = (num1 * num2);
console.log(result);
$("#result").val(result);
})
})
</script>
</head>
<body>
<input type="text" name="" id="num1"> *
<input type="text" name="" id="num2">
<input type="button" value="=" id="btn">
<input type="text" name="" id="result">
</body>
</html>
|
cs |
- [menu] 메뉴 선택
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
.img{
width: 150px;
height: 150px;
}
div{
width: 200px; height: 200px;
display: inline-block;
}
#div1{
width: 300px; height: 200px;
}
</style>
<script>
window.onload=function(){
var menu1 = document.getElementById("menu1");
var menu2 = document.getElementById("menu2");
var menu3 = document.getElementById("menu3");
var menu4 = document.getElementById("menu4");
menu1.onclick = selectMenu;
menu2.onclick = selectMenu;
menu3.onclick = selectMenu;
menu4.onclick = selectMenu;
}
function selectMenu(e){
// console.log(e);
var ele = e.srcElement;
console.dir(ele.value);
var div = document.getElementById("div1");
div.innerHTML= "<h4>선택하신 메뉴는 "+ele.value+"입니다.</h1>"
}
</script>
</head>
<body>
<h2>오늘의 점심 메뉴</h2>
<div class = "menuItem">
<input class="img" id="라면" type="image" src="https://health.chosun.com/site/data/img_dir/2020/09/07/2020090702900_0.jpg" alt="">
<p>
<input type="radio" name="menu" id="menu1" value="라면">라면
</p>
</div>
<div class = "menuItem">
<input class="img" id="도시락" type="image" src="https://www.lunchbasket.co.kr/data/item/997/0428_LUNCH_BASKET_MAIN0006.jpg" alt="">
<p>
<input type="radio" name="menu" id="menu2" value="도시락">도시락
</p>
</div>
<div class = "menuItem">
<input class="img" id="자장면" type="image" src="https://mblogthumb-phinf.pstatic.net/MjAxNzAxMjNfNDkg/MDAxNDg1MTYwMTQ1MDc5.H7I84KnCb0_U0Fb312NMMk10dbmNhdMb45jDiNYs13Eg.e3185KBkHafPDJpOjsZ7vvvH741l0TzEt2vVNvePS7Mg.JPEG.china_lab/shutterstock_524181190.jpg?type=w800" alt="">
<p>
<input type="radio" name="menu" id="menu3" value="자장면">자장면
</p>
</div>
<div class = "menuItem">
<input class="img" id="짬뽕" type="image" src="https://img-cf.kurly.com/shop/data/goodsview/20210531/gv10000188583_1.jpg" alt="">
<p>
<input type="radio" name="menu" id="menu4" value="짬뽕">짬뽕
</p>
</div>
<!-- <input type="button" value="선택" onclick="m();"> -->
<div id="div1"></div>
</body>
</html>
|
cs |
- [menu] 메뉴 선택 >> jQuery로
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
.img{
width: 150px;
height: 150px;
}
div{
width: 200px; height: 200px;
display: inline-block;
}
#div1{
width: 500px; height: 200px;
}
</style>
<script>
$(function(){ // 페이지가 로딩되면 실행해라!
$("#menu1, #menu2, #menu3, #menu4").on("click", function(e){
console.log("test");
var ele = e.currentTarget;
console.log(ele);
$("#div1").html("<h2>선택하신 메뉴는 "+ele.value+"입니다.</h2>")
})
})
</script>
</head>
<body>
<h2>오늘의 점심 메뉴</h2>
<div class = "menuItem">
<input class="img" id="라면" type="image" src="https://health.chosun.com/site/data/img_dir/2020/09/07/2020090702900_0.jpg" alt="">
<p>
<input type="radio" name="menu" id="menu1" value="라면">라면
</p>
</div>
<div class = "menuItem">
<input class="img" id="도시락" type="image" src="https://www.lunchbasket.co.kr/data/item/997/0428_LUNCH_BASKET_MAIN0006.jpg" alt="">
<p>
<input type="radio" name="menu" id="menu2" value="도시락">도시락
</p>
</div>
<div class = "menuItem">
<input class="img" id="자장면" type="image" src="https://mblogthumb-phinf.pstatic.net/MjAxNzAxMjNfNDkg/MDAxNDg1MTYwMTQ1MDc5.H7I84KnCb0_U0Fb312NMMk10dbmNhdMb45jDiNYs13Eg.e3185KBkHafPDJpOjsZ7vvvH741l0TzEt2vVNvePS7Mg.JPEG.china_lab/shutterstock_524181190.jpg?type=w800" alt="">
<p>
<input type="radio" name="menu" id="menu3" value="자장면">자장면
</p>
</div>
<div class = "menuItem">
<input class="img" id="짬뽕" type="image" src="https://img-cf.kurly.com/shop/data/goodsview/20210531/gv10000188583_1.jpg" alt="">
<p>
<input type="radio" name="menu" id="menu4" value="짬뽕">짬뽕
</p>
</div>
<!-- <input type="button" value="선택" onclick="m();"> -->
<div id="div1"></div>
</body>
</html>
|
cs |
'HTML' 카테고리의 다른 글
| [jQuery] jQuery 응용 (0) | 2023.04.23 |
|---|---|
| [javascript] 닌자 고양이 게임 (0) | 2023.04.23 |
| [javascript] 우주선 게임 (0) | 2023.04.18 |
| [javascript] 마시마로 잡기 게임 (0) | 2023.04.16 |
| [HTML] javascript (3) - (로또 / innerText & innerHTML / 배열 / 객체 / 속성(property) + function(함수) / 익명함수) (0) | 2023.04.16 |