반응형 jquery71 jQuery에서 동적으로 추가된 <input> 요소에서 외부 함수를 호출 jQuery에서 동적으로 추가된 요소에서 외부 함수를 호출하는 방법은 여러 가지가 있습니다. 주로 다음과 같은 방법을 사용할 수 있습니다.1. on()을 사용한 이벤트 위임동적으로 생성된 요소는 기존 요소에 직접 이벤트를 바인딩할 수 없으므로, on()을 사용하여 부모 요소에서 이벤트를 위임해야 합니다. 예제: 동적으로 추가된 input에서 외부 함수 호출 입력창 추가 2. change() 이벤트 사용입력값이 변경된 후 외부 함수를 실행할 수도 있습니다.$(document).on("change", ".dynamic-input", function () { externalFunction($(this).val());});3. keyup() 이벤트 사용사용자가 입력할 때마다 외부 함수를.. 2025. 3. 29. jquery div로 구성하되 조건에 따라 초기 필드를 설정하고, 추가 및 삭제 기능을 구현 요구 사항초기 필드 개수 설정 가능 (예: 3개 기본 생성)[추가] 버튼 클릭 시 필드 추가 가능[삭제] 버튼 클릭 시 해당 필드 삭제 가능최소 필드 개수 유지 (예: 2개 이하로는 삭제 불가) jQuery 코드 예제 추가 기능 설명 초기 필드 3개 생성 (initialFields = 3;)최소 필드 개수 2개 유지 (minFields = 2;)필드 추가 버튼을 누르면 새로운 필드가 추가됨삭제 버튼을 눌러 필드를 삭제할 수 있음단, 최소 필드 개수(2개) 이상은 유지해야 함 #jquery #필드추가 #필드삭제 2025. 3. 27. iframe이나 동적으로 생성한 div 내부에서 마우스 좌표값을 얻는 방법 1. 일반적인 문서에서 마우스 좌표값 얻기일반적인 웹페이지에서 마우스의 X, Y 좌표를 가져오는 기본적인 방법입니다.$(document).mousemove(function (event) { console.log("X: " + event.pageX + ", Y: " + event.pageY);}); 설명event.pageX, event.pageY → 브라우저 전체 페이지에서의 마우스 위치event.clientX, event.clientY → 현재 뷰포트(보이는 화면) 기준의 마우스 위치2. 특정 요소(가상의 문서) 내에서 마우스 좌표값 얻기예를 들어, 가상의 문서 역할을 하는 div.container 내부에서 마우스 위치를 가져오는 방법입니다.$(".container").mousemove(functi.. 2025. 3. 25. jquery 부모페이지에서 아이프레임 특정 클래스에 클래스 추가 및 여러 속성 값 추가 하기 1. 동일한 도메인 아이프레임일 경우 $(document).ready(function () { var iframe = $("#myIframe")[0]; // 아이프레임 요소 가져오기 var iframeDoc = iframe.contentWindow.document; // 아이프레임의 document 객체 가져오기 // 특정 클래스 요소에 여러 개의 속성 추가 $(iframeDoc).find(".target-class").attr({ "data-value": "newData", "title": "Tooltip Text", "aria-label": "Accessible Label", "custom-attr": "customValue" .. 2025. 3. 23. jquery 특정 영역 외부 클릭 시 이벤트 발생 jQuery를 사용하여 특정 영역 외부를 클릭했을 때 이벤트를 발생시키려면 $(document).on("click") 이벤트를 활용합니다. 클릭한 위치가 특정 영역 내부인지 확인하고 그렇지 않으면 원하는 동작을 수행하도록 처리할 수 있습니다. 기본 코드 예제$(document).ready(function () { $(document).on("click", function (event) { // 특정 영역 선택 (예: #targetElement) if (!$(event.target).closest("#targetElement").length) { // 특정 영역 외부를 클릭했을 때 실행될 동작 console.log("특정 영역 외부를 클릭했습니다!"); // 추가 .. 2025. 2. 8. jquery 부모 프레임 특정 class 존재 유무 체크 jQuery를 사용하여 자식 페이지(iframe 내부)에서 부모 프레임(iframe을 포함한 페이지)의 특정 클래스 존재 여부를 확인하려면 다음 단계를 따릅니다. 동일 출처 정책(Same-Origin Policy)을 준수해야 하며 자식과 부모가 동일한 도메인, 프로토콜, 포트에 있어야 가능합니다. 1. 기본 코드 (부모 프레임의 클래스 확인)아래는 부모 페이지의 특정 요소에 특정 클래스가 있는지 확인하는 코드입니다.$(document).ready(function () { // 부모 페이지에서 특정 요소를 선택 var parentHasClass = $(window.parent.document).find("#parentElement").hasClass("targetClass"); if (parentHa.. 2025. 2. 6. jquery 자식 페이지에서 부모 프레임 높이 알기 jQuery를 사용해 자식 페이지(iframe 내부)에서 부모 프레임(iframe을 포함하는 페이지)의 높이를 알아내려면 window.parent 객체를 활용해야 합니다. 하지만 이 작업은 동일 출처 정책(Same-Origin Policy)을 준수해야 합니다. 즉 자식과 부모가 동일한 도메인, 프로토콜, 포트일 때만 가능합니다. 기본 코드// iframe 내부에서 부모 프레임의 높이를 가져오는 코드$(document).ready(function () { var parentHeight = $(window.parent.document).height(); // 부모 페이지 높이 console.log("부모 프레임 높이: " + parentHeight + "px");}); 단계별 설명window.paren.. 2025. 2. 4. jquery 부모 프레임 높이 제어 jQuery를 사용하여 부모 프레임(iframe 또는 div 등)의 높이를 제어하려면 다음과 같은 방법을 사용할 수 있습니다. 부모 요소의 높이를 자식 콘텐츠에 맞게 동적으로 변경하거나 특정 높이로 설정하는 경우 1. 부모 요소 높이를 콘텐츠에 맞게 설정 안녕하세요! 여기는 자식 콘텐츠입니다. 높이를 조절해 보세요! 안녕하세요! 여기는 자식 콘텐츠입니다. 높이를 조절해 보세요! 2. 부모 요소 높이를 특정 값으로 설정// 특정 높이로 설정 (예: 500px)$(document).ready(function () { $("#parent").height(500);}); 3. iframe의 부모 높이 조정만약 iframe 내부에서 부모 프레임(iframe을 포함하는 페이.. 2025. 2. 2. JavaScript의 배열 메서드 pop() jQuery에는 직접적으로 pop() 함수가 존재하지 않지만, JavaScript의 배열 메서드인 pop()을 사용할 수 있습니다. JavaScript의 배열 메서드 pop()은 배열의 마지막 요소를 제거하고 해당 요소를 반환합니다. 이를 jQuery와 함께 사용할 수 있는 예제와 함께 설명하겠습니다. pop()의 기능배열에서 마지막 요소를 제거합니다.제거된 요소를 반환합니다.배열의 길이가 줄어듭니다. 사용 예제 1: 순수 JavaScript에서 pop()let arr = [1, 2, 3, 4];let lastElement = arr.pop(); // 배열의 마지막 요소 제거console.log(lastElement); // 출력: 4console.log(arr); // 출력: [1.. 2024. 12. 11. jquery join()에 대한 설명과 예제 jQuery에서는 데이터 배열을 합치거나 연결하는 기능이 기본적으로 제공되지 않습니다. 그러나 자바스크립트의 Array.prototype.join() 메서드를 활용하여 배열 요소를 특정 구분자로 연결하는 작업을 수행할 수 있습니다. join()은 배열의 모든 요소를 문자열로 결합하는 데 유용하며 이를 jQuery와 함께 사용할 수도 있습니다. join() 메서드의 동작join() 메서드는 배열의 요소를 연결해 하나의 문자열로 반환합니다.선택적 매개변수로 구분자(Separator)를 지정할 수 있습니다.지정된 구분자가 없으면 기본으로 쉼표(,)를 사용합니다. 문법array.join(separator) array: 요소를 결합할 배열separator (선택): 요소를 구분할 문자열. 기본값은 ,. .. 2024. 12. 9. jquery 연관된 필드 자동 업데이트 jQuery를 사용하여 하나의 입력 필드에 값을 입력하면 연관된 다른 필드가 자동으로 업데이트되도록 구현할 수 있습니다. 이를 위해 input 또는 change 이벤트를 활용할 수 있습니다. 예제 1: 입력 필드 값을 다른 필드에 자동 복사 Field 1: Field 2 (Auto-updated): 동작 설명 HTML 구조:#field1: 사용자가 값을 입력하는 필드.#field2: 자동으로 업데이트될 필드(읽기 전용).jQuery 코드:$('#field1').on('input', ...): 사용자가 #field1에 입력하는 즉시 이벤트를 실행합니다.$('#field2').val(v.. 2024. 12. 7. jquery 파일 업로드 시 선택된 파일 이름 표시 jQuery를 사용하여 파일 업로드 시 선택된 파일 이름을 표시하려면 요소의 change 이벤트를 활용하면 됩니다. 아래는 간단한 예제 코드입니다. HTML Choose a file: Selected file: None 동작 설명 HTML 구조: 사용자가 파일을 선택할 수 있는 파일 입력 필드입니다.: 선택된 파일 이름이 표시될 영역입니다.jQuery 코드$('#fileInput').on('change', ...): 파일 선택 필드에서 값이 변경될 때(파일 선택 시) 실행됩니다.$(this).val().split('\\').pop(): 파일 경로에서 파일 이름만 추출합니다. 브라우저마다 경로 형식이 다를 수 있으므로 spl.. 2024. 12. 5. 이전 1 2 3 4 ··· 6 다음
