2. 웹
[JQUERY] jquery이용하여 버튼 클릭 시 문서 바꾸기
lory글
2021. 8. 18. 19:47
출처: https://youngjinmo.github.io/2020/04/change-value-by-javascript/
JS로 텍스트 값을 바꾸는 2가지 방법
오늘 면접을 한 곳 보고왔는데, 이 때 받은 손코딩 문제중에 하나를 기억하고자 남기려고 한다. 사실 코딩 테스트라고 하기엔 좀 쉬운 문제였는데, 긴장을 해서인지 이것조차 못풀고온게 찝찝해
youngjinmo.github.io
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
// document : DOM객체들이 포함한 문서객체 (body에 있는 객체들)
// .ready() : 준비가 되면 즉, 로딩이 되면
// function(){} : 호출할 익명함수..
$(document).ready( function(){
// $("선택자").text("출력할 문자열");
$('h2').text("jquery 시작");
});
$(document).ready( function(){
// $("선택자").text("출력할 문자열");
$("h3").text("jquery 시작2");
});
$(document).ready( function(){
$("#jqueryBtn").click(function(){
$(".quiz-text").text("Javascript");
$(".quiz-text").css('color', 'blue');
});
});
$(document).ready( function(){
$("#change00").click(function() {
$('.change01').text("바뀌기후1");
$('.change02').text("바끼기후2");
});
});
$(document).ready( function(){
$("#change01").click(function() {
$('.change01').text("바뀌기전1");
$('.change02').text("바끼기전2");
});
});
</script>
</head>
<body>
<h2></h2>
<h3></h3>
<button type = "button" id= "change00">change</button> <button type = "button" id= "change01">return</button>
<h4 class = "change01">바뀌기전1</h4>
<h4 class = "change02">바뀌기전2</h4>
<p>
당신이 공부하는 언어는 <span class="quiz-text">Java</span>입니까?
</p>
<button id="jqueryBtn" type="button" id="changeByjQuery()">Run by jQuery</button>
</body>
</html>
