<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>로그인 폼을 작성해봅시다</p>
<button id="btnP">p태그 다루기</button>
<div id="div1">
<h1 class="h">로그인폼</h1>
ID : <input type="text" name="id"><br>
PW : <input type="text" name="pw">
</div>
<p class="h"></p>
<button id="btnDiv">div태그 다루기</button>
<button id="btnH">h태그 다루기</button>
<button id="addAttr">id input 속성 추가</button>
<button id="getId_Pw">input태그 다루기</button>
<button id="removeAttr">속성지우기</button>
<button id="removeP">p태그 지우기</button>
</body>
<script>
// 1. 'p태그 다루기'라는 버튼 클릭 시,
$('#btnP').click(function(){
// p태그 안에 내용 'p태그 클릭!'으로 변경
$('p').text('p태그 클릭')
})
// 2. 'div태그 다루기'라는 버튼 클릭 시, id가 div1인 태그의 배경 색상을 pink 색으로 변경
$('#btnDiv').click(()=>{
$('#div1').css('background-color','pink')
})
// 3. 'h태그 다루기'라는 버튼 클릭 시, 버튼 안의 글자 '바꾸기!'로 변경
// this 키워드 : 이벤트 대상과 이벤트 주체가 같을때
$('#btnH').click(function(){
$(this).text('바꾸기')
})
//4. 'id input 속성 추가'라는 버튼 클릭 시, input 창 placeholder 'ID작성'으로 변경!
$('#addAttr').click(function(){
// jQuery에서 속성에 접근 & 추가해주기 위한 키워드 : attr
$('input[name=id]').attr('placeholder','ID작성')
})
//5. 'input태그 다루기'라는 버튼 클릭 시, 사용자가 입력한 ID, PW 값을 alert창으로 띄워주기!
// js input 태그 값을 가져올 때 .value -> .val
$('#getId_Pw').click(()=>{
let id = $('input[name=id]').val();
let pw = $('input[name=pw]').val();
alert(id+pw)
})
// 6. 4번에서 추가한 placeholder속성 삭제
$('#removeAttr').click(()=>{
$('input[name=id]').removeAttr('placeholder')
})
// 7. removeP라는 버튼 클릭 시, P태그 삭제
$('#removeP').click(()=>{
$('p').remove()
})
</script>
</html>
