ํ์ต ๋ด์ฉ
- jQuery ๋ ๋ฌด์์ธ๊ฐ
HTML์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋์กฐ์์ ๋จ์ํ ํ๋๋ก ์ค๊ณ๋ ํฌ๋ก์ค ํ๋ซํผ์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ (์ํค๋ฐฑ๊ณผ)
- jQuery ๋ถ๋ฌ์ค๋ ๋ฐฉ๋ฒ
ํ๊ทธ๋ head, boby ์ด๋์ ๋ฌ๋ ์๊ด์์ผ๋ ํต์์ ์ผ๋ก head์ ๋๋ค.
1. w3school์์ ์ฐพ์์ค๊ธฐ
www.w3schools.com/ ๋ก ๋ค์ด๊ฐ ์ผ์ชฝ jQuery๋ก ์ด๋ ํ ์๋ฌด ์์๋ฌธ ๋ค์ด๊ฐ์ ์ฃผ์ ์ง์ ๊ธ์ด์ค๊ธฐ
2. ์์ ํด๋์ ํ์ผ๋์ ๋ถ๋ฌ์ค๊ธฐ
jQuery ํ์ผ์ ๋ฐ์ ํ ์์ ํ์ผ์ ๋๊ณ ๋งํฌ ๊ฑธ๊ธฐ
ex) <script src="jquery/jquery.min.js"></script>
3. jQuery๊ณต์ ํํ์ด์ง
๊ณต์ ํํ์ด์ง์์ ์ง์ ์ฃผ์ ๋ฐ์์ค๊ธฐ.
ex) <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
- ํ์
$(tag๋ช
๋๋ id ๋๋ class ๋๋ name).ํธ๋ค๋ฌ ํจ์(๋งค๊ฐ๋ณ์)
$(document).ready(function() {
$("button").click(function() { //js์ onclick์ ์ ์ด์ฟผ๋ฆฌ๋ก ๊ตฌํํ๋ ๋ฐฉ๋ฒ
alert('click');
});
$('#btnId').click(function() { //id๋ก ์ ๊ทผ
alert('btnId click');
});
$("#btnId").on("click", function() { //on ํจ์ ์ฌ์ฉ
alert('btnId on click');
});
$("#btnId").on("click", btnClick); //js์ ํจ์ ํธ์ถ
});
function btnClick() {
alert("btnClick ํธ์ถ");
}
- this
์๋ฐ์คํฌ๋ฆฝํธ
๊ฐ๊ฐ์ pํ๊ทธ์ ์ ๊ทผํ๋ ค๋ฉด getElementsByTagName ํจ์๋ฅผ ํธ์ถํ์ฌ ๋ฐฐ์ด๋ก ๋ด์์ผ ํ๋ค.
<p onclick="func(0)">p tag 1</p>
<p onclick="func(1)">p tag 2</p>
<p onclick="func(2)">p tag 3</p>
<script type="text/javascript">
function func(n) {
let arrP = document.getElementsByTagName("p");
arrP[n].style.backgroundColor = "#ff0000";
}
</script>
์ ์ด์ฟผ๋ฆฌ
this๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ํ๊ทธ๋ง ํธ์ถ์ด ๊ฐ๋ฅํ๋ค.
<p>p tag 1</p>
<p>p tag 2</p>
<p>p tag 3</p>
<script type="text/javascript">
$(document).ready(function() {
$("p").click(function() { // pํ๊ทธ ํด๋ฆญ ์ (์ด๋ฒคํธ ์์ฑ)
$(this).css("background","#0000ff"); // ์์ ๋ณ๊ฒฝ. css( property๋ช
, ๊ฐ ) ๋งค๊ฐ๋ณ์ 2๊ฐ : setter | css( property๋ช
) ๋งค๊ฐ๋ณ์ 1๊ฐ : getter
$(this).hide(); // ์จ๊น <-> show();
//this : ์ด๋ฒคํธ ๋ฐ์ํ ํ๊ทธ๋ง ํธ์ถ
});
});
</script>- css()
CSS๋ก ์ ๊ทผํ ์ ์๋ ํจ์
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<style type="text/css">
.back{
color:#ffff00;
}
</style>
</head>
<body>
<table border="1">
<col width="50"><col width="200"><col width="150">
<tr>
<th>๋ฒํธ</th><th>์ด๋ฆ</th><th>๋์ด</th>
</tr>
<tr class="cls">
<th>1</th><td>ํ๊ธธ๋</td><td>24</td>
</tr>
<tr class="cls">
<th>2</th><td>์ฑ์ถํฅ</td><td>16</td>
</tr>
<tr class="cls">
<th>3</th><td>์ผ์ง๋งค</td><td>22</td>
</tr>
</table>
<p>p tag</p>
<button type="button">๋ฒํผ</button>
<input type="button" id="btn" value="input">
<script type="text/javascript">
$(document).ready(function() {
$('tr.cls').mouseover(function() { //(trํ๊ทธ, cls ํด๋์ค๋ช
) ๋ง์ฐ์ค ์ฌ๋ ธ์ ๋
$(this).css('background', '#00ff00'); //์์ ๋ณ๊ฒฝ
})
$('tr.cls').mouseout(function() { //๋ง์ฐ์ค ๋๊ฐ์ ๋
$(this).css('background', '#fff'); //์์ ๋ณ๊ฒฝ
})
//**์ ๋ ํจ์๋ฅผ ํตํด์ ๋ง์ฐ์ค๋ฅผ ๊ฐ๋ค ๋์์๋๋ง ์์์ด ๋ฐ๋๊ฒ ๋ง๋ค ์ ์๋ค.
$('button').click(function() {
//setter
$('p').css('background', "#0000ff");
$('p').text("์ฌ๊ธฐ๋ p ํ๊ทธ");
//getter
let bgcolor = $('p').css('background');
let text = $('p').text();
//attribute
//์์ฑ ์ถ๊ฐ : attr()
$('p').attr("id", "pid"); //p ํ๊ทธ id๊ฐ์ 'pid'๋ก ์ฝ์
$('p').attr("class", "back"); //p ํ๊ทธ class๋ฅผ 'back'์ผ๋ก ์ฝ์
$('p').addClass("back"); //์์ ํจ์์ ๋์ผ
//์์ฃผ ์ฌ์ฉ๋๋ ํจ์ : html(), text(), val(), css(), attr()
});
$("#btn").click(function() {
$('p').removeClass("back"); //p ํ๊ทธ์ 'back' ํด๋์ค๊ฐ์ ์ ๊ฑฐ
});
});
</script>
</body>
</html>
- ์๋ฐ์คํฌ๋ฆฝํธ 2์ค ๋ฐฐ์ด์ ์ด์ฉํด ํ ์ด๋ธ์ ๋ฐ์ดํฐ ์ฝ์ ํ๊ธฐ
eq() ํจ์๋ฅผ ํตํด tr, td์ ์์น๋ฅผ ์ง์ ํ ์ ์๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>์์์ํฉ</h1>
<button type="button" id="woman">์ฌ์ฑ๋ถ</button>
<button type="button" id="man">๋จ์ฑ๋ถ</button>
<br><br>
<table border="1">
<tr>
<th>title</th>
<th>name</th>
<th>time</th>
</tr>
<tr>
<th>์ฐ์น</th>
<td></td>
<td></td>
</tr>
<tr>
<th>2์</th>
<td></td>
<td></td>
</tr>
<tr>
<th>3์</th>
<td></td>
<td></td>
</tr>
</table>
<script type="text/javascript">
let woman = [
["",""],
["๊น์ํฌ","01:06:11"],
["์ฑ์ถํฅ","01:17:34"],
["๋ฐ์งํฌ","01:23:45"]
];
let man = [
["",""],
["ํ๊ธธ๋","01:16:23"],
["์ผ์ง๋งค","01:24:51"],
["์ ์๋","01:34:19"]
];
$(document).ready(function() {
$("tr:eq(1) td:eq(0)").html("๋ฐ์ดํฐ"); //trํ๊ทธ์ 1๋ฒ์ง, tdํ๊ทธ์ 0๋ฒ์ง์ "๋ฐ์ดํฐ" ์ฝ์
$('#woman').click(function() {
for (var i = 0; i < woman.length; i++) { //2์ค for๋ฌธ์ ์ด์ฉํ์ฌ ๋ฐ์ดํฐ ์ฝ์
for (var j = 0; j < woman[i].length; j++) {
$("tr:eq(" +i+ ") td:eq(" +j+ ")").html(woman[i][j]);
}
}
});
$('#man').click(function() {
for (var i = 0; i < man.length; i++) {
for (var j = 0; j < man[i].length; j++) {
$("tr:eq(" +i+ ") td:eq(" +j+ ")").html(man[i][j]);
}
}
});
});
</script>
</body>
</html>
- append(), prepend()
๋ค๋ก ์ถ๊ฐ, ์์ผ๋ก ์ถ๊ฐํ๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<p>๋ง์ ๊ฒ์ ํฌ๋ค์ด ๊ธฐ๋ค๋ ธ๋ ์๋น๋์ ์งํฌ์ค RTX 3060์ด ์ง๋๋ฌ ๋ง ์ ์ ์ถ์๋๋ค.</p>
<p>์ฃผ๋ ฅ ๊ทธ๋ํฝ ์นด๋ ์ค ํ๋๋ก ๊ฒ์ด๋ฐ์ด๋ ๋ฅ๋ฌ๋ ๋ฑ์ ์ํด ๊ทธ๋ํฝ์นด๋๋ฅผ ์ฌ์ฉํ๋ ค ํ ์ฌ๋๋ค์ ๊ด์ฌ์ ํ ๋ชธ์ ๋ฐ๊ณ ์๋ค.</p>
<ol>
<li>์ฌ๊ณผ</li>
<li>๋ฐฐ</li>
<li>๋ฐ๋๋</li>
</ol>
<select id="food">
<option>ํ๋ฒ๊ฑฐ</option>
<option>ํผ์</option>
<option>์นํจ</option>
</select>
<button type="button" id="append">์ถ๊ฐ(๋ค)</button>
<button type="button" id="prepend">์ถ๊ฐ(์)</button>
<script type="text/javascript">
$(function() { // pํ๊ทธ ์, ๋ค๋ก ์ถ๊ฐํ๊ธฐ
$('#append').click(function() {
$('p').append('<br>append ์ถ๊ฐ ์์์
๋๋ค');
});
$('#prepend').click(function() {
$('p').prepend('prepend ์ถ๊ฐ ์์์
๋๋ค<br>');
});
});
$(function() { // olํ๊ทธ ์, ๋ค๋ก ์ถ๊ฐํ๊ธฐ
$('#append').click(function() {
$('ol').append('<li>ํฌ๋</li>');
});
$('#prepend').click(function() {
$('ol').prepend('<li>๋ธ๊ธฐ</li>');
});
});
$(function() { // selectํ๊ทธ ์, ๋ค๋ก ์ถ๊ฐํ๊ธฐ
$('#append').click(function() {
$('#food').append('<option>์คํ
์ดํฌ</option>');
});
$('#prepend').click(function() {
$('#food').prepend('<option>์คํ
์ดํฌ</option>');
});
});
</script>
</body>
</html>
- hover(a, b)
mouseover, mouseout ์ด๋ฒคํธ ๋ฐ์
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<h2>room image</h2>
<img alt="" src="./images/photo_a.jpg">
<script type="text/javascript">
let num = 0;
$(document).ready(function() {
$('img').hover( //hover(a,b)
function() { //mouseover
$(this).attr('src','./images/photo_b.jpg');
},
function() { //mouseout
$(this).attr('src','./images/photo_a.jpg');
}
);
});
</script>
</body>
</html>
์์ ๋ฌธ์ 1
- focus, blur๋ฅผ ์ฌ์ฉํ์ฌ ๊ธฐ์ ํ๊ณ ์๋ ๋ฆฌ์์ค๋ฅผ ๊ตฌ๋ณ
- ํ์ธ ํ๋ฉด์ผ๋ก ์ด๋ํ๋ฉด *.jsp ํ์ผ์์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ ์ถ๋ ฅ
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<h1>์ก๋ถ์ ๋ณด์ ์
๋ ฅ</h1>
<p> ํฌ์ปค์ค </p>
<form id="sendFrm">
์ด ๋ฆ : <input type="text" name="name">
<br><br>
์ฐํธ๋ฒํธ : <input type="text" name="post1" size="5">-<input type="text" name="post2" size="5">
<button type="button" id="changeAdd">์ฃผ์๋ณํ</button>
<br><br>
์ฃผ์ : <textarea rows="3" cols="40" name="address"></textarea>
<br><br>
์ ํ๋ฒํธ : <input type="text" name="phone1" size="3">-<input type="text" name="phone2" size="5">-<input type="text" name="phone3" size="5">
<br><br>
๋ฐฐ๋ฌ์๊ฐ :
<select name="delitime">
<option>์ง์ ํ์ง ์์</option>
<option>10:00 ~ 12:00</option>
<option>12:00 ~ 15:00</option>
<option>15:00 ~ 17:00</option>
<option>17:00 ~ 20:00</option>
</select>
<br><br>
์์์ฆ ์์ฒญ : <input type="checkbox" name="bill">
<br><br>
๋ฉ์ผ ๋งค๊ฑฐ์ง์ ์์
<input type="radio" name="mail" value="์ ์ฒญ">์ ์ฒญ
<input type="radio" name="mail" value="์ ์ฒญํ์ง ์์">์ ์ฒญํ์ง ์์
<br><br>
<input type="button" value="ํ์ธํ๋ฉด์ผ๋ก ์งํ" id="push">
<script type="text/javascript">
let textFocus = $('p');
$(document).ready(function() {
$('input').focus(function() {
textFocus.text(this.name+' ํฌ์ปค์ค๋ฅผ ์ป์์ต๋๋ค');
});
$('input').blur(function() {
textFocus.text(this.name+' ํฌ์ปค์ค๋ฅผ ๋ฒ์ด๋ฌ์ต๋๋ค');
});
$('button#changeAdd').click(function() {
$('textarea').text('์์ธ ์ฑ๋ถ๊ตฌ');
});
$('#push').click(function() {
//๋น์นธ ์ฒดํฌ
if($("#_name").val() == "") {
alert("์ด๋ฆ์ ๊ธฐ์
ํด ์ฃผ์ญ์์ค");
}
else {
$("#sendFrm").attr('action','NewFile.jsp');
$("#sendFrm").attr('target','_blank'); // ์์ฐฝ์ผ๋ก ์ด๊ธฐ
$("#sendFrm").submit();
}
});
});
</script>
</form>
</body>
</html>
jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>๋ฑ๋ก ์๋ฃ</h1>
<%
String name = request.getParameter("name");
out.println("์ด๋ฆ : " +name);
%><br><br>
<%
String post1 = request.getParameter("post1");
String post2 = request.getParameter("post2");
out.println("์ฐํธ๋ฒํธ : " +post1+"-"+post2);
%><br><br>
<%
String phone1 = request.getParameter("phone1");
String phone2 = request.getParameter("phone2");
String phone3 = request.getParameter("phone3");
out.println("์ ํ๋ฒํธ : " +phone1+"-"+phone2+"-"+phone3);
%><br><br>
<%
String address = request.getParameter("address");
out.println("์ฃผ์ : " +address);
%><br><br>
<%
String[] delitime = request.getParameterValues("delitime");
out.println();
if(delitime != null && delitime.length > 0) {
for(int i = 0; i < delitime.length; i++) {
out.println("๋ฐฐ๋ฌ์๊ฐ : " +delitime[i]);
}
}
%><br><br>
<%
String bill = request.getParameter("bill");
out.println("์์์ฆ ์์ฒญ : " +bill);
%><br><br>
<%
String[] mail = request.getParameterValues("mail");
out.println();
if(mail != null && mail.length > 0) {
for(int i = 0; i < mail.length; i++) {
out.println("๋ฉ์ผ ๋งค๊ฑฐ์ง์ ์์ : " +mail[i]);
}
}
%><br><br>
</body>
</html>
์์ ๋ฌธ์ 2
- attend๋ฅผ ์ด์ฉํ ์ด๋ฏธ์ง ์๋ ์ฝ์
- ์ด๋ฏธ์ง ํด๋ฆญํ๋ฉด ํด๋น ์ด๋ฏธ์ง ์ญ์ ๊ตฌํ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<h2>์ด๋ฏธ์ง ์๋ ์ฝ์
</h2>
<p>๋ค์ ๊ทธ๋ฆผ์ "jQuery"์ ์ํด ์๋ ์ฝ์
๋์ด ์์ต๋๋ค.</p>
<p>์ด๋ฏธ์ง๋ฅผ ํด๋ฆญํ๋ฉด ์ด๋ฏธ์ง๋ฅผ ์ญ์ ํ ์ ์์ต๋๋ค.</p>
<p class="myClass"></p>
<script type="text/javascript">
let num = 1;
$(document).ready(function() {
for (var i = 1; i < 10; i++) {
$('p.myClass').append('<img src="./images/photo_' +i+ '.jpg">')
/*
JSON
let img = $('<img></img>').attr({ //JSON ๋ฐฉ์ (name : value)
"src":'./images/photo_' +i+ '.jpg',
"class":"photo"
});
$('.myClass').append(img);
*/
}
$('img').click(function() {
$(this).remove();
});
});
</script>
</body>
</html>
์์ ๋ฌธ์ 3
- ๋จ์๋ถ, ์ฌ์๋ถ ๋ฒํผ์ ๋๋ฅด๋ฉด td elemant์ ๋ฌธ์์ด ์นํ
- ์ด๋ฆ์ ํด๋ฆญํ๋ฉด alert์ฐฝ์ผ๋ก ์ด๋ฆ ์ถ๋ ฅ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<h1>Result of race#3</h1>
<button type="button" id="man">๋จ์๋ถ</button>
<button type="button" id="woman">์ฌ์๋ถ</button>
<table>
<tr>
<td></td>
<th>์ฑ๋ช
</th>
<th>์๊ฐ</th>
</tr>
<tr>
<th>์ฐ์น</th>
<td>ํ๊ธธ๋</td>
<td>1:21:15</td>
</tr>
<tr>
<th>2์</th>
<td>์ผ์ง๋งค</td>
<td>1:21:26</td>
</tr>
<tr>
<th>3์</th>
<td>์๊บฝ์ </td>
<td>1:21:31</td>
</tr>
<tr>
<th>4์</th>
<td>๊น์ฒ ์</td>
<td>1:21:32</td>
</tr>
<tr>
<th>5์</th>
<td>์ด์์ฉ</td>
<td>1:21:34</td>
</tr>
</table>
<script type="text/javascript">
let man = [
["",""],
["ํ๊ธธ๋","01:21:15"],
["์ผ์ง๋งค","01:21:26"],
["์๊บฝ์ ","01:21:31"],
["๊น์ฒ ์","01:21:32"],
["์ด์์ฉ","01:21:34"]
];
let woman = [
["",""],
["๊น์ํฌ","01:06:11"],
["์ฑ์ถํฅ","01:17:34"],
["๋ฐ์งํฌ","01:23:45"],
["๊นํ๋","01:29:45"],
["์ด์ง์","01:29:59"]
];
$(document).ready(function() {
$('#man').click(function() {
for (var i = 0; i < man.length; i++) {
for (var j = 0; j < man[i].length; j++) {
$("tr:eq(" +i+ ") td:eq(" +j+ ")").html(man[i][j]);
}
}
});
$('#woman').click(function() {
for (var i = 0; i < woman.length; i++) {
for (var j = 0; j < woman[i].length; j++) {
$("tr:eq(" +i+ ") td:eq(" +j+ ")").html(woman[i][j]);
}
}
});
$('tr').click(function() {
let name = $(this).find('td:eq(0)').text();
alert(name);
});
});
</script>
</body>
</html>
'๐ป ๊ฐ๋ฐ > ๐ TIL (Today I Learned)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| 21.03.10(D+40 ์๋ธ๋ฆฟ(Servlet) , WAS) (0) | 2021.03.10 |
|---|---|
| 21.03.09 TIL(D+39 XML, JSON) (0) | 2021.03.09 |
| 21.03.04 TIL(D+36 JavaScript) (0) | 2021.03.04 |
| 21.03.03 TIL(D+35 JavaScript) (0) | 2021.03.03 |
| 21.03.02 TIL(D+34 JavaScript) (0) | 2021.03.02 |
