[jQuery] .is() ✅ .is() 문법$(selector).is(selectorOrFunction) selectorOrFunction: CSS 선택자, DOM 요소, jQuery 객체, 또는 함수반환값: true 또는 false 📌 .is() 예$('.box').each(function() { if ($(this).is('.box')) { console.log('이 요소는 box 클래스입니다.'); }}); .is('.box'): 자신이 .box 클래스인지 확인 Front/JS & jQuery 2025.07.08
[jQuery] .has() jQuery의 .has()는 선택된 요소 집합 중에서 특정 자식을 포함하는 요소만 필터링하는 메서드입니다.📌 문법$(selector).has(selectorOrElement) selectorOrElement: 특정 자식 요소(selector) 또는 DOM 요소를 의미합니다.반환값: 해당 자식 요소를 포함하고 있는 상위 요소만 반환하는 새로운 jQuery 객체입니다.✅ 예제 1: 특정 자식 요소를 가진 부모 필터링 Apple Banana Cherry $('li').has('span').css('color', 'red');📌 결과: 요소 중 을 자식으로 가지고 있는 요소만 빨간색으로 바뀜즉, 2번째와 3번째 만 선택됨 ✅ 예제 2: 특정 DOM 요소가 자식으로 있는지 확인$('#parent1, #p.. Front/JS & jQuery 2025.07.07
[js] hide() / remove() hide()는 화면에서만 숨기고 DOM에는 그대로 남아 있는 반면,remove()는 DOM 자체에서 요소를 완전히 제거합니다.메서드 설명hide()요소를 display: none으로 만들어 화면에서 숨김. DOM에는 존재.remove()요소를 DOM 트리에서 완전히 제거. 이후 .find()로도 못 찾음.detach()DOM에서 제거하지만, 이벤트 핸들러/데이터는 유지. 나중에 다시 붙일 수 있음. ✅ 언제 remove를 쓸까?폼에서 아예 해당 항목이 필요 없을 때성능상 필요 없는 노드를 줄이고 싶을 때사용자에게 혼란을 줄 수 있는 비활성화 필드 자체를 안 보여줄 때필요에 따라 hide() vs remove() 선택하시면 됩니다.remove()를 사용하면 이후 해당 요소는 다시 show()로 복구할 수.. Front/JS & jQuery 2025.07.05
[js] 중복 클릭 방지 처리 - 플래그 변수 사용 let isSubmitting = false;$('#submitBtn').on('click', async function() { if (isSubmitting) return; isSubmitting = true; try { await submitOpinion(); // 예: 의견 등록 API 호출 alert('의견이 등록되었습니다.'); } catch (e) { alert('오류 발생'); } finally { isSubmitting = false; }}); Front/JS & jQuery 2025.07.02
[js] 중복 클릭 방지 처리 - 버튼비활성화 방법 $('#submitBtn').on('click', async function() { const $btn = $(this); if ($btn.prop('disabled')) return; // 이미 눌렸다면 무시 $btn.prop('disabled', true); // 버튼 비활성화 try { // 등록 로직 await submitOpinion(); // 예: 의견 등록 API 호출 alert('의견이 등록되었습니다.'); } catch (e) { console.error(e); alert('등록 중 오류가 발생했습니다.'); } finally { $btn.prop('disabled', fal.. Front/JS & jQuery 2025.07.01
[js] $.extend(a, b)와 $.extend({}, a, b)의 차이 ✅ 기본적인 차이$.extend(a, b):첫 번째 인자(a)에 두 번째 인자(b)의 내용을 덮어씁니다.첫 번째 인자가 원본 객체이므로, 원본 객체가 변경됩니다.$.extend({}, a, b):첫 번째 인자에 빈 객체 {}를 전달하고, **a와 b**를 병합합니다.원본 객체(a)는 변경되지 않고, 새 객체가 생성되어 병합된 결과를 반환합니다.✅ 상세 비교1. $.extend(a, b)동작: 첫 번째 인자에 두 번째 인자의 속성을 덮어씁니다.결과: 원본 객체(a)가 변경됩니다.jslet a = { others: "기타사항" };let b = { others: null, memo: "메모" };$.extend(a, b); // a에 b의 값을 덮어씀console.log(a.others); // null (.. Front/JS & jQuery 2025.06.26
[js] $.extend() null일 경우 덮어쓰지 않게 커스터마이징 $.extend({ deepMerge: function(target, source) { for (let key in source) { if (source[key] !== null) { // null일 경우 덮어쓰지 않음 target[key] = source[key]; } } return target; }}); let a = { others: "기타사항" };let b = { others: null };let result = $.extend.deepMerge({}, a, b);console.log(result.others); // "기타사항" (b.others가 null이므로 덮어쓰지 않음) Front/JS & jQuery 2025.06.25
[js] 병합 시 특정 값만 유지하고 싶다면? const merged = { ...ldDetail.result, ...mtrmLead, others: mtrmLead.others ?? ldDetail.result.others // 우선순위 직접 지정}; Front/JS & jQuery 2025.06.24
[js] $.extend 사용시 주의점 $.extend(obj1, obj2)는 얕은 복사(shallow copy) 방식으로,obj2의 속성이 obj1과 겹치면 → obj1의 값을 덮어씁니다.👇 예시로 쉽게 설명let a = { others: "회의실 비고 있음", ldCd: "LD123" };let b = { others: null, ldCd: "LD456" };let merged = $.extend({}, a, b); // 또는 $.extend(a, b);console.log(merged.others); // ❌ null 덮이지 않을 객체를 나중에 작성해야한다. Front/JS & jQuery 2025.06.23
[js] cancelAnimationFrame() ✅ cancelAnimationFrame()으로 취소하는 방법📌 기본 사용법js const id = requestAnimationFrame(myCallback);// 필요 시 취소cancelAnimationFrame(id); 🧪 예시: 클릭하면 애니메이션 중단jslet animationId;function animate(timestamp) { // 애니메이션 처리 console.log("Animating..."); animationId = requestAnimationFrame(animate);}// 시작animationId = requestAnimationFrame(animate);// 3초 뒤 중단setTimeout(() => { cancelAnimationFrame(animationId).. Front/JS & jQuery 2025.06.21