Frontend/jquery 4

element 비활성화 (readonly, disabled, pointer-events)

1. readonly 태그의 속성 $("#targetInput").prop("readonly", ture); 2. disabled 태그의 속성 기본적으로 inputbox의 css가 회색으로 변함 form을 제출할 때 disabled속성을 가진 태그 값은 전송되지 않는다 $("#targetInput").prop("disabled", ture); 3. pointer-events 태그가 아닌 요소의 mouse이벤트를 막을 때 사용. $("#divId").css("pointer-events", "auto"); $("#divId").css("pointer-events", "none"); 테스트 코드 See the Pen Untitled by shumm-ni (@shumm-ni) on CodePen.

Frontend/jquery 2022.10.10

slideToggle/ slideUp/ slideDown

jQuery에서의 슬라이드(slide) 효과는 해당 요소의 CSS height 속성값을 빠르게 변경하여 표현. target 요소가 스르륵 접히고 펼쳐지는 효과를 구현할 수 있다!! 파라미터 : .slideToggle( [움직임 시간(duration)] [, 늦춤 함수(easing)] [, 움직이고 나서 실행할 함수(callback)] ) 기본은 400 (0.4초)이다. 숫자 대신 “slow”(600), “fast”(200) 등의 예약어도 사용가능 $("#elementId").slideUp(500); // id가 "elementId"인 요소를 0.5초 동안 올라가면서 사라지게 한다. slideUp() : 요소를 사라지게함. slideDown(): 요소를 나타냄. slideToggle(): 현제 요소의 상태..

Frontend/jquery 2022.03.08

jquery event 중복 발생 방지/ event 해제

Event Bubbling jQuery 이벤트가 여러 번 실행되는 경우. target 요소의 부모 태그들도 이벤트에 반응함. 1.stopPropagation() / preventDefault() 가장 일반적인 이벤트 버블링을 방지하기 위한 방법!! e.stopPropagation() 현재 이벤트가 부모에게 전파되는 것을 방지 e.preventDefault() 현재 이벤트 기본 동작 중지 *기본 동작: a태그의 페이지 이동, submit 태그 form 안에 있는 input 등을 전송 $("#elementId").on('click', function(e) { e.stopPropagation(); e.preventDefault(); }); 2. stopImmediatepropagation() 1번의 두가지를 ..

Frontend/jquery 2022.03.08