<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- DOM Document Object Model -->
<!--
Javascript - innerHTML, value
innerHTML = setter
= innerHTML getter
JQuery - text(), val(), html(), attr(), prop()
text("Hello")
= text()
-->
<p id="test">
1인당 <b>23억원씩</b> 보유…부동산에 자산 절반 이상 투자
</p>
<button id="btn1">show text</button>
<button id="btn2">show html</button>
<script type="text/javascript">
$(function() {
// 문자열만 불러옴
$("#btn1").click(function() { // text
alert("text: " + $("#test").text());
});
// 코드까지 불러옴
$("#btn2").click(function() { // html
alert("html: " + $("#test").html());
});
});
</script>
<br>
<br>
<p>
<a href="http://www.naver.com" id="naver">네이버</a>
</p>
<button id="btn3">Attribute(속성)</button>
<script type="text/javascript">
$(function() {
$("#btn3").click(function() {
// alert("Attr : " + $('#naver').attr("href")); // getter
// attribute (URL)
// $('#naver').attr("href", "http://zum.com"); // setter
$('#naver').prop("href", "http://zum.com");
alert("http://zum.com으로 버튼 변경");
});
});
</script>
<br>
<br>
<input type="text" id="id" value="홍길동">
<button id="btn4">버튼</button>
<br>
<br>
<p id="demo">여기 p</p>
<script type="text/javascript">
$(function name() {
$("#btn4").click(function() {
// value
alert("text : " + $("#id").val());
$("#demo").text($("#id").val());
});
});
</script>
</body>
</html>
jQuery 기초 (style.css <link> 로 추가하기 / 버튼 클릭시...