<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function () { $("#eDiv").click(function () { console.log("click event!"); $("#eDiv").clone().appendTo($("body")); // body에 eDiv를 자식으로 들이면서 복제 }); </script> </head> <style> #eDiv { width: 100px; height: 100px; background: #ff0000; line-height: 100px; text-align: center; color: #ffffff; font-weight: bolder; margin: 20px; float: left; } </style> <body> <div id="eDiv">jQuery Event</div> </body> </html>
- 결과
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function () { $(document).on("click", "#eDiv", function () { // eDiv의 요소는 click 이벤트를 계속 on하는 것 $("#eDiv").clone().appendTo($("body")); }); }); </script> </head> <style> #eDiv { width: 100px; height: 100px; background: #ff0000; line-height: 100px; text-align: center; color: #ffffff; font-weight: bolder; margin: 20px; float: left; } </style> <body> <div id="eDiv">jQuery Event</div> </body> </html>
- 결과
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function () { $("#sbmBtn").click(function () { if ($("#uId").val() == "") { alert("user id blank!"); } else if ($("#uPw").val() == "") { alert("user pw blank!"); } else { alert("login ok"); $("loginForm").submit(); } }); $("#resBtn").click(function () { alert("reset ok"); $("#loginForm")[0].reset(); }); }); </script> </head> <style></style> <body> <form id="loginForm" action="http://www.google.com"> USER ID : <input id="uId" type="text" name="uId" /><br /> USER PW : <input id="uPw" type="password" name="upw" /><br /> <input id="sbmBtn" type="button" value="SUBMIT" /> <input id="resBtn" type="button" value="RESET" /> </form> </body> </html>
- 결과
1.
2.
3.
4.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function () { $("#loginForm").submit(function (event) { if ($("#uId").val() == "") { alert("user id blank!"); event.preventDefault(); // 기본적인 동작을 막는 로직 } else if ($("#uPw").val() == "") { alert("user pw blank!"); event.preventDefault(); } else { alert("login ok"); } }); $("#naver").click(function (event) { event.preventDefault(); }); $("#resBtn").click(function () { alert("reset ok"); $("#loginForm")[0].reset(); }); }); </script> </head> <style></style> <body> <form id="loginForm" action="http://www.google.com"> USER ID : <input id="uId" type="text" name="uId" /><br /> USER PW : <input id="uPw" type="password" name="upw" /><br /> <input id="sbmBtn" type="button" value="SUBMIT" /> <input id="resBtn" type="button" value="RESET" /> <a id="naver" href="http://www.naver.com">네이버</a> </form> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function () { function eventHandler(event) { console.log("click!"); console.log("this : " + this); // 호출한 놈 // for (var key in event) { // console.log(key + " : " + event[key]); // } } $("#objDiv").click(eventHandler); $("#objPar").click(eventHandler); }); </script> </head> <style></style> <body> <div id="objDiv">Object Division</div> <p id="objPar">Object Paragraph</p> </body> </html>
- 결과
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function () { $("#quantity").change(function () { // change 활용 var p = $("#price").val(); var q = $("#quantity").val(); var result = Number(p) * Number(q); $("#result").text(result); // 텍스트만 가지고 와서 result에 출력 }); }); </script> </head> <style></style> <body> 가격<input id="price" type="number" /> 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="result"></span> </body> </html>
- 결과
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function () { $("#bt").click(function () { var result = 0; $("input:checked").each(function (index, item) { result = result + Number(item.value); }); var values = ""; $("input:checked").each(function () { values = Number(values) + Number($(this).val()); }); $("#result").text(result); }); }); </script> </head> <style></style> <body> 바나나(1000원)<input id="v1" type="checkbox" name="fruit" value="1000" /><br /> 사과(500원)<input id="v2" type="checkbox" name="fruit" value="500" /><br /> 배(500원)<input id="v3" type="checkbox" name="fruit" value="500" /><br /> <button id="bt">총합 구하기</button><br /> 선택한 총 가격<span id="result"></span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function () { $("#bt").click(function () { var content = $("#content").val(); if (content == "") { return; } else { var list = $("<li></li>"); list.text(content); $("#result").append(list); } }); }); </script> </head> <style></style> <body> <input id="content" type="text" /> <button id="bt">추가</button><br /> <ul id="result"></ul> </body> </html>
- 결과
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> // "key" => JSON // key(따옴표 없이) => Java var person = { employees: [ { name: "Surim", lastName: "Son", }, { name: "Someone", lastName: "Huh", }, { name: "Someone else", lastName: "Kim", }, ], }; console.log(person.employees[0].name); console.log(person.employees[1].lastName); </script> </head> <body></body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function () { $.ajax({ type: "get", url: "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json", success: function (data) { // 통신 성공 console.log("통신 성공"); console.log(data); console.log(data.squadName); $(data.members).each(function (index, members) { console.log(members); }); }, }); }); </script> </head> <body></body> </html>
- 결과
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function () { $.ajax({ type: "get", url: "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json", success: function (data) { var table = "<table border=1>"; table += "<th>Name</th>"; // 열 한칸씩 생성 table += "<th>Age</th>"; table += "<th>SecretIdentity</th>"; table += "<th>Powers</th>"; $(data.members).each(function (index, members) { table += "<tr>"; // 행 생성 for (key in members) { table += "<td>"; table += members[key]; table += "</td>"; } table += "</tr>"; }); table += "</table>"; document.write(table); }, }); }); </script>
- 결과