'jQuery'에 해당되는 글 3건

■ jQuery 를 이용하여 id, class, name 의 input value 값 가져오기

위와 같은 input tag 가 있다고 가정 하겠습니다. 

이 input tag 에 id, class, name 값을 각각 지정 했습니다. 

버튼을 하나 만들어서 클릭 이벤트 발생 시 getInputValue() 라는 함수가 호출 되도록 했습니다. 

이제 getInputValue() 라는 함수를 정의해야 합니다. 

첫번째 input tag 의 value 값을 가져 오는 방법은 아래와 같이 세가지가 있습니다. 

▶ id 값 기준으로 가져 오기

var valueById = $('#inputId').val();

# 은 아이디를 의미

▶ class 값 기준으로 가져 오기

var valueById = $('.inputClass').val();

. 은 클래스를 의미

▶ name 값 기준으로 가져 오기

var valueById = $('input[name=inputName]').val();

위와 같은 방법으로 id, class, name 별로 값을 가져 올 수 있습니다. 

실제 호출 하는 예제를 보시겠습니다. 

위 코드들을 이용 하면 아래와 같은 결과물을 보실 수 있습니다.

input 에 값을 입력 후 Get Value 버튼을 클릭 하시면 입력된 값이 리턴 되는 것을 확인 할 수 있습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

앞서 jQuery 를 이용한 스크롤 처리에 관해 포스팅 했었는데요. 

이번에는 스크롤에 애니메이션 효과를 추가 해보도록 하겠습니다. 

■ jQuery 를 이용한 스크롤 애니메이션 효과주기

위 이미지와 같이 스크롤 시 애니메이션 효과 주는 방법에 대해 알아 보겠습니다. 

▶ HTML body 부 

height 200px, width 300px 의 div tag 내에 애국가 가사를 입력 했습니다. 당연히 div 범위 내에서 다 표현 할 수 없으므로 스크롤바가 생기게 됩니다. 

이제 이 스크롤바을 앞선 포스팅과 같이 스크롤처리를 할 예정이며 이때 스크롤에 애니메이션 효과를 주겠습니다. 

▶ javascript 함수

animate() 함수를 이용하여 애니메이션 효과를 줄 수 있습니다. 

자세한 내용은 아래 링크 참조 하세요. 

https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

▼ scrollToBottomWithAnimation() 함수

scrollTestDiv 라는 아이디를 가진 요소(여기서는 div tag)를 animate 시킵니다. 

scrollTop 이라는 옵션값을 scrollHeight - clientHeight 값으로 지정 합니다. 

clientHeight 는 요소 내부 padding 값을 포함한 height 값입니다. 

자세한 내용은 아래 링크 참조하세요.

https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

애니메이션 효과를 주는데 delay 시간을 0.5 초로 지정 했습니다. 

▼ scrollToTopWithAnimation() 함수

scrollTop 이라는 옵션값을 0 으로 지정 합니다. 0 이 파싱되면 당연히 최상단으로 이동 되겠죠? ^^

▽▽▽ 결과 화면 (테스트 해보세요) ▽▽▽

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

웹 개발 중 화면상에 스크롤이 생기는 경우가 있습니다. 

그리고 특정 상황에 맞춰 스크롤을 최상단 또는 최하단으로 이동 시켜 줘야 하는 경우가 있습니다. 

이번 포스팅에서는 jQuery 를 이용하여 스크롤 최상단 또는 최하단으로 이동 처리를 하는 방법에 대해 알아 보겠습니다 .

■ jQuery 를 이용하여 스크롤 최하단 or 최상단 이동하기

상기 이미지와 같이 스크롤이 되도록 처리 해보겠습니다.

▶ HTML body 부 

위와 같이 div 안에 애국가 가사를 입력 했습니다. 

div 스타일에 height 와 width 를 지정했는데요.  height 를 200px 만 지정하여 스크롤바가 생기도록 했습니다. 

아래쪽에는 버튼 두개를 만들어 onclick 이벤트 발생 시 scrollToBottom() 함수와 scrollToTop() 함수를 호출 하도록 작성 했습니다. 

▶ javascript 함수

HTML body 부에서 설정한 버튼이 호출 하는 함수들을 작성 했습니다. 

▼ scrollToBottom() 함수

id 값이 scrollTestDiv 인 요소를 찾아 scrollTop() 한 결과 값으로 이동 합니다. 

scrollTop 은 요소의 맨 위에서 보이는 내용까지의 거리를 측정한 값입니다.

만약 스크롤 최상단에 위치한 경우라면 scrollTop() 의 값은 0 입니다. 

참조) https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

여기서는 scrollTop() 인자값으로 지정된 id 값의 scrollHeight 는 요소의 모든 컨텐츠가 스크롤 없이 모두 펼쳐져 한눈에 보여지기 위한 높이를 의미 합니다. 

쉽게 이야기 하자면 위 예제의 div 높이가 200px 로 고정 되어 있지만 만약 고정되지 않고 스크롤이 없는 상태라면 924 px 로 늘어나게 됩니다. scrollHeight 는 바로 924px 이 되는 겁니다.

참조) https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

▼ scrollToTop() 함수

앞서 언급 했듯이 요소의 최상단에 위치 시키면 되므로 scrollTop(0) 을 하면 됩니다. 

▽▽▽ 결과 화면 (테스트 해보세요) ▽▽▽

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D