SsY/Class
[jQuery] 002. jQuery 관찰 실습(2)
planet-si
2023. 6. 13. 18:00
728x90
더보기
포트번호 3306 (마리아DB) 관련 port
8090 의 경우는 oracle 에만 열려있어 외부 데이터로는 접속이 불가능하였으나,,,
3306의 경우는 외부에서도 접속 가능함
jQuery 관찰 실습
- JqueryApp
- JQTest04
- 강제 이벤트 발생 : trigger(트리거)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest04.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("h1").click(function()
{
$(this).html(function(index, html)
{
return html + "★";
});
});
// ※ 이벤트 강제 발생 시키기 : trigger(트리거)
//-- 필요에 따라 namne, id 등으로 값을 가져오는 것도 상관없다.
//$("input[type=button]").click(동작);
$("input[type=button]").click(function()
{
//alert("확인");
// 강제로 첫 번째 h1 태그에 click 이벤트를 발생시키도록 하겠다.
$("h1").first().click(); //-- h1 태그들. 중에 첫 번째 h1 태그가. 클릭된 것
// 강제로 마지막 h1 태그에 click 이벤트를 발생시키도록 하겠다.
$("h1").last().click(); //-- h1 태그들. 중에 마지막 h1 태그가. 클릭된 것
//-- first() 와 last() 말고도 어떤 선택을 할 수 있는지 API Document 를 통해 확인한다.
});
});
</script>
</head>
<body>
<input type="button" value="트리거 작동" />
<hr />
<h1>click start1 : </h1>
<h1>click start2 : </h1>
</body>
</html>- JQTest05
- keyboard (키보드) /마우스 관련 이벤트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest05.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
.outer
{
width: 200px;
height: 200px;
background: orange;
padding: 50px;
margin: 10px;
}
.inner
{
width: 100%;
height: 100%;
background: red;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// 키보드 관련 이벤트 처리
// $("textrea").keydown(동작);
/*
//-- keydown 을 사용하지 않는 것이 바람직
$("textarea").keydown(function()
{
//alert("확인");
//-- 멀쩡하게 나오는 것 처럼 보이지만... -> 입력 된 값을 알기 전에 경고창이 뜨게 됨
// 입력 컨트롤(textarea)에 입력된 값을 경고창을 통해 확인
//alert( $(this).text() ); //--text() → (X)
//alert( $(this).html() ); //--text() → (X)
//-- textarea 의 경우 .val() 속성을 통해 값을 얻어낸다.
alert( $(this).val() );
});
*/
// $("textrea").keyup(동작);
//-- keypress 의 경우 특수한 key 를 누르는 것을 통해 기능을 할 수도 있겠지만...
//-- key 를 두 개 이상 누르게 되는 중복값 입력이 불가능 하다.
$("textarea").keyup(function()
{
//alert( $(this).val() ); //-- (○)
//$(this).val(); //-- 여태까지 textarea 에 있는 모든 값을 가져오게 되는 구문
var len = $(this).val().length; //-- textarea 길이 값 반환
// 확인
//alert("len : " + len);
var remain = 30 -len;
// 확인
//alert("remain : " + remain);
$("h1").html(remain);
//-- h1태그의 내용을 remain 값으로 줄이겠다.
// remain 이 0 이 되었을 경우...
// 입력을 막아버리든지, 경고창을 띄운다던지 등의 추가 액션 처리 가능
if (remain<=10 && remain>=1)
{
$("h1").css("color","orange");
}
else if(remain<=0)
{
//$("h1").css("color","red");
$("h1").css("color","red").html("더 이상 입력 불가");
$(this).attr("disabled","disabled");
}
else
{
$("h1").css("color","black");
}
});
// $("button").click(동작);
$("button[type=button]").click(function()
{
$("textarea").removeAttr("disabled");
$("textarea").focus();
});
// 마우스 관련 이벤트 처리
//$(".outer").mouseover(동작);
/*
$(".outer").mouseover(function()
{
//$("body").append("test");
//--> outer 경계선 , inner 경계선 둘 다 이벤트 발생 -> 입체적으로 생각
$("body").append($("<div>mouseover</div>").css("color","orange"));
});
*/
//$("outer").mouseover(동작).mouseenter(동작);
$(".outer").mouseover(function()
{
$("body").append($("<div>mouseover</div>").css("color","orange"));
}).mouseenter(function()
{
$("body").append($("<div>mouseenter</div>").css("color","red"));
});
});
</script>
</head>
<body>
키보드 관련 이벤트<br>
1. keydown / 2. keypress / 3.keyup 순으로 이벤트 발생
<div>
<p>남기고 싶은 말</p>
<h1>30</h1>
<textarea rows="5" cols="70"></textarea>
<br>
<button type="button">해제</button>
</div>
마우스 관련 이벤트<br>
mouseenter / mouseleave / mousemove / mouseout / mouseover / mouseup 등 <br>
<br><br>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
- JQTest06
- 뷰테스트(100% 고정 후) 무한스크롤 확인
- JQTest07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest07.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
/*
$(function()
{
});
*/
// ↓
$(document).ready(function()
{
//$("#allCheck").change(동작);
/*
$("#allCheck").change(function()
{
// 확인
alert("change!");
});
*/
// ↓ ↑
//$("#allCheck").click(동작);
$("#allCheck").click(function()
{
// 확인
//alert("click!");
//check!-------------------------------------------------------
// 확인
//alert( $(this).attr("checked") ); //-- undefined / undefined
// 확인
//alert( $(this).prop("checked") ); //-- true / false
// ---- property : 프로퍼티(상태 속성) <─> attribute (attr) : (값) 속성
//alert( this.checked ); //-- true / false //-- js 객체 활용
//alert( $(this).is(":checked") ); //-- true / false
// --------- 『:』 ~에 대한 속성 값을 의미
//-------------------------------------------------------check!
// 일괄적으로 선택하는 방법 -- *선택자 구성*
// 방법 1.
//$("div > input:checkbox").prop("checked", true); //-- 모두 선택 됨
//$("div > input:checkbox").prop("checked", false); //-- 모두 취소 됨
//$("div > input:checkbox").prop("checked", this.checked);
//-- 위의 check 방법으로 true, false 반환하는 식 적용하면 됨
// 방법 2.
// 『$(선택자).children()』
$("div").children().prop("checked", this.checked);
});
});
</script>
</head>
<body>
<label>
<input type="checkbox" id="allCheck" />
<span style="font-weight: bold">모두 선택</span>
</label>
<br><br>
<div>
<input type="checkbox" id="check1" /><label for="check1">바나나</label><br />
<input type="checkbox" id="check2" /><label for="check2">복숭아</label><br />
<input type="checkbox" id="check3" /><label for="check3">딸기</label><br />
<input type="checkbox" id="check4" /><label for="check4">수박</label><br />
<input type="checkbox" id="check5" /><label for="check5">포도</label><br />
<input type="checkbox" id="check6" /><label for="check6">사과</label><br />
</div>
</body>
</html>- JQTest08
- Toggle(토글)
- position : absolute //-- 절대 위치 값
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest08.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
div.page
{
border: 1px solid grey;
padding: 3px;
margin: 2px;
position: absolute;
right: 10px;
top: 80px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").css({"display":"block","width":"150px"});
$("button").click(function()
{
//$(".page").toggle("slow");
// ※ 『$("선택자").next()』 : document 구조의 다음 엘리먼트
//$(this).next();
//-- 해당 클릭된 토글 버튼의 next -> div 블록을 의미
//$(this).next().toggle("slow");
$(this).next().toggle(1000, function()
{
alert("토글기능 테스트 완료");
});
//-- 정수가 작아질수록 빠름
});
});
</script>
</head>
<body>
show()/hide()/toggle()<br>
slideDown()/slideUp()/slideToggle()<br>
fadeIn()/fadeOut()/fadeToggle()<br>
<br><br>
<button>Toggle(토글) 버튼</button>
<div class="page">
<h1>jQuery Toggle</h1>
<p>
show()/hide()<br>
toggle()<br>
slideDown()/slideUp()<br>
slideToggle()<br>
fadeIn()/fadeOut()<br>
fadeToggle()<br>
</p>
</div>
<button>Toggle(토글) 버튼</button>
<div class="page">
<h1>jQuery Toggle</h1>
<p>
show()/hide()<br>
toggle()<br>
slideDown()/slideUp()<br>
slideToggle()<br>
fadeIn()/fadeOut()<br>
fadeToggle()<br>
</p>
</div>
<button>Toggle(토글) 버튼</button>
<div class="page">
<h1>jQuery Toggle</h1>
<p>
show()/hide()<br>
toggle()<br>
slideDown()/slideUp()<br>
slideToggle()<br>
fadeIn()/fadeOut()<br>
fadeToggle()<br>
</p>
</div>
<button>Toggle(토글) 버튼</button>
<div class="page">
<h1>jQuery Toggle</h1>
<p>
show()/hide()<br>
toggle()<br>
slideDown()/slideUp()<br>
slideToggle()<br>
fadeIn()/fadeOut()<br>
fadeToggle()<br>
</p>
</div>
<button>Toggle(토글) 버튼</button>
<div class="page">
<h1>jQuery Toggle</h1>
<p>
show()/hide()<br>
toggle()<br>
slideDown()/slideUp()<br>
slideToggle()<br>
fadeIn()/fadeOut()<br>
fadeToggle()<br>
</p>
</div>
</body>
</html>- JQTest09
- js 파일 가져다 쓰는 방법
- js 파일 : myBox에 있음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest09.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
ul
{
list-style: none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// jquert.innerfade.js
$("#innerFade").innerfade(
{
animationtype: 'slide' // Type of animation 'fade' or 'slide' (Default: 'fade')
, speed : 'slow' // Fading-/Sliding-Speed in milliseconds or keywords (slow, normal or fast) (Default: 'normal')
, timeout : '2000' // Time between the fades in milliseconds (Default: '2000')
, type: 'random' // Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence')
}
);
});
</script>
</head>
<body>
<ul id="innerFade">
<li>
<img alt="" src="images/obj01.jpg" style="width: 50%;"/>
</li>
<li>
<img alt="" src="images/obj02.jpg" style="width: 50%;" />
</li>
<li>
<img alt="" src="images/obj03.jpg" style="width: 50%;" />
</li>
<li>
<img alt="" src="images/obj04.jpg" style="width: 50%;" />
</li>
<li>
<img alt="" src="images/obj05.jpg" style="width: 50%;" />
</li>
</ul>
</body>
</html>- JQTest10 & JQTest11
- js 로 구성하기
- jquery 로 구성하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest10.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
body,div,span,table,th,td
{
font-size : 12px;
}
#list
{
border: 1px solid grey;
border-collapse: collapse;
width: 800px;
}
#list th
{
width: 152px;
}
#list td
{
width: 162px;
}
#list th, #list td
{
border: 1px solid grey;
padding: 3px;
}
</style>
<!-- 내 풀이
<script type="text/javascript">
function add()
{
//alert("와");
// item, week, start, end, color
// 채워 넣을 값
var item = document.getElementById("item").value;
var week = document.getElementById("week").value;
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var color = document.getElementById("color").value;
if (end<start)
{
alert("종료시간이 시작시간보다 앞일 수 없습니다.");
return;
}
var tdArr = document.getElementsByTagName("td");
for (var i=0; i<8; i++)
{
var cell;
if ( (start-1)<=i && (end-1)>=i)
{
cell = (i * 4) + (week-1);
tdArr[cell].innerText=item;
tdArr[cell].style.backgroundColor=color;
}
}
}// end add()
</script>
-->
<script type="text/javascript">
function add()
{
// item, week, start, end, color
// 채워 넣을 값
var item = document.getElementById("item").value; //-- 제목
var week = parseInt(document.getElementById("week").value); //-- 요일(1~4)
var start = parseInt(document.getElementById("start").value); //-- 시작 시간(1~8)
var end = parseInt(document.getElementById("end").value); //-- 종료 시간(1~8)
var color = document.getElementById("color").value; //-- 색상
var tds = document.getElementsByTagName("td");
//alert(tds.length);
//--==>> 32 (th 는 제외)
//tds[0].innerText = "test";
//tds[1].innerText = "test";
/*
tds[0 + 0 * 4].innerText = "test";
tds[1 + 1 * 4].innerText = "test";
tds[1 + 2 * 4].innerText = "test";
*/
for (var i=(week-1)+(start-1)*4); i<=((week-1)+(end-1)*4); i+=4)
{
tds[i].style.backgroundColor = color;
tds[i].innerText = item;
}
}// end add()
</script>
</head>
<body>
<h1>일정</h1>
<hr />
<table id="list">
<tr>
<th> </th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
</tr>
<tr>
<th>11:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>12:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>13:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>14:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>15:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>16:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>17:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>18:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div style="margin-top: 20px;">
<label for="item">제목</label>
<input type="text" id="item"/>
<br>
<label for="week">날짜</label>
<select id="week">
<option value="1">월요일</option>
<option value="2">화요일</option>
<option value="3">수요일</option>
<option value="4">목요일</option>
</select>
<br>
<label for="start">시간</label>
<select id="start">
<option value="1">11:00</option>
<option value="2">12:00</option>
<option value="3">13:00</option>
<option value="4">14:00</option>
<option value="5">15:00</option>
<option value="6">16:00</option>
<option value="7">17:00</option>
<option value="8">18:00</option>
</select>
~
<select id="end">
<option value="1">11:00</option>
<option value="2">12:00</option>
<option value="3">13:00</option>
<option value="4">14:00</option>
<option value="5">15:00</option>
<option value="6">16:00</option>
<option value="7">17:00</option>
<option value="8">18:00</option>
</select>
<br>
<label for="color">색상</label>
<select id="color">
<option value="#ff3300">빨강</option>
<option value="#ffff33">노랑</option>
<option value="#5599ff">파랑</option>
<option value="#808080">검정</option>
</select>
<br>
<input type="button" value="일정 추가하기" style="margin-top: 15px;" onclick="add()"/>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest11.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
body,div,span,table,th,td
{
font-size : 12px;
}
#list
{
border: 1px solid grey;
border-collapse: collapse;
width: 800px;
}
#list th
{
width: 152px;
}
#list td
{
width: 162px;
}
#list th, #list td
{
border: 1px solid grey;
padding: 3px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
// eq(), children()
function add()
{
// item, week, start, end, color
var item = $("#item").val(); //-- 내용
var week = $("#week").val(); //-- 1(월) 2(화) 3(수) 4(목) : 요일
var start = $("#start").val(); //-- 시작 시간(1~8)
var end = $("#end").val(); //-- 종료 시간(1~8)
var color = $("#color").val(); //-- #색상
//alert("item : "+item+"\n"+"week : "+week+"\n"+"start : "+start+"\n"+"end : "+end+"\n"+"color : "+color+"\n");
// javascript 로 처리했던 기능을 jquery 로 구성하면 더 간단하다.
// 1. 모든 tr 들 중 원하는 행을 찾고(→ eq())
// 2. 그렇게 찾은 tr 의 자식들 중(→ children())
// 원하는 td를 찾아서(eq()) 텍스트를 삽입하고 색상을 바꾼다.
for (var i=start; i<=end; i++)
{
// 확인
//alert(i);
//$("#list tr").eq(i).text("선택"); //-- 해당하는 열을 정적으로 바꿈
//$("#list tr").eq(i).text(item); //-- 내용만 동적으로 구성
//$("#list tr").eq(i).children().text(item); //-- 시간 ~ 셀에 내용 채워짐
// ---------- td들
//$("#list tr").eq(i).children().eq(week).text(item);
$("#list tr").eq(i).children().eq(week).css("background-color",color).text(item);
}
}
</script>
</head>
<body>
<h1>일정</h1>
<hr />
<table id="list">
<tr>
<th> </th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
</tr>
<tr>
<th>11:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>12:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>13:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>14:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>15:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>16:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>17:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>18:00</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div style="margin-top: 20px;">
<label for="item">제목</label>
<input type="text" id="item"/>
<br>
<label for="week">날짜</label>
<select id="week">
<option value="1">월요일</option>
<option value="2">화요일</option>
<option value="3">수요일</option>
<option value="4">목요일</option>
</select>
<br>
<label for="start">시간</label>
<select id="start">
<option value="1">11:00</option>
<option value="2">12:00</option>
<option value="3">13:00</option>
<option value="4">14:00</option>
<option value="5">15:00</option>
<option value="6">16:00</option>
<option value="7">17:00</option>
<option value="8">18:00</option>
</select>
~
<select id="end">
<option value="1">11:00</option>
<option value="2">12:00</option>
<option value="3">13:00</option>
<option value="4">14:00</option>
<option value="5">15:00</option>
<option value="6">16:00</option>
<option value="7">17:00</option>
<option value="8">18:00</option>
</select>
<br>
<label for="color">색상</label>
<select id="color">
<option value="#ff3300">빨강</option>
<option value="#ffff33">노랑</option>
<option value="#5599ff">파랑</option>
<option value="#808080">검정</option>
</select>
<br>
<input type="button" value="일정 추가하기" style="margin-top: 15px;" onclick="add()"/>
</div>
</body>
</html>728x90