본문 바로가기

Lect & Tip/javascript, jQuery33

jQuery 동적 click 이벤트 처리하기 jQuery로 동적 click 이벤트 처리하기 개요 웹 개발에서 jQuery는 많은 유용한 기능을 제공하는데, 그 중 하나는 동적으로 생성된 요소에 클릭 이벤트를 적용하는 것입니다. 이 블로그 포스팅에서는 동적으로 생성된 버튼에 클릭 이벤트를 적용하는 방법을 알아보겠습니다. 상황 설정 보통 웹 페이지에서 버튼에 클릭 이벤트를 부여할 때, $(document).ready() 함수 내에서 이벤트를 선언합니다. 하지만 동적으로 생성된 버튼의 경우, 초기화 단계에서는 해당 버튼이 존재하지 않아 이벤트가 적용되지 않는 문제가 발생할 수 있습니다. 첫 번째 버튼 위 코드에서 두 번째 버튼 (secondButton)을 클릭해도 경고 메시지가 표시되지 않습니다. 이는 두 번째 버튼의 이벤트가 초기화 단계에서 이미 선언.. 2023. 8. 23.

jQuery를 이용하여 요소의 이름으로 현재 요소의 타입 알아내기 jQuery를 이용하여 요소의 이름으로 현재 요소의 타입 알아내기 안녕하세요! 이번 블로그 포스팅에서는 jQuery를 사용하여 요소의 이름을 기반으로 현재 요소의 타입을 어떻게 알아낼 수 있는지 알려드리겠습니다. 소개 웹 개발에서 종종 특정 요소의 타입을 알아내는 일이 필요합니다. 예를 들어, 다양한 입력 폼 요소 중에서 사용자가 입력한 값을 가져오려고 할 때 해당 요소가 인지, 인지, 아니면 인지 등을 구분해야 할 때가 있습니다. 방법 prop("tagName") 사용하기 var element = $("input[name='text']"); var tagName = element.prop("tagName"); console.log(tagName); // 결과 예시: "INPUT" [0].tagName .. 2023. 8. 15.

자바스크립트/jQuery로 input checkbox name값, value 값으로 체크하기 자바스크립트/jQuery로 input checkbox name값, value 값으로 체크하기 소개 이 블로그 포스팅에서는 자바스크립트/jQuery를 사용하여 input checkbox 요소를 name과 value 값을 이용하여 체크하는 방법에 대해 알아보겠습니다. input checkbox를 사용하면 여러 개의 값을 저장해야 할 때가 있습니다. name 속성을 동일하게 유지하면서 value만 다르게 설정하면 배열로 쉽게 값을 저장할 수 있어서 자주 사용되는 방식입니다. 하지만 이렇게 저장된 값을 다시 불러오는 것은 조금 까다로울 수 있습니다. 이러한 문제를 해결하기 위해 name과 value를 동시에 활용하여 체크박스를 선택할 수 있습니다. 방법 jQuery를 사용하여 input checkbox 요소를 .. 2023. 7. 31.

2023년 일용직 소득세 계산기 2023년 일용직 소득세 계산기 아래는 JavaScript를 사용하여 일용직 근로자의 소득세를 계산하는 간단한 함수입니다. function calculateTax(dailyWage) { const basicDeduction = 150000; // 기본공제액 const taxRate = 0.06; // 세율 const taxDeductionRate = 0.55; // 세액공제율 const localTaxRate = 0.1; // 지방세율 // 과세표준 계산 const taxableIncome = dailyWage - basicDeduction; if (taxableIncome 2023. 7. 3.

챗GPT 로또 당첨번호 예측 lotto 1073회 분석 1034 26 31 32 33 38 40 11 1035 9 14 34 35 41 42 2 1036 2 5 22 32 34 45 39 1037 2 14 15 22 27 33 31 1038 7 16 24 27 37 44 2 1039 2 3 6 19 36 39 26 1040 8 16 26 29 31 36 11 1041 6 7 9 11 17 18 45 1042 5 14 15 23 34 43 4 1043 3 5 12 22 26 31 19 1044 12 17 20 26 28 36 4 1045 6 14 15 19 21 41 37 1046 7 16 25 29 35 36 28 1047 2 20 33 40 42 44 32 1048 6 12 17 21 32 39 30 1049 3 5 13 20 21 37 17 1050 6 .. 2023. 6. 23.

javascript classList.toggle로 jquery addClass, removeClass, toggleClass 구현하기 / 더보기 버튼 클릭시 영역 확장 Javascript classList.toggle로 jQuery addClass, removeClass, toggleClass 구현하기 / 더보기 버튼 클릭시 영역 확장 서론 Javascript와 React에서 더보기 버튼을 클릭하면 내용이 확장되는 컴포넌트를 구현해보려고 합니다. 이를 위해서 jQuery를 사용하면 간단하지만, React에서는 불편함이 있습니다. 그러나 우리는 ref와 useState를 활용하여 더 간편하게 구현할 수 있습니다. 이번 블로그 포스팅에서는 classList.toggle 메서드를 활용하여 jQuery의 addClass, removeClass, toggleClass를 구현해보도록 하겠습니다. 또한, 더보기 버튼을 클릭하여 영역을 확장하는 예제도 함께 제시하겠습니다. class.. 2022. 11. 2.

이전 1 2 3 4 5 6 다음

티스토리툴바