반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<!--
Document Object Model
JavaScript : innerHTML, value
JQuery : html(), text(), val(), css(), attr(), prop
setter -> css("background-color", "#ff0000")
css({ "background-color": "#ff0000",
"border":"3px solid"});
getter는 key값만 넣으면 가져온다
getter -> var v = $("#id).css("background-color");
setter -> $(id, class, name, tag).val(값); <- input
$(id, class, name, tag).css("특성명", "값")
getter -> $(id, class, name, tag).val();
$(id, class, name, tag).css("특성명");
form setter
javascript는 name jQuery는 주로 id
form -> $(id, class, name, tag).attr("속성명", "값");
-->
<!-- 일반 Tag -->
<p id="demo">오늘 메뉴는 <b>하루엔 소쿠</b>, 돈까스와 라멘을 파는곳입니다. 어떠십니까</p>
<button id="btnText">show Text</button>
<button id="btnHtml">show Html</button>
<script>
$(document).ready(function() {
$("#btnText").click(function() {
var text = $("#demo").text();
alert(text);
});
$("#btnHtml").click(function() {
var html = $("#demo").html();
alert(html);
});
});
</script>
<br><br>
<!-- 입력(input, select) -->
<input type="text" id="text" placeholder="입력">
<button id="btnInput">show value</button>
<script>
$(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 id="btnAttr">Attrivbute(속성)</button>
<script>
$(function() {
$("#btnAttr").click(function() {
// getter
var attrVal = $("#naver").attr("href");
alert(attrVal);
//setter
$("#naver").attr("href", "http://www.daum.net");
$("#naver").text("다음 홈페이지");
});
})
</script>
</body>
</html>반응형
'JavaScript > jQuery' 카테고리의 다른 글
| 제이쿼리 기초부분 정리 (0) | 2020.01.14 |
|---|---|
| 제이쿼리, jsp간 연동해보기2 (0) | 2020.01.13 |
| 제이쿼리 , JSP 간 연동1 (0) | 2020.01.13 |
| 제이쿼리 filter, blur, hide, show, toggle (0) | 2020.01.13 |
| 제이쿼리 테이블에 값 넣기 (0) | 2020.01.13 |
