<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 방법 1) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> --> <!-- 방법 2) 다운로드 받아서 직접 연결하기 -> 인터넷 주소로 연결하는 것보다 빠름 <script type="text/javascript" src="./jquery/jquery.min.js"></script> --> <!-- 방법 3) --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!-- 항상 최신버전으로 사용 <script src="http://code.jquery.com/jquery-latest.min.js"></script> --> </head> <body> <!-- Javascript : client 언어(front), web server와 관계가 없다. CSS : client. 디자인 JQuery : Javascript를 경량화, 간략화 시켜 놓은 것이다. document.getElementById("id").innerHTML, value; $("#id").text() .val(); Ajax가 포함, DOM조작등을 단순화시켜 놓은 것이다. --> <p>여기가 p 태그입니다</p> <p id="demo">여기는 p태그이며, id는 demo입니다</p> <p id="cls" class="cls">여기는 p태그이며, class는 cls입니다</p> <h3 class="cls">여기는 h3태그이며, class는 cls입니다</h3> <pre> 입력:<input type="text" id="id" value="abc"> <button type="button" id="btn" name="btn" onclick="myfunc()">버튼</button> </pre> <br> <br> <select id="sel"> <option value="apple">사과</option> <option value="pear" selected="selected">배</option> </select> <script type="text/javascript"> // javascript function 활용 function myfunc() { /* // innerHTML은 html코드를 가져오는 것 (html코드로 들어감) var text = document.getElementById("demo").innerHTML; document.getElementById("demo").innerHTML = "Hello" // p태그의 text만 가져오려면 (문자열로만 들어감) var _text = document.getElementById("id").value; document.getElementById("id").value = "World"; */ /* var text = $("#demo").text(); $("#demo").text("jHello"); var _text = $("#id").val(); $("#id").val("jWorld"); */ } // JQuery $(function() { // JQuery 영역 // alert("JQuery 실행"); // p태그 감추기 // $("p").hide(); // id 접근 (demo 감추기) // $("p#demo").hide(); // $("#demo").hide(); // 클래스 접근 // $(".cls").hide(); // $("#id").hide(); // id 중복해서 사용 잘 안함 // class는 중복해서 사용함 // 일반 태그 가져오기 // alert($('#demo').text()); // textfield, textarea // alert($('#id').val()); // alert($('#sel').val()); // 클릭되면 demo에 텍스트 필드의 값을 집어 넣음 $("#btn").click(function() { // alert("클릭"); // alert($('#sel').val()); $('#demo').text($("#id").val()); }); }); </script> </body> </html>