jQuery
-
display속성 메소드 - fadeIn, fadeOut, fadeTo, fadeTogglejQuery 2020. 12. 26. 22:33
fadeIn : 점점 진하게 변하면서 보여지는 효과 fadeOut : 점점 희미하게 변하면서 사라지는 효과 fadeTo : 설정한 값까지 희미해지는 효과(opacity값으로 투명도 조절) fadeToggle : fadeIn과 fadeOut을 동시에 적용하는 메소드 fadeTo는 사용 방법이 다름 opacity를 명시해주어야함 $('선택자').fadeIn/fadeOut/fadeToggle(speed, easing, callback); $('선택자').fadeTo(speed, opacity, easing, callback); speed : 실행 속도(밀리세컨초) / 숫자 or slow, fast easing : 변경 되는 지점별 속도 / linear, swing 등 기능 callback : 메소드 실행 후 ..
-
display속성 메소드 - show(), hide()jQuery 2020. 12. 26. 21:50
$('선택자').메소드명(); $('선택자').메소드명([speed]); $('선택자').메소드명([speed], [easing], [callback]); speed : 실행 속도(밀리세컨초) / 숫자 or slow, fast easing : 변경 되는 지점별 속도 / linear, swing 등 기능 callback : 메소드 실행 후 실행할 함수 show() & hide() : 문서 객체를 크게 하며 보여주거나 작게 하며 사라지게 함 show()와 hide()로 토글하기 콘솔창으로 이미지의 display속성값을 확인해 보았을 때 inline 이였으므로 inline일때 hide하고 hide하고 나면 display가 none이므로 그때 show를 해주면 한 버튼으로 토글이 가능해짐
-
이벤트 관련 메소드 - trigger()jQuery 2020. 12. 26. 21:07
trigger() method : 특정 이벤트나 기본 이벤트를 강제로 발생시키는 메소드로 사용자 정의 이벤트 발생 시 사용 이벤트 발생 시 인자 값 전달 가능 ex. div박스 2개를 만들어 첫번째 div에 click 이벤트로 클릭 수 만큼 카운트가 늘어나게 하고 두번째 div에서 click시 첫번째 click이벤트 핸들러를 가져오기 결과를 보면 주황색 div를 클릭해도 카운트가 늘어나고 검정색 div를 클릭해도 똑같이 카운트가 늘어남 두번째 div박스에서 첫번째 div의 클릭 이벤트를 trigger했기 때문 하지만 trigger 메소드는 실제 클릭이 일어나는 것이 아닌 click 이벤트 핸들러를 호출하는 것 따라서 아래의 경우 링크로 실제 이동하지 않음 실제 a태그에는 네이버로 이동하는 링크를 연결하고..
-
입력 양식 이벤트jQuery 2020. 12. 26. 20:51
focus() : 요소가 focus를 받을 때 blur() : 요소의 focus가 해제 되었을 때 change() : 요소의 값이 변경 되었을 때 select, checkbox, radio에서 쓰는 change()와는 달리 Input, textarea에서 쓰는 change()는 입력될 때 변화가 바로바로 일어나는걸 의미하는것이 아니라 변화가 생기고 focus를 잃을 때 발생 select() : 텍스트 영역 블럭 잡힌 경우 ex. text type의 input태그에 글자를 입력하고 이벤트가 일어나는지 콘솔창으로 확인해보기 회원가입 이름 아이디 비밀번호 비밀번호확인 이메일 회원가입 폼을 만들어 테스트 이후 콘솔창 확인 (순서) 입력칸 누르고 -> focus 값 입력 후 입력칸 나옴 -> change -> b..
-
키보드 이벤트 - keydown, keypress, keyupjQuery 2020. 12. 26. 20:11
keydown : 키보드가 눌러질 때 keypress : 글자가 입력 될 때 펑션키, 기능키 사용 못함 keyup : 키보드가 떼어질 때 ex. text type의 input태그 안에 글자를 입력하고 이벤트가 일어나는지 확인해보기 "ttoah" 입력 후 콘솔 창 확인 이를 이용해 우리가 웹사이트에서 흔히 봤었던 키보드 관련 동적 이벤트를 만들 수 있다 동적으로 글자 수 세기 textarea에 150자까지 입력 받기 동적으로 아이디 조건 확인 ex. (조건) 1. 첫 글자 반드시 영문 소문자 2. 영문 소문자와 숫자로만 이루어짐 3. 총 4~12자 결과창으로 확인해보면 조건에 불만족할 시, 조건에 만족할 시 span태그에 스타일 적용된 문구가 출력됨 아이디 조건은 정규표현식으로 검사 /^[a-z][a-z\..
-
마우스 이벤트 [mouseover - mouseout] vs [mouseenter - mouseleave]jQuery 2020. 12. 26. 19:16
마우스와 관련된 이벤트 연결 메소드 4가지 mouseover / mouseout mouseenter / mouseleave 각자 두가지 이벤트엔 차이가 있다 mouseover - mouseout : 자식 요소 접근 시에도 이벤트 핸들링 함 mouseenter - mouseleave : 자식 요소 접근 시에도 이벤트 핸들링 하지 않음 상황에 따라 메소드를 선택하여 사용해야한다 예시로 어떤 식으로 이벤트 핸들링이 되는지 살펴보자 1) 부모와 자식의 이벤트 핸들러 관계를 보기 위해 div박스 형성 후 스타일 적용 - 부모 : orange - 자식 : red 2) 마우스 over-out시 또는 enter-leave시 눈으로 결과 확인 가능하도록 텍스트 출력 첫번째 박스 -> over - out 두번째 박스 ->..
-
이벤트jQuery 2020. 12. 26. 18:53
이벤트 관련 속성 1. 이벤트 핸들러의 매개변수로 event 객체를 전달함 2. 인라인 방식으로 이벤트 설정 시 매개변수 키워드는 event로 고정 실행확인 기본적으로 콘솔창으로 event와 event의 타겟 확인 이벤트 연결 종류 요소 객체에 이벤트 발생 시 연결 될 이벤트 핸들러를 지정하는 메소드 : on(), off() $('선택자').bind() : 현재 존재하는 문서 객체만 이벤트 연결 $('선택자').unbind() : bind()로 연결 된 이벤트 제거 bind(), unbind() 메소드는 jquery-3부터 deprecated로 설정 되어 대신 on(), off() 메소드를 사용함 $('선택자').on("이벤트명", "이벤트 핸들러") : bind() 대신에 on()으로 대체됨 $('선택..