목록Front-End (웹)/jQuery (15)
EverGiver
요소의 위치 및 크기 관련 속성 부모 좌표 노드 구하기 - 부모 좌표 노드란 특정 노드의 기준 좌표가 되는 노드를 의미 $대상.offsetParent() 지역(부모 노드 기준) 좌표 위치 다루기 1. 지역 위치 구하기 $대상.position().left $대상.position().top 2. 지역 위치 설정하기 - 부모 좌표 노드를 기준으로 요소의 위치 설정을 위한 전용 메서드는 없으며 일반 스타일 설정을 위해 사용하는 css() 메서드를 사용한다. $대상.css("left 또는 top", 값) $대상.css({ left:값, top:값 }) 전역 좌표 위치 다루기 - 전역 좌표란 최상위 노드인 문서의 left:0, top:0 위치를 시작점으로 하는 위치 값을 의미한다. 1. 전역 위치 값 구하기 -..
기본 애니메이션 효과 나타나고 사라지는 효과 - 태그를 숨겼다가 보였다 하는 메소드 - show()는 보이고, hide()는 사라진다. - hide() 메서드는 스타일 속성 중 width와 height 그리고 opactiy 값을 이용해 요소의 크기를 부드럽게, 작게 만듬과 동시에 투명하게 만들어 화면에서 보이지 않게 만드는 기능을 구현하는 메서드이다. (애니메이션이 끝난 후 display 속성 값을 none으로 만들어 주면 화면에서 보이지 않을 뿐 대상 요소가 삭제되거나 하진 않습니다.) - show() 메서드는 hide() 메서드의 반대로 숨겨져 있던 대상 요소의 크기와 투명도 값을 부드럽게 원래대로 만들어 준다. (애니메이션이 끝난 후 display 속성값 역시 원래 값으로 복원시켜 준다.) - to..
이벤트란? 이벤트란 일종의 알림 기능이다. 사용자가 마우스를 클릭하거나 키보드 키를 입력하면 브라우저는 입력정보를 이벤트에 담아 개발자에게 알려준다. 이벤트 종류 크게 네 가지 종류로 분류할 수 있다. 마우스 이벤트 키보드 이벤트 태그요소 고유 이벤트 사용자 정의 이벤트 핵심 내용 일반 이벤트 등록 $대상.on("이벤트이름", 이벤트리스너) 단축 이벤트 등록 $대상.단축이벤트(이벤트리스너) - 단축 이벤트 목록 ▷ click : 클릭했을 경우 ▷ mouseup : 마우스에서 손가락을 땐 순간 ▷ mousedown : 마우스를 누르는 순간 ▷ mouseover : 마우스를 올렸을 때 ▷ mouseout : 마우스가 빠져나갔을 때 ▷ focus : 커서가 이동했을 때 ▷ blur : 커서가 빠져나갔을 때..
스타일 다루기 스타일 값 구하기 $대상.css("스타일 속성이름") $대상.css(["스타일 속성이름","스타일 속성이름",...]) 스타일 값 설정하기 $대상.css("속성이름", "값") $대상.css({ 속성이름:값 속성이름:값 }) 클래스 추가 $대상.addClass("클래스 이릅1 [클래스 이름2 ...]") 클래스 삭제 $대상.removeClass()// 모든 클래스 삭제 $대상.removeClass("클래스 이름1 [클래스 이름2 ...]") cf) ▷ css (width, height, background...) - $('p').css('width', 300) : width를 변경 - $('p').width(300) : width를 변경 - $('p').css('width') : wi..
산술연산자 문자 결합 연산자 문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터 숫자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터 숫자형 데이터 + 숫자형 데이터 = 하나의 숫자형 데이터 대입 연산자 연산된 데이터를 최종적으로 다시 원래의 변수에다가 치환 증감 연산자
변수 데이터를 저장할 수 있는 메모리 공간 (한 개의 데이터만 저장이 가능하고, 새로운 데이터가 들어가면 이전 데이터는 삭제된다) 변수 이름 지정 시 주의사항 띄어쓰기는 하지 않는다. 한글은 되도록 쓰지 않는다. 영어는 대소문자를 구분한다. 특수기호는 _ $만 사용 가능하다. 첫 글자는 숫자를 사용하지 않는다. 약속어를 사용하지 않는다. (document, window, name...) 변수 이름에 의미를 정확히 부여한다. 데이터 유형 문자형 데이터 - String 숫자형 데이터 - Number 논리형 데이터 - Boolean 비워진 데이터 - null, undefined cf) typeof : 데이터 유형을 체크하는 명령어 지역변수와 전역변수