<!DOCTYPE html>
<html>
<head>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-->
<!-- <script src="./js/jquery.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<!-- Java Script : client(front).web server와는 관련 없음
화면의 resource와 값을 설정, 취득하는 부분을 처리한다.
DOM(getElementById, nodelist)
CSS(Cascading Style Sheet) : 디자인. front
JQuery : Java Script를 경량화. Java Script를 통해서 제작.
Ajax(비동기 통신) : 현재 자기 상태에서 데이터만 가져오는 것.
동기 통신 : <a <form location.href
Vue, reAct : JQuery대용으로 나온것들.
JQuery-UI : button, textField, slide
-->
<p>여기가 p 태그입니다</p>
<p id="demo">p tag id demo</p>
<p class="cls">p tag class cls</p>
<h3 class="cls">h3 tag class cls</h3>
<script type="text/javascript">
//Java Script
/* var arrPtag = document.getElementsByTagName("p");
for(i = 0; i<arrPtag.length; i++){
console.log(arrPtag[i].innerHTML) = "Hello P Tag";
}
*/
//JQuery
$(document).ready(function () {
// alert("JQuery 실행");
/*
$(태그명 또는 id 또는 class).핸들러함수() --> getter
$(태그명 또는 id 또는 class).핸들러함수(매개변수) --> setter
html() -> 문자열안의 tag를 인식
text() -> 모든 문자열로 취급
*/
//일반 Tag
//★ setter
// $("p").html("Hello P Tag"); // setter == innerHTML p테그의 값에 hello p tag문자열을 넣어라
// $("p").html("<b>Hello P Tag</b>"); // html은 테그로 인식
// $('p').text("<b>Hello P tag</b>"); //.text는 문자열로 인식
// JS
// document.getElementById("demo").innerHTML = "Hello P tag";
// JQ
// $("#demo").html("Hello P Tag");
// $("#demo").text("Hello P Tag");
//★ getter
//JS
/* var str = document.getElementById("demo").innerHTML;
alert(str); */
//JQ
/* var str = $("#demo").html();
alert(str); */
//★class
//JQ
//setter
$(".cls").text("class cls인 태그입니다");
//getter
var cls =$(".cls").text();
alert(cls);
});
</script>
</body>
</html>
