<!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>
