1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="./jquery/jquery.min.js"></script> <style type="text/css"> p{ background-color: olive; } h1{ background-color: blue; } </style> </head> <body> <p id="test">p tag id test</p> <p>p tag 1</p> <p>p tag 2</p> <div> <p>div 안의 p tag</p> </div> <h1 class="cls" onmouseover="_mOverFunc()">h1 class cls</h1> <h1 class="cls1" >h1 class cls1</h1> <script type="text/javascript"> $(function () { // alert("asdasd"); }); $(document).ready(function () { //document가 모두 준비가 된 상태에서 실행 $('#test').click(function () { //alert("p tag test click"); }); $("p").click(function () { // alert("p tag"); // alert( $("p").text() ); 모든 p태그 값을 가져옴 // alert( $(this).text() ); //click한 p태그에 대해서만 가지고온다 }); $("div p").click(function () { alert("div p tag click"); }); $("h1.cls1").mouseover(function () { $("#test").text("마우스 커서가 영역에 들어옴"); }); $("h1.cls1").mouseout(function () { $("#test").text("마우스 커서가 영역에서 벗어남"); }); }); function _mOverFunc() { // $("#test").text("마우스 커서가 영역에 들어옴"); } </script> </body> </html> | cs |
'IT Study > Web' 카테고리의 다른 글
| [JQuery] 기본 문법 - 마우스 이벤트 처리 (0) | 2018.08.06 |
|---|---|
| [JQuery] 기분 문법 3 - list (0) | 2018.08.06 |
| [JQuery] 기본 문법 (0) | 2018.08.06 |
| [JavaScript] DOM - Node 예제 (0) | 2018.08.06 |
| [JavaScript] DOM (0) | 2018.08.06 |