jQuery Chapter 12 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 12
들어가기 전에 – /exercise/0608/disappear.html <!DOCTYPE html> <html> <head> <script> </script> </head> <body> <p >If you click on me, I will disappear.</p> <p >Click me away!</p> <p >Click me too!</p> </body> </html> 각 문단을 클릭하면 사라지도록 자바스크립트 작성
예상 답안 - javascript <!DOCTYPE html> <html> <head> function hideThis(elm) { document.getElementById(elm).style.display="none"; } </script> </head> <body> <p id=text1 onclick=hideThis("text1")>If you click on me, I will disappear.</p> <p id=text2 onclick=hideThis("text2")>Click me away!</p> <p id=text3 onclick=hideThis("text3")>Click me too!</p> </body> </html>
모범 답안 - jQuery $(document).ready(function(){ $("p").click(function(){ <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html>
jQuery jQuery- 일종의 자바 스크립트 라이브러리 무료이다.
jQuery의 역사 jQuery는 존 레식(John Resig)이 2006년에 BarCamp NYC에서 발표 MIT 라이센스하에 배포되는 자유 오픈 소프트웨어
jQuery 사용방법 jQuery.com에서 jQuery 파일을 다운로드하는 방법 공개 서버로부터 네트워크를 통하여 웹페이지를 실행할 때마다 다운로드받을 수도 있다
jQuery(2017년 현재 version= 3.2.1) <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> </head> <head> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> </script> </head> <head> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> </head>
$(document).ready(function() { /* jQuery code here */ });
jQuery 문장의 구조 $(“p”).show() -> 모든 <p> 요소들을 찾아서 화면에 표시한다. $(“.group1”).slideup() -> class=group1인 요소를 슬라이드업 방식으로 표시한다. $(“#id9”).hide() -> id=id9인 요소를 화면에서 감춘다.
예 $(document).ready(function(){ $("#hide").click(function(){ $("#box").hide(); }); $("#show").click(function(){ $("#box").show();
jq-show-hide.html <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); </script> </head> <body> <p>If you click on the "Hide" button, I will disappear.</p> <button id="hide">Hide</button> <button id="show">Show</button> </body> </html>
events Here are some common DOM events: Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload
jQuery Effects (jQuery를 사용한 효과) - hide and show() $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show();
jQuery Effects - Fading Examples jQuery fadeIn() Demonstrates the jQuery fadeIn() method. jQuery fadeOut() Demonstrates the jQuery fadeOut() method. jQuery fadeToggle() Demonstrates the jQuery fadeToggle() method. jQuery fadeTo() Demonstrates the jQuery fadeTo() method.
fadeout, fadeToggle 추가 jq-fade.html <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#picture1").fadeIn(); $("#picture2").fadeIn("slow"); $("#picture3").fadeIn(3000); }); </script> </head> <body> <p>Demonstrate fadeIn/Out/Toggle() with different parameters.</p> <button id=btn1>Click to fade IN boxes</button> <button id=btn2>Click to fade OUT boxes</button> <button id=btn3>Click to fade TOGGLE boxes</button><br><br> <p><img src=images/nature.jpg id=picture1 style="display:none"> <p><img src=images/nature.jpg id=picture2 style="display:none"> <p><img src=images/nature.jpg id=picture3 style="display:none"> fadeout, fadeToggle 추가
jQuery Effects - Sliding Examples jQuery slideDown() Demonstrates the jQuery slideDown() method. jQuery slideUp() Demonstrates the jQuery slideUp() method. jQuery slideToggle() Demonstrates the jQuery SlideToggle() method.
jq-slide.html <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; </style> </head> <body> <div id="flip">Click to slide the panel down or up</div> <div id="panel">Hello world!</div> </body> </html>
Sliding 활용 위 링크를 클릭 소스를 다운받아 수정 http://cslab2.kku.ac.kr/~sunwoo//classroom/2017-1/web/jquery/jq-slide2.html 위 링크를 클릭 소스를 다운받아 수정 panel을 클릭할 때마다 메뉴가 slide Down/Up되도록
Method chaining $(document).ready(function () { show(), fadeIn/Out() 등의 메소드가 실행된 결과에 다시 연속해서 효과를 주는 방법을 method chainin이라고 한다. show() -> fadeout() -> slideDown()이 차례로 실행된다. $(document).ready(function () { $("button").click(function () { $("#picture").show().fadeOut().slideDown(); });
jQuery를 이용한 DOM 변경 DOM과 jQuery 비교 document.getElementById(“picture”).style.display=“block”; (“none”) = $(“#picture”).show(); (hide())
innerHTML = html() contents 변경하기 $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); });
Set/Get Content - text(), html(), and val() We will use the same three methods from the previous page to set content: text() - Sets or returns the text content of selected elements html() - Sets or returns the content of selected elements (including HTML markup) val() - Sets or returns the value of form fields
jq-text-html.html <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); </script> </head> <body> <p id="test1">This is a paragraph.</p> <p id="test2">This is another paragraph.</p> <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p> <button id="btn1">Set Text</button> <button id="btn2">Set HTML</button> <button id="btn3">Set Value</button> </body> </html>
입력 창의 값 가져오기 – val() alert($("#target").val()); <!DOCTYPE html> <head> <script src="http://code.jquery.com/jquery-1.10.1.js"></script> <script> $(document).ready(function () { $("button").click(function () { alert($("#target").val()); }); </script> </head> <body> 이름: <input type="text" id="target" value =""><br /> <button id="text">val()</button> </body> </html>
obj=document.getElementById(“id”); obj.style.color=“red”; = jQuery를 이용한 CSS 조작 obj=document.getElementById(“id”); obj.style.color=“red”; = $(“#id”).css(“color”,”red”);
To set a specified CSS property, use the following syntax: Set a CSS Property To set a specified CSS property, use the following syntax: css("propertyname","value");
jq-css.html <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").css({"background-color": "yellow", "font-size": "200%"}); }); </script> </head> <body> <h2>This is a heading</h2> <p style="background-color:#ff0000">This is a paragraph.</p> <p style="background-color:#00ff00">This is a paragraph.</p> <p style="background-color:#0000ff">This is a paragraph.</p> <p>This is a paragraph.</p> <button>Set multiple styles for p</button> </body> </html>
jQuery 정리 요약 summary $(document).ready(function(){ $(“선택자”).이벤트(function() { <- click, mouseenter 등 $(“선택자“).메소드(); <- hide(), slide(), html(), css() }); $("#hide").click(function(){ $("#box").slideToggle(); <- slide 하기 $(＂#show＂).click(function(){ $(＂#box＂).html(“inner HTML 처럼 내용을 바꿔요＂); <- 내용 바꾸기 $("#change").mouseenter(function(){ $("#box").css(“font-size”,”20pt”); <- CSS 변경하기
실습 – exercise0613 강의 노트에서 실습 http://cslab2.kku.ac.kr/~sunwoo/classroom/2017-1/web/exercise0613.html 벤치마크: 다음(DAUM)에서 실시간 이슈 검색어 메뉴 띄우기
DO Exercises in Lecture Note jQuery 선택자 연습문제 exercise1 exercise2 exercise3 exercise4 jQuery 이벤트 연습문제 exercise5
DO Exercises in Lecture Note 효과(fade, slide) 연습문제 exercise1 exercise2 exercise3 exercise4 html(), css() 연습문제 exercise5