[Java 풀스택 과정 강의] 1월 16일자

※ TIL와는 별개로 적는 개인 개발 일지라서 말은 좀 편하게하는 페이지입니다.
일지이기 때문에 일기의 성격이 더 강합니다.

 

 

jQuery의 반복. React는 다음주쯤 시작할 듯하다. 이론은 거의 없으니 문법만 정리한다.

 

 

이모저모

.val()

input, select, textarea의 값을 가져온다. $(선택자).val() 처럼 사용한다.

 

 

스크롤 관련

scrollTop()은 현재 세로 스크롤 위치를 픽셀로 반환한다. $(window).scrollTop()과 같이 쓰인다.

 

$(window).scrollTop() + $(window).height()

 

이렇게 사용하면 스크롤이 문서 맨 아래에 위치할 때를 파악할 수 있다.

 

if($(document).height() == $(window).scrollTop() + $(window).height()){ //문서 맨 아래 스크롤이 도달했을 때 출력; }

 

 

scrollLeft()도 있다. 이건 가로 스크롤 위치를 픽셀로 반환한다. $(window).scrollLeft()처럼 쓰인다.

 

 

.each(function(index,element){…});

$선택자.each(function(index,element){…}); 처럼 사용한다. 콜백 메서드다. index와 element를 전달 가능하다. element는 DOM 요소 자체를 반환한다.

 

 

이벤트 방지

이 경우 이런 식으로 쓰인다. $(선택자).on('(메서드 방식)', function(e){ … }); 여기서 e는 on 메서드의 대상이 된 것을 의미한다. e가 아니어도 되고, event로도 자주 사용된다.

 

e.preventDefault()

현재 이벤트의 기본동작을 중지한다. 브라우저에서 지원하는, form에서 엔터를 누르면 submit이 된다든가, a를 누르면 window.location이 일어난다든가를 중지시킨다.

 

 

e.stopPropagation()

상위 element로 이벤트가 전파되는 걸 중지한다. 참고로 jQuery에서는 return false를 통해 e.preventDefault()와 같이 사용이 가능하다.

 

버블링

이벤트가 자식 → 부모로 넘어가는 것이다. 캡쳐링과는 반대라고 할 수 있다. 이벤트를 하나하나 지정해주지 않는 것은 좋은 일이지만, 하위요소에서 일어나는 일이 상위까지 영향을 끼치는 건 불필요한 경우가 많다. 따라서 버블링 방지를 위해서 e.stopPropagation()을 사용한다.

 

 

e.stopImmediatePropagation()

현재 이벤트의 다른 리스너 중지 및 상위 전파 중지.

 

 

내부 DOM 조작

메서드	설명
text()	내부 글자 수정 가능. text('내부 글자') 이런 식으로 사용. 자동으로 이스케이프 된다.
html()	내부 html 수정 가능. html('html 코드') 이런 식으로 사용. 자동으로 이스케이프 되지 않는다.
$(선택자).append(A)	선택자의 내부 요소들 맨 뒤에 A를 삽입
$(선택자).prepend(A)	선택자의 내부 요소들 맨 앞에 A를 삽입
$(A).appendTo(선택자)	A를 선택자의 내부 요소들 맨 뒤에 삽입
$(A).prependTo(선택자)	A를 선택자의 내부 요소들 맨 앞에 삽입
$(선택자).before(A)	선택자 앞에 A 삽입
$(선택자).after(A)	선택자 뒤에 A 삽입
$(A).insertBefore(선택자)	A를 선택자 앞에 삽입
$(A).insertAfter(선택자)	A를 선택자 뒤에 삽입
$(선택자).remove()	해당 요소 제거
$(선택자).empty()	해당 요소의 모든 자식 노드를 제거

 

 

.attr()

내부 attribute를 가져오거나 수정한다. .attr('수정하려는 어트리뷰트', '내용')처럼 수정이 가능하기도 하고. .attr('가져오려논 어트리뷰트')처럼 값을 가져올 수도 있다. 이것도 css처럼 다중으로 가능하므로, key와 value의 객체로 표현이 가능하다.

 

 

Class 조작

대상의 class를 추가하거나 제거할 수 있다.

메서드	설명
addClass('클래스명')	해당 class를 추가한다. '클래스명A 클래스명B'처럼 복수 추가가 가능하다.
removeClass('클래스명')	해당 class를 제거한다. '클래스명A 클래스명B'처럼 복수 제거가 가능하다.
toggleClass('클래스명')	해당 클래스명이 있을 경우 제거, 아닐 경우 추가한다.

 

 

 

Effect & Animate

Effect

기본적으로 제공하는 시각효과다. 이펙트명(속도,애니메이션 진행,callback) 처럼 사용한다.

속도(duration)에는 fast, normal, slow또한 적을 수 있다. 보통의 경우 3000같은 밀리초를 사용한다.

애니메이션 진행(easing)은 linear, swing 등이 있다. 느렸다가 빨라지기, 일정 등속으로, 빨라졌다가 느려지기 등을 표현한다.

callback()은 function 처리이다. 애니메이션 완료 후 함수를 실행한다.

 

참고로 이 중 fadeTo를 제외하고는 css 요소인 display에게 영향을 주고 받는다. 

종류	이름	설명
basic	hide()	요소 숨기기
	show()	요소 표시
	toggle()	요소가 숨겨져 있다면 표시, 아니라면 숨김
slide	slideDown()	요소를 슬라이딩 효과로 나타나게 한다 (↓)
	slideUp()	요소를 슬라이딩 효과로 사라지게 한다 (↑)
	slideToggle()	슬라이드 효과로 나타나게 하거나 사라지게 한다.
fade (잘 안 쓰임)	fadeIn()	서서히 나타나게 한다.
	fadeOut()	서서히 사라지게 한다.
	fadeToggle()	서서히 나타나다 사라지게 한다.
	fadeTo	투명도(opactiy)를 조절한다. 혼자만 두번째 인수가 추가되어 opacity 조절을 받는다. (0~1 사이의 소수점)

 

 

Animate

animate()처럼 사용한다. effect와 비슷하게 $(선택자).animate({style 속성: 값}, 속도, 애니메이션 진행, callback) 형태로 이루어져있다. animate를 사용할 경우 기본 스타일 속성에서 새로이 적은 스타일 속성 형태로 부드럽게 transition 된다. style 속성: 값은 key: value 형태의 객체로 되어있으며, 컴마(,)를 통해 여러가지 설정이 추가될 수 있다.

 

 

animate로 조작이 불가능한 것들

가상요소(:before, :after), transform, display, 미디어 쿼리, color, background-color의 경우 animate로 조작이 불가능하다.