-
JavaScript JQuery 예제Javascript 2022. 7. 18. 16:29
EX 01. ID
1-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> </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>
'Javascript' 카테고리의 다른 글
JavaScript Ajax 예제 (0) 2022.07.19 JavaScript DOM 예제 (0) 2022.07.18 JavaScript Object 예제 (0) 2022.07.18 JavaScript Function 예제 (0) 2022.07.18 JavaScript Array 예제 (0) 2022.07.18