본문 바로가기

JQuery

(8)
jQuery) 기타 유용한 함수 기타 다양한 상황에서 유용하게 쓰이는 jQuery 함수들입니다..siblings()선택한 요소의 형제 요소를 선택합니다.$('#example').siblings().css('color', 'blue'); // 형제 요소 모두 색상 변경 .parent() / .children()부모 요소나 자식 요소를 선택할 때 사용합니다.$('#example').parent().css('background-color', 'yellow'); // 부모 요소 선택$('#example').children().css('border', '1px solid red'); // 자식 요소 선택
jQuery) 문서 준비 및 로딩 함수 문서가 준비되었을 때 코드를 실행할 수 있는 함수들입니다.$(document).ready()페이지의 DOM이 완전히 로드된 후 실행할 코드를 지정합니다.$(document).ready(function() { console.log("문서가 준비되었습니다.");});
jQuery) 요소 추가 및 제거 함수 HTML 콘텐츠를 동적으로 추가하거나 제거하는 함수들입니다..append() / .prepend()요소의 자식으로 HTML 내용을 추가합니다. .append()는 요소의 끝에, .prepend()는 시작에 추가됩니다.$('#example').append('새로운 내용 추가'); // 마지막에 추가$('#example').prepend('처음에 내용 추가'); // 처음에 추가 .remove() / .empty()요소를 제거하거나 내부 콘텐츠를 비웁니다.$('#example').remove(); // 요소 제거$('#example').empty(); // 요소 내부 콘텐츠만 제거
jQuery) DOM 요소 반복 처리 함수 jQuery로 여러 요소를 반복해서 처리하는 방법입니다..each()jQuery의 each() 함수는 배열이나 DOM 요소와 같은 컬렉션을 반복(iterate)하면서, 각 요소에 대해 특정 작업을 수행할 수 있는 함수입니다. each() 함수는 배열이나 객체, DOM 요소에 대해 반복 작업을 수행할 때 유용하게 사용됩니다.$(선택자).each(function(index, element) { // 반복할 때 실행할 코드}); 파라미터 설명function(index, element): 반복문에서 실행될 함수로, 각 반복마다 index와 element 값이 전달됩니다.index: 현재 반복 중인 요소의 인덱스입니다. 0부터 시작하는 정수 값으로, 현재 요소가 컬렉션에서 몇 번째 요소인지를 나타냅니다.el..
jQuery) 애니메이션 및 효과 함수 웹 페이지에서 애니메이션 효과를 주거나 속성 값을 변경하는 함수들입니다..fadeIn() / .fadeOut()요소의 페이드 인/아웃 효과를 적용합니다.$('#example').fadeIn(); // 서서히 보이게 함$('#example').fadeOut(); // 서서히 숨기기 .animate()CSS 스타일 속성을 변경하며 애니메이션 효과를 구현합니다.$('#example').animate({ left: '200px', opacity: 0.5}, 1000); // 1초 동안 애니메이션 실행
jQuery) DOM 요소 숨기기 및 표시하기 함수 웹 페이지에서 요소를 숨기거나 표시하는 데 유용한 함수들입니다..hide() / .show()요소를 숨기거나 표시합니다.$('#example').hide(); // 숨기기$('#example').show(); // 보이기 .toggle()요소의 표시 상태를 토글합니다. 보이는 요소는 숨기고, 숨겨진 요소는 보이게 합니다.$('#example').toggle(); // 보이면 숨기고, 숨겨지면 보이게 함
jQuery) 이벤트 처리 함수 jQuery를 이용해 다양한 이벤트를 처리할 수 있는 함수들입니다..on()이벤트 리스너를 바인딩하여 사용자가 특정 동작을 할 때 실행할 코드를 지정합니다.$('#button').on('click', function() { alert('버튼이 클릭되었습니다!');}); .click() / .hover() / .keydown() 등특정 이벤트가 발생했을 때 실행할 함수를 정의하는 메서드들입니다.$('#example').click(function() { console.log('클릭됨');});
jQuery) DOM 선택 및 조작 jQuery를 이용해 DOM 요소를 선택하고 조작하는 주요 함수들입니다.$() (선택자 함수)DOM 요소를 선택하여 조작합니다. CSS 선택자를 사용하여 다양한 요소를 선택할 수 있습니다.// id가 'example'인 요소를 선택$('#example').css('color', 'blue');// 클래스가 'item'인 모든 요소를 선택$('.item').hide(); .css()선택한 요소의 CSS 스타일을 변경할 때 사용합니다.$('#example').css('color', 'red'); // 색상 변경 .html() / .text()요소의 HTML 내용 또는 텍스트 내용을 가져오거나 설정할 수 있습니다.$('#example').html('강조된 텍스트'); // HTML 변경$('#example..