반응형
[jQuery] jQuesy 이벤트
event-1.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>jQuesy 이벤트</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { // jQuery("선택자").이벤트명(익명함수) => 단축형 jQuery("#btn").click(function() { jQuery("#display").text("환영합니다."); }); }); </script> </head> <body> <h1>jQuesy 이벤트</h1> <hr/> <p><button type="button" id="btn">버튼을 눌러주세요.</button></p> <div id="display"></div> </body> </html> |
① 출력결과 |
② 출력결과 |
event-2.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>jQuesy 이벤트</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { // jQuery("선택자").on("이벤트명", 익명함수); => 일반형 jQuery("#btn").on("click", function() { jQuery("#display").text("환영합니다."); }); }); </script> </head> <body> <h1>jQuesy 이벤트</h1> <hr/> <p><button type="button" id="btn">버튼을 눌러주세요.</button></p> <div id="display"></div> </body> </html> |
① 출력결과 |
| ② 출력결과 |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] checkbox 이벤트 (1) | 2015.12.29 |
|---|---|
| [jQuery] jQuery 엘리먼트 (0) | 2015.12.28 |
| [jQuery] text 메소드와 html 메소드 (0) | 2015.12.20 |
| [jQuery] attr 메소드 (0) | 2015.12.20 |
| [jQuery] css 메소드 (0) | 2015.12.20 |
