jQuery5 09. jQuery_ .show() 와 .hide() 사용 📌 jQuery – .show() 와 .hide() 사용하기jQuery에서는 HTML 요소를 손쉽게 보이거나 숨길 수 있는 메서드를 제공합니다. 이번 예제에서는 버튼 클릭을 통해 텍스트()를 제어하는 방법을 살펴봅니다.✅ 주요 메서드.show()선택한 요소를 보이게 합니다.인자로 시간을 주면 애니메이션 효과로 점점 나타납니다.show(5000) → 5초 동안 서서히 보이기.hide()선택한 요소를 숨깁니다.인자로 시간을 주면 점점 사라지는 애니메이션 효과를 줍니다.콜백 함수 (callback)애니메이션이 끝난 후 실행할 작업을 지정할 수 있습니다.예) .show(5000, function(){ $(this).css('background','yellow'); });✅ 코드 설명$(document).rea.. 2025. 9. 9. 08. jQuery_change() jQuery change 이벤트 예제 (드롭다운 선택 시 이미지 변경)이번에는 jQuery의 change 이벤트를 활용해서드롭다운에서 선택한 값에 따라 이미지를 바꾸는 예제를 만들어 보았습니다.📌 change 이벤트란?, , 등의 값이 변경될 때 발생하는 이벤트입니다.사용자가 드롭다운에서 옵션을 선택하거나, 입력창의 값이 바뀔 때 자동으로 실행됩니다.기본 문법$('#요소id').change(function(){ // 값이 변경되었을 때 실행할 코드});📌 예제 1: ch5 Ex07_change.html 딸기 바나나 사과 .. 2025. 9. 9. 07. jQuery_bind() 📌 jQuery bind() 메서드 정리✅ 1. 개념bind()는 jQuery에서 이벤트를 요소에 연결(바인딩) 할 때 사용하는 메서드입니다.하나의 요소에 여러 이벤트를 동시에 묶어서 처리할 수 있습니다.jQuery 3.0 이후로는 on() 메서드로 대체되었으며, bind()는 구버전에서 주로 사용됩니다. $(function(){ cnt = 0; // bind : 묶다. 엮어주다. 이어주다 $('img').bind({ // 두개의 이벤트를 묶어줌 'mouseover' : function(){ // 마우스 올릴때 $('img').attr('src', "../images/but2.gif") cnt++; if(cnt==5) $('img').unbind(); }, mou.. 2025. 9. 9. 06. JQuery_ .empty() 와 .remove() 📌 jQuery – .empty() vs .remove()jQuery에서는 DOM 요소를 삭제할 때 두 가지 대표적인 메서드가 있습니다:.empty() 와 .remove(). 비슷해 보이지만 동작은 다릅니다. ✅ 1. .empty()선택한 요소 내부의 자식 요소만 모두 제거합니다.요소 자체()는 남아 있기 때문에, 이후에 다시 내용을 추가할 수 있습니다.$('#btnEmpty').click(function(){ $('div').empty(); // div 안의 내용만 삭제 $('div').append("Hi!!"); // 다시 내용 추가 가능}); 👉 결과: 박스는 유지되고 안에 들어있던 태그들이 사라집니다. 그리고 "Hi!!"가 새로 들어갑니다. ✅ 2. .remov.. 2025. 9. 9. 03. jQuery로 테이블 점수 색상 처리 & 총합 계산 ✅ 주요 포인트$('td:nth-child(2)') → 모든 행에서 두 번째 (점수 칸) 선택.each(function(){ ... }) → 점수 칸을 하나씩 반복 처리$(this).text() → 현재 선택한 안의 값 가져오기.parent() → 현재 의 부모() 선택 ✅ 동작 코드$(document).ready(function(){ let sum = 0; $('td:nth-child(2)').each(function(){ let score = eval($(this).text()); // td의 값(문자열 → 숫자) sum += score; if(score >= 80){ $(this).parent().css('backgroundColor', 'cyan'); // 행 전체.. 2025. 9. 8. 이전 1 다음