반응형 EVENT13 jquery 파일 업로드 시 선택된 파일 이름 표시 jQuery를 사용하여 파일 업로드 시 선택된 파일 이름을 표시하려면 요소의 change 이벤트를 활용하면 됩니다. 아래는 간단한 예제 코드입니다. HTML Choose a file: Selected file: None 동작 설명 HTML 구조: 사용자가 파일을 선택할 수 있는 파일 입력 필드입니다.: 선택된 파일 이름이 표시될 영역입니다.jQuery 코드$('#fileInput').on('change', ...): 파일 선택 필드에서 값이 변경될 때(파일 선택 시) 실행됩니다.$(this).val().split('\\').pop(): 파일 경로에서 파일 이름만 추출합니다. 브라우저마다 경로 형식이 다를 수 있으므로 spl.. 2024. 12. 5. jquery 다중 선택 박스 값 출력 jQuery를 사용하여 다중 선택 박스의 값을 출력하는 방법을 알려드리겠습니다. 기본적으로 HTML에서 다중 선택 박스(select 태그와 multiple 속성)를 사용하며 선택된 옵션의 값을 가져올 수 있습니다. HTML 좋아하는 과일을 선택하세요: 사과 바나나 체리 대추 엘더베리 선택된 값 출력 jQuery (multiSelect.js)$(document).ready(function () { $("#showSelected").on("click", function () { .. 2024. 12. 3. jquery 텍스트 필드 값 변경 시 유효성 검사 jQuery를 사용하여 텍스트 필드 값이 변경될 때 유효성 검사를 수행하는 방법을 알려드리겠습니다. 이를 위해 change 이벤트와 keyup 이벤트를 활용할 수 있습니다. HTML 코드 사용자 이름: 유효하지 않은 값입니다. 이메일: 올바른 이메일 주소를 입력하세요. 제출 jQuery 코드 (validation.js)$(document).ready(function () { // 사용자 이름 유효성 검사 $("#username").on("keyup change", function () { const username = $(this).va.. 2024. 12. 1. jquery 라디오 버튼으로 입력 폼 변경 jQuery를 사용하여 라디오 버튼 선택에 따라 다른 입력 폼을 표시하거나 변경하려면 change 이벤트를 활용하면 됩니다. 아래는 간단한 예제를 통해 이를 구현하는 방법을 보여드립니다. 1. HTML Form 1 Form 2 Input for Form 1: Input for Form 2: 2. CSS (선택 사항) .radio-group { margin-bottom: 20px;}.radio-group label { margin-right: 15px; cursor: pointer;}.form-content { margin-top: 20px;} 3. jQuery $(docume.. 2024. 11. 29. jquery 체크박스 선택 시 특정 섹션 활성화/비활성화 jQuery를 사용하여 체크박스를 선택하거나 선택 해제했을 때 특정 섹션을 활성화(표시)하거나 비활성화(숨김)하려면 아래 방법을 사용할 수 있습니다. HTML Show Section This is the section that will be shown or hidden based on the checkbox. jQuery 스크립트 (script.js)$(document).ready(function () { $('#toggleCheckbox').change(function () { if ($(this).is(':checked')) { // 체크박스가 선택된 경우 섹션 표시 $('#.. 2024. 11. 27. jquery 드롭다운 메뉴에서 선택에 따라 내용 변경 jQuery를 사용하여 드롭다운 메뉴에서 선택한 값에 따라 내용을 동적으로 변경하려면 다음과 같은 방식으로 구현할 수 있습니다. 기본 HTML 구조 Choose an option: Please select Option 1 Option 2 Option 3 Select an option to see the content. jQuery 스크립트 (script.js)$(document).ready(function () { $('#dropdown').change(function () { // 선택된 값 가져오기 let selectedValue = $(this).val();.. 2024. 11. 26. jQuery의 change() 이벤트를 활용한 실용적인 예제들 jQuery의 change() 이벤트는 (텍스트, 체크박스, 라디오 버튼 등), 등 값이 변경될 때 발생합니다. 이를 활용한 실용적인 예제들을 소개합니다. 1. 드롭다운 메뉴에서 선택에 따라 내용 변경 옵션 선택 빨강 초록 파랑 선택된 색상: 없음 사용 시나리오: 드롭다운 선택에 따라 페이지의 내용을 동적으로 변경 2. 체크박스 선택 시 특정 섹션 활성화/비활성화 세부 정보 보기 세부 정보: 여기에 표시됩니다. 사용 시나리오: 사용자가 선택한 옵션에 따라 추가 정보를 보여줌 3. 라디오 버튼으로 스타일 변경 빨강 초록 파랑 .. 2024. 11. 24. jQuery의 keydown() / keyup() / keypress() 이벤트를 활용한 실용적인 예제들 다음은 jQuery의 keydown(), keyup(), keypress() 이벤트를 실용적으로 활용할 수 있는 몇 가지 예제입니다. 각각의 이벤트는 특정 상황에서 효과적으로 사용할 수 있으며 아래에서 자세히 다룹니다. 1. keydown() 예제: 실시간으로 단축키 감지 Ctrl + S를 누르면 저장 메시지가 표시됩니다. 사용 시나리오: 단축키를 이용한 특정 기능 구현 (예: 저장, 새로 고침 방지 등) 2. keyup() 예제: 실시간 텍스트 변환 (대문자로 변환) 변환 결과: 사용 시나리오: 실시간으로 입력 내용을 가공하여 보여주는 동적 UI. 3. keypress() 예제: 숫자만 입력받기 (Deprecated 방식)주의: keypress()는.. 2024. 11. 23. jQuery의 focus() / blur() 이벤트를 활용한 실용적인 예제들 다음은 jQuery의 focus()와 blur() 이벤트를 활용한 실용적인 예제들입니다. 이 이벤트들은 주로 폼 요소에서 사용되며 사용자 경험을 개선하는 데 유용합니다. 1. 입력 필드 강조 및 해제사용자가 입력 필드에 포커스할 때 시각적으로 강조 표시하고 포커스를 벗어나면 기본 스타일로 복구합니다. Focus / Blur Highlight 2. 폼 유효성 검사 표시사용자가 입력 필드를 벗어났을 때(blur), 입력값의 유효성을 확인하고 메시지를 표시합니다. Validation Example Email: 3. 버튼 활성화 조건폼 필드가 모두 입력되었을 때만 버튼을 활성화합니다. 각 입력 필드를 blur 이벤트로 확인합니다. Enabl.. 2024. 11. 22. jQuery의 dblclick() 이벤트를 활용한 실용적인 예제들 다양한 jQuery dblclick() 이벤트의 실용적인 예제를 아래에 소개합니다. 각각의 예제는 실제 웹 개발에서 활용할 수 있는 내용으로 작성했습니다. 1. 이미지 확대/축소 기능더블클릭 시 이미지를 확대하거나 원래 크기로 복원하는 예제입니다. 2. 리스트 항목 강조/해제리스트 항목을 더블클릭하면 강조 표시를 추가하거나 제거하는 예제입니다. Item 1 Item 2 Item 3 3. 텍스트 더블클릭 시 편집 가능더블클릭으로 텍스트를 편집할 수 있는 간단한 예제입니다. Double-click to edit this text. jquery Method replaceWith() : 선택한 요소를 다른것으.. 2024. 11. 21. jQuery의 mouseenter() / mouseleave() 이벤트를 활용한 실용적인 예제들 mouseenter()와 mouseleave()는 요소에 마우스가 들어오거나 나갈 때 각각 이벤트를 트리거합니다. hover()와 유사하지만, mouseenter()는 이벤트 버블링이 발생하지 않아 부모 요소와 자식 요소가 중첩된 경우 더욱 세밀한 컨트롤이 가능합니다. 실용적인 예제를 몇 가지 소개합니다. 1. 버튼 강조 효과마우스가 버튼 위에 올라가면 색상이 변경되고, 벗어나면 원래 색상으로 돌아옵니다. Hover me 2. 카드 그림자 효과마우스를 카드 위에 올리면 그림자가 강조되고, 벗어나면 원래 상태로 돌아옵니다. 3. 메뉴 하이라이트네비게이션 메뉴에 마우스를 올리면 텍스트 색상과 배경색이 변경됩니다. Home About Contact 4. 이미지 캡션 .. 2024. 11. 19. jQuery의 hover() 이벤트를 활용한 실용적인 예제들 jQuery의 hover() 메서드는 마우스가 요소 위에 올라갔을 때와 벗어났을 때 각각 다른 동작을 수행할 수 있게 해줍니다. 실용적인 예제를 몇 가지 만들어보겠습니다. 1. 네비게이션 메뉴 강조마우스를 메뉴 항목 위에 올리면 배경색과 텍스트 색상이 변경되는 간단한 네비게이션 메뉴 예제입니다. Home About Services Contact 2. 이미지 확대 효과마우스를 이미지 위에 올리면 확대되고, 벗어나면 원래 크기로 돌아갑니다. 3. 툴팁 표시마우스를 특정 요소 위에 올리면 툴팁이 나타나는 예제입니다. Hover over me! This is a tooltip! 4. 카드 플립 효과마우스를 카드 위에 올리면 카드가 회전하면서 뒷면이 보이는 예제.. 2024. 11. 19. 이전 1 2 다음
