-
[jQuery] 002. jQuery 관찰 실습(2)SsY/Class 2023. 6. 13. 18:00728x90더보기
포트번호 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% 고정 후) 무한스크롤 확인
scroll Height 는 문서 시작부터 노란색 영역(움직인 윈도우 영역)끝까지의 높이다.
- 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'SsY > Class' 카테고리의 다른 글
[Spring] 006. Spring MVC 관찰(2) (0) 2023.07.03 [Spring] 005. Spring MVC 의 개요 (0) 2023.06.29 [jQuery] 001. jQuery 의 개요 (0) 2023.06.12 [Servlet] 005. MVC 관련 실습(2) (0) 2023.06.08 [Servlet] 004. MVC 패턴 (Model2) 개요 (0) 2023.06.07 - JQTest04