<!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>
<script>
// 1. 'p태그 다루기'라는 버튼 클릭 시, p태그 안에 내용 'p태그 클릭!'으로 변경
$('#btnP').click(()=>{
$('p').text('p태그 클릭!')
})
// 2. 'div태그 다루기'라는 버튼 클릭 시, id가 div1인 태그의 배경 색상을 pink 색으로 변경
$('#btnDiv').click(()=>{
$('#div1').css('background-color','pink')
})
// 3. 'h태그 다루기'라는 버튼 클릭 시, 버튼 안의 글자 '바꾸기!'로 변경
$('#btnH').click(()=>{
$('#btnH').text('바뀌')
})
//4. 'id input 속성 추가'라는 버튼 클릭 시, input 창 placeholder 'ID작성'으로 변경!
$('#addAttr').click(()=>{
$('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>
</body>
</html>
EX_02. Add
2-1. 요소 다루기
<!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>
<style>
div>img {
width: 200px;
height: 200px;
}
.c1 {
border: 3px solid chartreuse;
}
</style>
</head>
<body>
<div>
<!--1.-->
<img src="https://i.pinimg.com/736x/d1/d1/44/d1d144b365c3a570af83005eb172b6bb.jpg" id="img1">
</div>
<button id="btn1">div내부 앞에 추가</button>
<button id="btn2">div내부 뒤에 추가</button>
<button id="btn3">div외부 앞에 추가</button>
<button id="btn4">img 1개 삭제</button>
<button id="btn5">div 안 비우기</button>
<button id="btn6">class 추가</button>
<button id="btn7">class 삭제</button>
<button id="btn8">부모요소 접근</button>
<script>
$('#btn1').click(()=>{
//prepend : 해당 요소 내부 앞쪽에 추가
$('div').prepend('<h1>prepend</h1>');
})
$('#btn2').click(()=>{
//append : 해당 요소 내부 뒤쪽에 추가
$('div').append('<h1>append</h1>');
})
$('#btn3').click(()=>{
//before : 해당 요소 외부 앞쪽에 추가
$('div').before('<button id="btn9">div 외부 뒤쪽 추가</button>')
})
//.click vs .on('click')
//동적 이벤트 바인딩
//.click : 최초에 페이지를 로딩할때 선언되어있던 요소에 이벤트
//.on : 동적으로 추가 된 태그에 이벤트
$(document).on('click','#btn9',()=>{
//after : 해당 요소 외부 뒤쪽 추가
$('div').after('<h1>after</h1>');
})
$('#btn4').click(()=>{
//remove : 요소 삭제
$('#img1').remove();
})
$('#btn5').click(()=>{
// empty : 요소 전체 비우기
$('div').empty();
})
$('#btn6').click(()=>{
$('img').addClass('c1');
})
$('#btn7').click(()=>{
$('img').removeClass();
})
$('#btn8').click(()=>{
//parent : 부모 요소에 접근
$('div>img').parent().css('background-color','pink');
})
</script>
</body>
</html>
EX_03. 좋아요, 댓글 작성/삭제
<!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>
<button id='like'>좋아요</button><span>0</span>
<br>
<input type="text"><button class='writeCom'>댓글작성</button>
<br>
<div id="com">
<p>첫댓글<button class='removeCom'>삭제</button></p>
</div>
<script>
// 1. 좋아요 클릭 시, 좋아요 수가 1로 늘어나고
// 버튼은 좋아요 취소로 바뀜
$(document).on('click','#like',()=>{
$('#like').text('좋아요 취소')
$('#like+span').text(1)
$('#like').attr('id','dislike')
//$('button').removeAttr('id','like')
})
// 2. 좋아요 취소 클릭 시, 좋아요 수가 0으로 줄고
// 버튼은 다시 좋아요로 바뀜
$(document).on('click','#dislike',()=>{
$('#dislike').text('좋아요')
$('#dislike+span').text(0)
$('#dislike').attr('id','like')
// $('button').removeAttr('id','dislike')
})
// 3. 댓글 작성 시, 목록의 맨 위에 댓글이 추가
$('.writeCom').click(()=>{
let comment = $('input[type=text]').val()
$('#com').prepend('<p>'+ comment + '<button class="removeCom">삭제</button></p> ')
})
// 4. 삭제 버튼시, 그 댓글만! 삭제
$(document).on('click', '.removeCom',function(){
$(this).parent().remove()
})
</script>
</body>
</html>
EX_04. Animate
<!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>
<style>
#ani{
background-color: pink;
}
</style>
</head>
<body>
<button id="btn1">버튼 클릭</button>
<div id="ani"></div>
<script>
// animate() 함수 :css 속성들을 이용해서 애니메이션을 수행
// 수치형 속성값만 가능
$('#btn1').click(()=>{
let div = $('#ani');
div.animate({height :'500px',opacity:0.4},"fast");
div.animate({width :'500px',opacity:0.8},"fast");
div.animate({height :'100px',opacity:0.4},"fast");
div.animate({width :'100px',opacity:0.8},"fast");
})
</script>
</body>
</html>
