-
210621_1(jQuery_ajax)HTML_JS(Sol)/jQuery_Ajax 2021. 6. 21. 17:44
꼭 설명할 수 있으면 좋은 핵심 내용.
1. jQuery : selector #id .class <tag> :속성
2. 이벤트처리 $(function( ) { $("selector").이벤트함수(function( ){ } ) }); ===>같은구조
3. json에 대한 이해
{ K : V, K : V, K : V, K : V, K : [v,v,v,v], k[{K : V},{K : V} ... }
4. xml방식의 응답처리 루트 --> 하위태그 --> 하위태그 ... (DOM구조)
5. ajax 비동기 통신
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>json(3)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <script type="text/javascript"> //하위 데이터 요소로서 JSON을 포함하고 있는 JSON 데이터 var keyword_rank ={ "r1" : { "k" : "HTML5", "s": "+", "v" : 178}, "r2" : { "k" : "CSS", "s": "new", "v" : 150}, "r3" : { "k" : "jQuery", "s": "+", "v" : 135} }; //JSOn 데이터의 내용을 목록 정의 태그로 구성 var tag = "<h1>인기 검색어 순위</h1><ul>"; tag += "<li>" + keyword_rank.r1.k + "(" + keyword_rank.r1.s + keyword_rank.r1.v + ")"; tag += "<li>" + keyword_rank.r2.k + "(" + keyword_rank.r2.s + keyword_rank.r2.v + ")"; tag += "<li>" + keyword_rank.r3.k + "(" + keyword_rank.r3.s + keyword_rank.r3.v + ")"; tag += "</ul>"; //구성한 내용을 화면에 출력 document.write(tag); </script> </head> <body></body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>json(4)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <script type="text/javascript"> //게시판 데이터 표현 var bbs = { "title" : "Javascript + jQuery + Ajax 완벽가이드", "description" : "솔데스크에서 진행중인 Javascript 강의 학생용 자료 입니다. 각 게시판의 다운로드 권한은 매 강의 개강시마다 부여됩니다.", "total" : 4, "item" : [ {"no" : "공지", "subject" : "'Javascript + jQeury + Ajax 완벽가이드' 강의 자료실입니다.", "hit": 3, "date" : "2021.06.21"}, {"no" : "3", "subject" : "'Javascript + jQeury + Ajax 완벽가이드' 3일차 강의 자료실입니다.", "hit": 6, "date" : "2021.06.21"}, {"no" : "2", "subject" : "'Javascript + jQeury + Ajax 완벽가이드' 2일차 강의 자료실입니다.", "hit": 15, "date" : "2021.06.15"}, {"no" : "1", "subject" : "'Javascript + jQeury + Ajax 완벽가이드' 1일차 강의 자료실입니다.", "hit": 19, "date" : "2021.06.7"} ] }; //bbs안의 각 독립된 값들에 대한 출력 HTML 생성 var html = "<h1>" + bbs.title + "</h1>"; html += "<p>" + bbs.description + "</p>"; html += "<p>총 게시물 수 : " + bbs.total + "개</p>"; html += "<ul>"; //배열로 표현되는 게시물 정보에 대한 출력 HTML 생성 for (var i =0; i <bbs.item.length; i++){ var item = bbs.item[i]; html += "<li>(" + item.no +")" + item.subject + "(조회수 : " + item.hit+"/ 날짜 :" + item.date+ ")</li>"; } html += "</ul>"; //화면 출력 document.write(html); </script> </head> <body></body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>json(5)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <script type="text/javascript"> var sayHello = { "name" : "Javascript", "eng" : function(){ var console = document.getElementById("console"); console.innerHTML = "Hello" + this.name; console.style.color = "#ff0000"; }, "kor" : function(){ var console = document.getElementById("console"); console.innerHTML = "안녕하세요" + this.name; console.style.color = "#0000ff"; } }; </script> </head> <body> <h1>JSON으로 그룹화된 함수 호출</h1> <input type="button" value="sayEng" onclick="sayHello.eng()"/> <input type="button" value="sayKor" onclick="sayHello.kor()"/> <h1 id="console"></h1> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>pageInit(1)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> //<h1> 태그가 클릭되었을 때, 동작할 함수 function h1_click(){ alert("클릭하셨습니다."); } function initPage(){ //제어할 대상의 id값 ("hello")에 의하여 태그요소(Element)를 가져온 뒤, //h1 이라는 변수에게 대입한다. --> 객체의 생성 var h1 = document.getElementById("hello"); //가져온 대상의 CSS속성을 제어한다. //실제 CSS코드와는 속성 이름이 조금씩 차이가 나며, //자바스크립트에서는 대소문자도 엄격히 구별해야 한다. h1.style.color = "#0000ff"; h1.style.backgroundColor ="#d5d5d5"; h1.style.fontSize = "50px"; h1.style.padding = "15px"; h1.style.margin = "0"; //객체의 시작태그와 끝내그 사이에 새로운 내용(혹은 요소)를 포함시킨다. h1.innerHTML ="Hello Javascript"; } </script> </head> <!--initPage()함수를 페이지가 모두 로드된 후에 동작시키기 위하여 onload 이벤트에 연결한다.--> <body onload="initPage();"> <!--제어 대상에게 id속성값을 부여한다.--> <h1 id="hello" onclick="h1_click();"></h1> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>pageInit(2)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> /** 앞 예제와 동일한 코드*/ function h1_click(){ alert("클릭하셨습니다."); } function initPage(){ var h1 = document.getElementById("hello"); h1.style.color = "#0000ff"; h1.style.backgroundColor ="#d5d5d5"; h1.style.fontSize = "50px"; h1.style.padding = "15px"; h1.style.margin = "0"; h1.innerHTML = "Hello Javascript"; //onload 이벤트에 의해서 이 함수가 실행되는 시점에서는 //Javascipt에서 <h1>태그를 인식하는 것이 가능하므로, // <h1>태그에 대한 이벤트 연결 역시 이 안에서 처리되어야 한다. h1.onclick = h1_click; //이벤트 설정시()를 넣으면 동작을 하지않음 } //onload 이벤트 연결 window.onload = initPage; //이벤트 설정시()를 넣으면 동작을 하지않음 </script> </head> <!-- body태그에 기술되던 Javascript 구문이 분리되었다.--> <body> <!-- 제어 대상에게 id속성값을 구여한다.--> <h1 id="hello"></h1> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>pageInit(3)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> window.onload = function(){ var h1 = document.getElementById("hello"); h1.style.color = "#0000ff"; h1.style.backgroundColor ="#d5d5d5"; h1.style.fontSize = "50px"; h1.style.padding = "15px"; h1.style.margin = "0"; h1.innerHTML = "Hello Javascript"; h1.onclick = function(){ alert ("클릭하셨습니다."); }; }; </script> </head> <!-- body태크에 기술되던 Javascript 구문이 분리되었다. --> <body> <!--제어 대상에게 id속성값을 부여한다.--> <h1 id="hello"></h1> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>eventListener</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> //<h1>태그를 클릭하였을때 실행할 함수 function h1_click(){ alert("클릭하셨습니다."); } //<body>의 onload 이벤트에 연결할 함수(1) function sayHello(){ alert("안녕하세요. 자바스크립트"); } //<body>의 onload 이벤트에 연결할 함수(2) function initPage(){ var h1 = document.getElementById("hello"); h1.style.color = "#0000ff"; h1.style.backgroundColor ="#d5d5d5"; h1.style.fontSize = "50px"; h1.style.padding = "15px"; h1.style.margin = "0"; h1.innerHTML = "Hello Javascript"; //페이지 로드가 완료된 이후이므로 <h1>태그에 대한 이벤트를 연결 할 수 있다. //단, IE와 그 이외의 브라우저를 구별해 주어야 한다. if(window.addEventListener){ //for Non-IE h1.addEventListener("click", h1_click, false); }else{ //for IE h1.attachEvent("click", h1_click); } } /** 비 IE와 IE를 분기하여 각각 이벤트 적용*/ if(window.addEventListener){ //for Non-IE window.addEventListener("load", sayHello, false); window.addEventListener("load", initPage, false); }else{ //for IE window.attachEvent("load", sayHello); window.attachEvent("load", initPage); } </script> </head> <body> <h1 id="hello"></h1> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>jQueryInit(1)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> function initPage(){ var h1 = document.getElementById("hello"); h1.style.color = "#0000ff"; h1.style.backgroundColor ="#d5d5d5"; h1.style.fontSize = "50px"; h1.style.padding = "15px"; h1.style.margin = "0"; h1.innerHTML = "Hello jQuery"; } function sayHello(){ alert("안녕하세요. 제이쿼리"); } //Classic Javascript의 inLoad 이벤트와 같은 효과 입니다. jQuery(sayHello); jQuery(initPage); </script> </head> <!-- body태그에 기술되던 Javascript 구문이 분리되었다. --> <body> <!-- 제어 대상에게 id속성값을 부여한다. --> <h1 id="hello"></h1> </body> </html>
.html()
.html() jQuery 메서드는 선택한 요소의 내용을 설정하고 반환합니다.
이 방법에 사용되는 경우 집합 콘텐츠, 그것은 모든 유사한 요소의
내용을 설정하는 요소의 콘텐츠는 완전히 새로운 콘텐츠로 대체된다.
이 방법을 사용하는 경우 얻은 컨텐츠를 첫번째 일치하는 요소를 가져온다.
이 메서드는 기본적으로 JavaScript innerHTML
.innerHTML()
.innerHTML() 속성은 .html() jQuery 메서드 처럼 작동합니다.
.innerHTML은 Javasceipt 속성입니다. innerHTML속성은 일치하는
요소의 HTML 콘텐츠
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>jQueryInit(2)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> //(2) initPage에게는 "$"라는 객체(혹은 함수)가 파라미터로 전달되는데, // 이 "$"sms jQuery의 모든 기능을 담고 있는 jQuery의 최상위 객체이다. function initPage($){ //var h1 = documnet.getElementByid("hello"); var h1 = $("#hello"); //h1.innerHTML = "Hello Javascript"; h1.html("Hello jQuery"); } //(1) body태그의 onload 이벤트때 호출되는 initPage함수 jQuery(initPage); </script> </head> <body> <h1 id="hello"></h1> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>jQueryInit(3)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> jQuery(function($){ var h1 = $("#hello"); h1.html("Hello jQuery!!!"); }); </script> </head> <body> <h1 id="hello"></h1> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>jQueryInit(4)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> //이 코드는 페이지가 열리면서 자동으로 실행되는, 크로스 브라우징 지원 코드입니다. $(function(){ $("#hello").html("Hello jQuery"); alert($("#text").html()); }); </script> </head> <body> <h1 id="hello"></h1> <p id="text">안녕하세요. jQuery</p> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>element</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <style type="text/css"> div#container { width: auto; border: 5px solid #ff00ff; padding: 10px; } div#container > h1#title { background-color: #d5d5d5; padding: 10px; } div#container div.box { padding: 10px; background-color: #ffff00; font: 20px '굴림'; } div#container > ul { list-style: none; padding: 10px; margin: 0px; width: auto; border: 5px solid #00ff00; } div#container > ul > li:first-child, div#container > ul > li:last-child { border: 3px dotted red; padding: 3px 10px; } pre { font: 14px/130% 'Courier New'; background: #eee; padding: 10px 20px; margin: 10px auto; border: 1px solid #555; border-radius: 20px; } </style> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> $(function(){ //id값에 의한 접근. 가장 일반적인 방법니다. $("#title").html("두번째 제목"); //자손 셀렉터의 사용 $("div#container div.box").html("안녕하세요."); //자손 셀렉터를 사용하며 모든 <li> 태그를 지정 $("ul > li").html("목록입니다."); //두 번째 <li> 태그만 지정한다. : eq(n)은 0부터 카운트한다. $("ul > li:eq(1)").html("jQuery 고유의 방식도 있습니다."); //복수 요소를 지정한다. $("p, pre").html("다중요소 선택"); //name 속성이 source인 항목만 지정 $("pre[name='source']").html("CSS2의 선택자"); //<li>태그의 첫 번째 항목과 마지막 항목 $("ul > li:first-child").html("First-Child"); $("ul > li:last-child").html("Last-Child"); }); </script> </head> <body> <div id="container"> <h1 id="title"></h1> <div class="box"></div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <pre></pre> <pre name='source'></pre> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>mouseEvent</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 결과확인에 대한 디자인 요소 입니다. --> <link rel="stylesheet" type="text/css" href="css/event.css" /> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> $(function(){ /** 마우스 버튼을 누름*/ $("#input").mousedown(function(){ $("#result").html("Mouse Down Event"); }); /** 아무스 버튼을 누른 상태에서 똄 */ $("#input").mouseup(function(){ $("#result").html("Mouse Up Event (onMouseOver"); }); /** 마우스 커서가 올라감*/ $("#input").mouseenter(function(){ $("#result").html("Mouse Enter Event (onMouseOver)"); }); /** 마우스 커서가 빠져나감 */ $("#input").mouseleave(function(){ $("#result").html("Mouse Leave Event (onMouseOut)"); }); }); </script> </head> <body> <h1>마우스 이벤트 확인하기</h1> <div id="input"> Do it in Here~!! </div> <h2>결과</h2> <div id="result"></div> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>clickEvent</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 결과확인에 대한 디자인 요소 입니다. --> <link rel="stylesheet" type="text/css" href="css/event.css" /> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> /** 클릭 이벤트 */ $(function(){ $("#input").click(function(){ $("#result").html("Click Event"); }); /** 클릭 이벤트 */ $("#input").dblclick(function(){ $("#result").html("Double Click Event"); }); }); </script> </head> <body> <h1>클릭 이벤트 확인하기</h1> <div id="input"> Click or Double Click Here~!! </div> <h2>결과</h2> <div id="result"></div> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>hoverEvent</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 결과확인에 대한 디자인 요소 입니다. --> <link rel="stylesheet" type="text/css" href="css/event.css" /> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> $(function(){ $("#input").hover(function(){ /** 마우스 커서가 올라감 */ $("#result").html("Mouse Enter Event (onMouseOver)"); }, function(){ /** 마우스 커서가 빠져나감 */ $("#result").html("Mouse Leave Event (onMouseOut)"); }); }); </script> </head> <body> <h1>Hover 이벤트 확인하기</h1> <div id="input"> Mouse Over or Out </div> <h2>결과</h2> <div id="result"></div> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>keyDown</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 결과확인에 대한 디자인 요소 입니다. --> <link rel="stylesheet" type="text/css" href="css/event.css" /> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> $(function(){ //눌러진 횟수를 카운트 하기 위한 변수 선언 var down_count =0; //떨어진 횟수를 카운트 하기 위한 변수 선언 var up_count = 0; /** 키가 눌러진 경우 혹은 누르고 있는 동안 */ $("#input > input[type='text']").keydown(function(){ //횟수를 1증가 down_count++; $("#result").html("down_count : " + down_count +" / up_count :" + up_count); }); /** 키가 떨어진 경우 */ $("#input > input[type='text']").keyup(function(){ //횟수를 1 증가 up_count++; $("#result").html("down_count :" + down_count + " / up_count : " + up_count); }); }); </script> </head> <body> <h1>Key 이벤트 확인하기</h1> <div id="input"> <input type="text"/> </div> <h2>결과</h2> <div id="result"></div> </body> </html>
mouseover mouseenter hover 차이점
https://recoveryman.tistory.com/51
https://m.blog.naver.com/ksh81850/220322909413
-------------------------
정리하기
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>jQueryInit(2)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> // (2) initPage 에게는 "$"라는 객체(혹은 함수)가 파라미터로 전달되는데, // 이 "$"는 jQuery의 모든 기능을 담고 있는 jQuery의 최상위 객체이다. function initPage($) { // var h1 = document.getElementById("hello"); var h1 = $("#hello"); // jquery로 얻어옴 h1.html("Hello jQuery"); //jquery함수 h1.html("Hello jQuery1");// 앞줄대체 h1.html("Hello jQuery2");// 앞줄대체 h1.innerHTML="innerHTML hello2"; //소용없음 // javascipt var h3 = $("#hello3"); h3.append("<li>id HI HI HI</li>"); // 태그가 인식 되어서 추가됨 h3.append("<li>id HI2 HI2 HI2</li>");// 하위요소 추가 h3.append("<li>id HI3 HI3 HI3</li>");// 하위요소 추가 var h4 = $(".hello3"); h4.append("<li>class hello3</li>");// 하위요소 추가 h4.append("<li>class HI2 HI2 HI2</li>");// 하위요소 추가 h4.append("<li>class HI3 HI3 HI3</li>"); // 하위요소 추가 // 또는 getElementsByClassName("xxx"); var h2 = document.getElementById("hello2"); //javascript h2.innerHTML="<li>innerHTML hello2</li>"; h2.innerHTML="<li>innerHTML hello3</li>"; // 태그 대체함 h2.append("<li>append hello2</li>"); // 태그를 문자로 추가함 h2.append("<li>append hello2</li>"); // 태그를 문자로 추가함 //h2.html="<li>html hello2</li>"; // jquery 호환불가 var h5 = document.getElementsByClassName("hello5"); // javascript h5[0].innerHTML="<li>innerHTML 5 HI3 HI3 HI3</li>"; h5[0].innerHTML="<li>innerHTML 5 HI4 HI4 HI4</li>"; //태그 형태로 대체함 h5[0].append("<li>append 5 HI2 HI2 HI2</li>"); //태그를 문자로 추가함 h5[0].append("<li>append 5 HI2 HI2 HI2</li>"); //h5.html("<li>html 5 HI3 HI3 HI3</li>"); //jquery 호환불가 } // (1) body태그의 onload 이벤트때 호출되는 initPage함수 jQuery(initPage); </script> </head> <body> <h1 id="hello"></h1> <ol id="hello2"></ol> <ul id="hello3"></ul> <ol class="hello3"></ol> <ol class="hello3"></ol> <ol class="hello5"></ol> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>keyCode</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 결과확인에 대한 디자인 요소 입니다. --> <link rel="stylesheet" type="text/css" href="css/event.css" /> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> // 키 코드값을 파라미터로 받아서 키보드의 이름을 리턴하는 함수 function getKeyName (keyCode){ //키 코드와 버튼 이름에 대한 JSON 배열 정의 var keyMap = [ {code: 8, name:"backspace" }, {code: 9, name:"tab" }, {code: 13, name:"enter" }, {code: 16, name:"shift" }, {code: 17, name:"ctrl" }, {code: 18, name:"alt" }, {code: 19, name:"pausebreak" }, {code: 20, name:"capslock" }, {code: 21, name:"han/eng" }, {code: 25, name:"hanja" }, {code: 27, name:"esc" } ]; //반복문을 배열의 크기만큼 진행 for (var i=0; i<keyMap.length; i++){ // JSON의 특정 값과 키 코드가 같다면? if(keyMap[i].code == keyCode){ //값을 리턴 --> 즉시 종료 return keyMap[i].name; } } } $(function(){ $("#input > input[type='text']").keydown(function(e){ $("#result").html(e.which + "번 키 눌러짐 >> " + getKeyName(e.which)); }); }); </script> </head> <body> <h1>Key 이벤트 확인하기</h1> <div id ="input"> <input type="text"/> </div> <h2>결과</h2> <div id="result"></div> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>keyPress</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 결과확인에 대한 디자인 요소 입니다. --> <link rel="stylesheet" type="text/css" href="css/event.css" /> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> $(function(){ var count = 0; $("#input > input[type='text']").keypress(function(){ count++; $("#result").html("key count : " + count); }); }); </script> </head> <body> <h1>이벤트 확인하기</h1> <div id="input"> <input type="text"/> </div> <h2>결과</h2> <div id="result"></div> </body> </html>
한글은 또 안먹음..
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>focusEvent</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 결과확인에 대한 디자인 요소 입니다. --> <link rel="stylesheet" type="text/css" href="css/event.css" /> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> $(function(){ $("#input > input[type='text']").focus(function(){ $("#result").html("포커스가 들어갔습니다."); }); $("#input > input[type='text']").blur(function(){ $("#result").html("포커스가 나갔습니다."); }); //페이지 열리면서 자동으로 포커스 설정 $("#input > input[type='text']").focus(); }); </script> </head> <body> <h1>focus/blur 이벤트 확인하기</h1> <div id="input"> <input type="text"/> </div> <h2>결과</h2> <div id="result"></div> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>changeEvent</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 결과확인에 대한 디자인 요소 입니다. --> <link rel="stylesheet" type="text/css" href="css/event.css" /> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> $(function(){ //텍스트 박스의 입력값 변경 상태 감지 $("input[name='user_name']").change(function(){ $("#result").html("이름의 입력값이 변경되었습니다."); }); // 체크박스의 체크 상태 변경 감지 $("input[name='hobby']").change(function(){ $("#result").html("취미가 변경되었습니다."); }); //라디오 버튼의 체크 상태 변경 감지 $("input[name='gender']").change(function(){ $("#result").html("성별이 변경되었습니다."); }); //드롭다운의 선택 상태 변경 감지 $("select[name='job']").change(function(){ $("#result").html("직업이 변경되었습니다."); }); }); </script> </head> <body> <h1>Change 이벤트 확인하기</h1> <div id="input"> <!-- 입력박스 --> <h3>이름</h3> <input type="text" name="user_name"/> <!-- 체크박스 --> <h3>취미</h3> <label><input type="checkbox" name="hobby" value="축구"/>축구</label> <label><input type="checkbox" name="hobby" value="농구"/>농구</label> <label><input type="checkbox" name="hobby" value="야구"/>야구</label> <!--라디오 버튼--> <h3>성별</h3> <label><input type="radio" name="gender" value="남자"/>남자</label> <label><input type="radio" name="gender" value="여자"/>여자</label> <!-- 드롭다운--> <h3>직업</h3> <select name="job"> <option value="프로그래머">프로그래머</option> <option value="퍼블리셔">퍼블리셔</option> <option value="디자이너">디자이너</option> <option value="기획">기획</option> </select> </div> <h2>결과</h2> <div id="result"></div> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>submitEvent</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 결과확인에 대한 디자인 요소 입니다. --> <link rel="stylesheet" type="text/css" href="css/event.css" /> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> $(function(){ $("form[name='form1']").submit(function(){ if(!confirm("정말 저장하시겠습니까?")){ return false; } }); $("input[type='reset']").click(function(){ if(!confirm("정말 입력을 취소하시겠습니까?")){ return false; } }); }); </script> </head> <body> <h1>회원가입</h1> <form name="form1" action="form_ok.html"> <div id="input"> <h3>당신의 이름은 무엇입니까?</h3> <input type="text" name="user_name"/> <input type="submit" value="저장하기" class="mybutton"/> <input type="reset" value="다시작성" class="mybutton"/> </div> </form> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>formEventEx</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 결과확인에 대한 디자인 요소 입니다. --> <link rel="stylesheet" type="text/css" href="css/event.css" /> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> $(function(){ //id속성이 join인 <form>태그 안의 submit 버튼을 누른 경우 $("#join").submit(function(){ /** 아이디 입력검사 */ //$(input 요소).val()는 사용자가 입력한 값을 리턴한다. var user_id = $("input[name='user_id']").val(); if (!user_id){ alert("아이디를 입력하세요."); $("input[name='user_id']").focus(); return false; } /** 비밀번호 입력검사*/ if (!$("input[name='user_pw']").val()){ alert("비밀번호를 입력하세요") $("input[name='user_pw']").focus(); return false; } /** 주민번호 입력검사*/ if (!$("input[name='juminno']").val()){ alert("주민번호를 입력하세요") $("input[name='juminno']").focus(); return false; } /** 라디오버튼 선택여부 검사*/ // !$("라디오버튼CSS셀렉터").is(":checked") -->체크일 경우 : true if(!$("input[name='gender']").is(":checked")){ alert("성별을 선택 하세요") $("input[name='gender']:eq(0").focus(); return false; } /** 이메일주소 입력검사*/ if (!$("input[name='email']").val()){ alert("이메일 주소를 입력하세요") $("input[name='user_email']").focus(); return false; } /** 홈페이지 주소 입력여부 검사*/ if (!$("input[name='url']").val()){ alert("홈페이지 주소를 입력하세요") $("input[name='url']").focus(); return false; } /** 핸드폰 번호 입력여부 검사*/ if (!$("input[name='hpno']").val()){ alert("핸드폰 번호를 입력하세요") $("input[name='hpno']").focus(); return false; } /** 체크박스 선택여부 검사*/ if (!$("input[name='hobby']").is(":checked")){ alert("취미를 입력하세요") $("input[name='hobby']:eq(0)").focus(); return false; } /** selectbox 선택여부 검사*/ if ($("select[name='job'] > option:selected").index() < 1){ alert("직업를 입력하세요") $("select[name='job']").focus(); return false; } /** 입력 내용을 화면에 출력해 봅시다. */ var user_id = $("input[name='user_id']").val(); var user_pw = $("input[name='user_pw']").val(); var juminno = $("input[name='juminno']").val(); var gender = $("input[name='gender']:checked").val(); var email = $("input[name='email']").val(); var url = $("input[name='url']").val(); var hpno = $("input[name='hpno']").val(); var job = $("select[name='job'] > option:selected").val(); //체크박스의 선택항목 값들을 추출 var hobby = $("input[name='hobby']:checked"); //추출된 값을 누적하여 저장할 문자열 변수 var selected_hobby = ""; //hobby의 개체 수 만큼 반복적으로 function() 이 실행된다. hobby.each(function(){ //각 반복되는 처리 안에서 $(this)는 hobby안에 포함된 개체이다. //-->체크된 n번째 체크박스임 //추출된 값을 누적 저장한다. selected_hobby += $(this).val() + ","; }); //출력할 문자열 만들기 var result = "<ul>"; result += "<li>아이디 : " + user_id +"</li>"; result += "<li>비밀번호 : " + user_pw +"</li>"; result += "<li>주민번호 : " + juminno +"</li>"; result += "<li>성별 : " + gender +"</li>"; result += "<li>이메일 : " + email +"</li>"; result += "<li>홈페이지 : " + url +"</li>"; result += "<li>핸드폰번호 : " + hpno +"</li>"; result += "<li>취미 : " + selected_hobby +"</li>"; result += "<li>직업 : " + job +"</li>"; result += "</ul>"; $("body").html(result); //submit되면 결과 확인이 안되므로 전송처리 강제 종료 return false; }); }); </script> </head> <body> <h1>회원가입</h1> <form name="form" id="join"> <div id="input"> <h3>아이디</h3> <input type="text" name="user_id" /> <h3>비밀번호</h3> <input type="password" name="user_pw" /> <h3>주민번호</h3> <input type="password" name="juminno" /> <h3>성별</h3> <label><input type="radio" name="gender" value="남자" />남자</label> <label><input type="radio" name="gender" value="여자" />여자</label> <h3>이메일주소</h3> <input type="email" name="email" /> <h3>URL</h3> <input type="url" name="url" /> <h3>핸드폰번호</h3> <input type="tel" name="hpno" /> <h3>취미</h3> <label><input type="checkbox" name="hobby" value="축구" />축구</label> <label><input type="checkbox" name="hobby" value="농구" />농구</label> <label><input type="checkbox" name="hobby" value="야구" />야구</label> <h3>직업</h3> <select name="job"> <option>----선택하세요----</option> <option value="프로그래머">프로그래머</option> <option value="퍼블리셔">퍼블리셔</option> <option value="디자이너">디자이너</option> <option value="기획">기획</option> </select> <input type="submit" value="회원가입" class="myButton" /> <input type="reset" value="다시작성" class="myButton" /> </div> </form> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>browserEvent(1)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 결과확인에 대한 디자인 요소 입니다. --> <link rel="stylesheet" type="text/css" href="css/event.css" /> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> $(function(){ $(window).resize(function(){ $("#result").html("<p>" + $(window).width() + " x " + $(window).height()+"</p>"); }); }); </script> </head> <body> <h1>창 크기 조절 이벤트</h1> <div id="result"></div> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>browserEvent(2)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 결과확인에 대한 디자인 요소 입니다. --> <link rel="stylesheet" type="text/css" href="css/event.css" /> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> $(function(){ $("#img").error(function(){ alert("이미지를 찾을 수 없습니다.") }).each(function(){ alert("이미지를 찾을 수 없습니다.") }); }); </script> </head> <body> <h1>에러 이벤트</h1> <!-- 실제로 존재하지 않는 파일이다. --> <img id="img" src="img/undefined.jsp"/> </body> </html>
'HTML_JS(Sol) > jQuery_Ajax' 카테고리의 다른 글
210622_1(jQuery_ajax) (0) 2021.06.22 210618_1(jQuery_ajax_json) (0) 2021.06.18 210617_1(jQuery_ajax) (0) 2021.06.17 210616_1(jQuery_ajax) (0) 2021.06.16 210615_2(jQuery_ajax) (0) 2021.06.15