링크 연결과 버튼 클릭시 다른 링크 연결
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<!--
Document object Model
JavaScript : innerHTML, value
JQuery : html(), text(), val(), css(), attr(), prop()
setter -> css("background-color", "#ff0000") //setter는 두 개
css({
"background-color":"#ff0000",
"border":"3px solid"
});
getter -> var v = $("#id").css("background-color"); //getter는 한 개 getter는 한꺼번에 못가져오고 따로따로 가져와야하낟.
setter -> $( id, class, name, tag ).val(값); <- input에 해당되는 것은 이것으로 갖고와 값을 세팅해준다.
$( id, class, name, tag ).css("특성명", "값");
getter -> $( id, class, name, tag ).val();
$( id, class, name, tag ).css("특성명");
//setter
form -> $( id, class, name, tag ).attr("속성명","값");
$( id, class, name, tag ).submit(); //action을 위에 적어주었을때 ex) Sample05_index1참고
<!-- 일반 Tag -->
<p id="demo">해커가 '<b>틱톡</b>'영상 조작 가능... 보안 취약점 드러나</p>
<button id ="btnText">show text</button>
<button id ="btnHtml">show Html</button>
<script type="text/javascript">
$(document).ready(function() {
$("#btnText").click(function() {
var text = $("#demo").text();
alert(text); // 텍스트만 가져온다. (HTML 코드 무시된다.)
});
$("#btnHtml").click(function() {
var html = $("#demo").html();
alert(html); // HTML 코드로 가져온다.
});
});
</script>
<br><br>
<!-- 입력(input, select) -->
<input type="text" id="text" placeholder="입력주제">
<button type="button" id="btnInput">show value</button>
<script type="text/javascript">
$(function(){
$("#btnInput").click(function(){
var v = $("#text").val(); //getter
alert(v);
});
});
</script>
<br><br>
<!-- attr -->
<p>
<a href="http://www.naver.com" id="naver">Naver Link</a>
</p>
<button type="button" id="btnAttr">Attribute(속성)</button>
<script type="text/javascript">
$(function(){
$("#btnAttr").click(function(){
//getter
var attrVal = $("#naver").attr("href");
alert(attrVal);
//setter
$("#naver").attr("href","https://www.daum.net/");
$("#naver").text("다음 홈페이지");
});
});
</script>
</body>
</html>
