Dev log - 28, jQuery #4

제이쿼리 활용 기법

이메일 폼 형식

• .click과 if 구문을 통해, 버튼을 누른 후의 버튼의 텍스트를 변경할 수 있음

• .each 구문을 통해

$(function() {
  let pHtml = $('p').html();
  $('button').click(function() {
    let btnNum = $(this);
    if ( btnNum.html() == '확인' ) {
      let inputVal = $('input').val();

      $('p').text(`${inputVal}로 전송이 됩니다. 전송을 원하시면 전송 버튼을 눌러주세요.`)
      btnNum.text('전송');

    } else if ( btnNum.text() == 'reset' ) {
      if ( $('.btn01').text() == '전송' ) {
        $('.btn01').text('확인');
        $('p').html(pHtml);
      }
      
    } else if ( btnNum.text() == '전송' ) {
      alert('전송이 완료 되었습니다.')
    }
  });
});

scroll 반응형 페이지

• HTML 문서에 원하는 값으로 지칭을 하고 싶을 때는, <태그 data-이름="값"> 형식으로 지정, 속성이 바로 적용되는 것은 아님 (자바스크립트로 적용 필요)

• 제이쿼리 .offset() 속성을 사용해서 좌표값을 얻을 수 있음

• $(this) 는 현재 본인이 가장 가깝게 속해있는 함수를 지칭

• 스크롤을 내리면서 현재 페이지를 확인하는 속성은 다음과 같이 활용

$(window).scroll(function() {
	$('구간 클래스').each(function() {
		$(this).offset().top <= $(this).scrollTop(); && scTop < $(this).offset().top + $(this).height()
	});
});

• CSS 클래스 추가로 애니메이션 추가 가능
  

animate

• let 선언이나 transtion 속성 필요 없이 부드러운 애니메이션을 구현하는 방법

• $('태그').animate(변화된 값, duration, easing, complete); 활용

  1) 첫번째 인자: 변화된 값
  2) 두번째 인자(duration): 경과(지속) 시간(1/1000 초) = number
  3) 세번째 인자(easing): 변화 곡선 = string,
  4) 네번째 인자(complete): 애니메이션이 종료된 시점에서 실행되는 함수 = function() {}

• .animate 속성 설정

    $('태그:animated').stop(); // 적용 시, 누를 때 마다 중단하고 애니메이션 실행
    
    $('태그').animate({
      left: '+=250px', // '+=' 적용 시, 복합 대입연산 적용(누적 계산)
      opacity: '0.5',
      height: '150px',
      width: 'toggle' // 'toggle' 적용 시, (display: none, 0) on-off 기능 적용
    }, 'slow') // `slow` 적용 시, 0.6초 (default : 0.4초 / fast : 0.2초)
    
     $('태그').animate({})
     // 똑같은 태그에 다른 animate 적용 시, 앞의 애니메이션 실행 후, 다음 애니메이션 실행

• .animate 재귀함수 사용, 본인의 함수명을 넣으면 됨

    function aniBox() {
      $('.box').animate({
        height: '+=10px',
        width: '+=10px'
      }, 1000, 'swing', aniBox);
    }
    aniBox();

• .animate 속성은 객체 타입으로도 작성 가능, 더 많은 속성은
  (참고 사이트 : https://api.jquery.com/animate/)

    $(this).animate({
      Counter: $(this).text()}, 
    {
      duration: 4000,
      easing: 'swing',
      complete: function() {}
    });

count

• .prop('속성명','값') 속성을 이용하여, setAttribute 속성과 같은 결과를 나타낼 수 있음

• step 은 중간 단계에서 실행되는 속성, now 속성을 사용하여 현재 값을 대입할 수 있음

$(function() {
  let boxNum = $('.flex-box .count');
  boxNum.each(function() {
    $(this).prop('Counter', 0).animate({Counter: $(this).text()}, {
      duration: 2000,
      easing: 'swing',
      step: function(now) {
        $(this).text(Math.ceil(now));
      },
      complete: function() {
        $('body').css('background-color',"blueviolet")
      }
    });
  });
});