사용자 도구

사이트 도구


language:jquery:jquery_참고

~~Title:jQuery 재참고~~

jQuery를 다시 써야할때 필요한 것을 메모해둔다.

jQuery 무엇인가?

이런게 되는구나 개념만 이해하고,

  • jQuery는 css의 { id, class } 또는 html 태그(엘리먼트)를 선택할 수 있다.
  • 선택된 요소엘리먼트를 조작 또는 변경할 수 있다.
  • 마우스의 클릭과 같은 이벤트 발생시, html과 css상의 엘리먼트를 조작할 수 있다.

첫번째 jQuery

$(document).ready(function() {
  $('.poem-stanza').addClass('emphasized');
})
  • jQuery에서 엘리먼트를 선택하는 것은 $() , 괄호 안에 선택할 엘리먼트를 적는다.
    • document (html 문서 전체) 엘리먼트DOM객체를 선택해서
    • 해당 엘리먼트에서 사용할 수 있는 javascript 함수를 사용한다.
  • document DOM 객체에서 사용할 수 있는 (내가 이해하는 것으로는) ready()함수에서
  • '.poem-stanza' css 요소를 찾아서 'emphasized' 클래스 요소를 동적으로 갖다 붙인다.

정리하면

  • $() : 엘리먼트DOM 객체를 선택하는 키워드. 이것으로부터 모든 것이 시작된다.
  • 해당 엘리먼트에서 사용할 수 있는 javascript 요소로 동적으로 컨트롤이 가능해진다.

링크

.animate()

오브젝트에 움직임을 부여할때 사용하는 것으로,
css 속성자Property의 값Value의 값이 시간을 두고 변화 되는 것을 볼 수 있다.

간단한 예시로, animate()에 대해서 정리.

  • 아래 그림처럼 작은 박스가 있고
  • 클릭 A를 누르면 박스가 랜덤한 위치로 이동

샘플 페이지 작성

일단 박스를 선언.

  • 한 파일에 모아두기.
    stylesample_box 이전에 스크립트 태그를 써서 선언해서 쓰자.
    (샘플이니까)
<body>
  <style>
    #sample_box {
      left: 50px;
      top: 50px;
      width: 100px;
      height: 100px;
      position: fixed;
      background: #0d77b6;
    }
  </style>
 
  <div id=sample_box></div>
 
  <div id='btn_a'>클릭 A</div>
  <div id='btn_reset'>리셋</div>
</body>

애니메이션 스크립트 추가

</html> 이후에 <script>를 추가했다.

btn_a를 눌렀을때 box_move() 함수를 호출한다.

$('#btn_a').click(function () {
  box_move();
});

box_move() 함수를 작성

function box_move() {
  // 'sample_box' 오브젝트(사용할)를 미리 찾아둔다.
  var _box = $('#sample_box');
 
  // 기본 위치와 현재 화면의 width,height를 얻는다.
  var _pos = _box.position();
  var _doc_root = $(document);
  var _doc_w = _doc_root.width();
  var _doc_h = _doc_root.height();
 
  //_new_x, _new_y를 랜덤하게 골라둔다.
  var _new_x = get_rand_int(0, _doc_w);
  var _new_y = get_rand_int(0, _doc_h);
  // 'get_rand_int' 는 아래쪽에 코드를 정리했다.
 
  if (_pos.left == 50) {
 
    // left: 50px;top: 50px; <- 이부분에 변경이 가해진다.
    _box.animate(
      { left: _new_x + "px", 
        top: _new_y + "px" }, 
      200, 
      "easeOutBack");
 
  }
}

animate()

animate()

(html 오브젝트).animate(파라미터들)

형식을 사용한다.

(html 오브젝트) 는 jQuery 를 사용해서 사용할 오브젝트를 찾는다.

파라미터들은 기본만 쓰거나 좀 더 많은 옵션을 넣을 수 있게 되어 있다.

1번 형식

.animate( properties [, duration ] [, easing ] [, complete ] ) 
  • 프로퍼티Properties : 오브젝트에서 어떤 프로퍼티Property에 애니메이션을 적용할지 적는다.
    • 필수 파라미터.
  • (Number or String) Duration : 애니메이션 지속 시간
    • 빼도 됨. 그럴 경우 기본값 : 400. 밀리세컨.
  • (String) Easing : 애니메이션 이징Easing 타입
    • 빼도 됨. 그럴 경우 기본값 : swing
  • (function) 완료시 호출할 함수로 구성한다.
    • 빼도 됨. 그럴 경우 아무것도 안함. 기본 값: function() {}

프로퍼티 properties

properties 프로퍼티 설정은 json 형태로 여러 프로퍼티를 한번에 설정할 수 있다.

_box.animate( { left: _new_x + "px", top: _new_y + "px" }, ... );

{ 프로퍼티 : 값, 프로퍼트 : 값 } 형태로 값을 넣는다.

Duration

밀리세컨 단위의 숫자를 적는다. 기본값은 400.(ms)

Easing

  • 스트링형식으로 적어 보내야 하며,
  • jQueryUI 를 포함시켜야 한다. 이징 파라미터가 jQueryUI 에 있음

사용 가능한 이징(Easing), 쓸 수 있는 이징 목록 볼 수 있음

  • linear , swing , default
  • easeInQuad, easeOutQuad, easeInOutQuad
  • easeInCubic, easeOutCubic, easeInOutCubic
  • easeInQuart, easeOutQuart, easeInOutQuart
  • easeInQuint, easeOutQuint, easeInOutQuint
  • easeInExpo, easeOutExpo, easeInOutExpo
  • easeInSine, easeOutSine, easeInOutSine
  • easeInCirc, easeOutCirc, easeInOutCirc
  • easeInElastic, easeOutElastic, easeInOutElastic
  • easeInBack, easeOutBack, easeInOutBack
  • easeInBounce, easeOutBounce, easeInOutBounce

Complete 함수

function() {}

형식으로 작성해서 넣으면 될 것 같다.

_box 애니메이션이 끝나면 팝업이 뜨도록 complete 콜백을 추가

_box.animate(
  { left: _new_x + "px", top: _new_y + "px" },
  200,
  "easeOutBack",
  function() {alert('');} );

2번 형식

.animate( properties, options )

options에 map 형식으로 값을 넣는다. 아래 같은 파라미터를 넣을 수 있다. (링크) 안써봐서 모르겠다. 정리만 해둔다.

  • duration : 움직일시간
  • easing : 사용할 움직일 이징
  • queue : (?)
  • specialEasing : (?)
  • step : 움직임이 설정된 모든 오브젝트에 대해서 호출 된다고 한다.
  • (Function( Promise animation, Number progress, Number remainingMs))
    progress : 진행상태 중에 호출되는 함수.
  • (Function())
    complete : 완료시 호출할 함수
  • (Function( Promise animation ))
    start : 애니메이션 시작시 호출할 함수
  • (Function( Promise animation, Boolean jumpedToEnd ))
    done : Promise 설정에서 완료시 호출할 함수
  • (Function( Promise animation, Boolean jumpedToEnd ))
    fail : Promise 설정에서 실패시 호출할 함수(?)
  • (Function( Promise animation, Boolean jumpedToEnd ))
    always(?)

그외

get_rand_int()

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random
function get_rand_int(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //최댓값은 제외, 최솟값은 포함
}

샘플 코드 전체

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>CSS Animate TEST</title>
 
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="./lib/jquery-ui-1.12.1/jquery-ui.js"></script> <!-- 다운받아서 쓰자 -->
</head>
<!-- 문서 시작 ------------------------------- -->
 
<body>
 
  <style>
    #sample_box {
      left: 50px;
      top: 50px;
      width: 100px;
      height: 100px;
      position: fixed;
      background: #0d77b6;
    }
  </style>
 
  <div id=sample_box>
  </div>
  <div id='btn_a'>클릭 A</div>
  <div id='btn_reset'>리셋</div>
 
</body>
<!-- 종료 ------------------------------- -->
 
</html>
 
<script>
  $('#btn_a').click(function () {
    box_move();
  });
  $('#btn_reset').click(function () {
    box_reset();
  });
 
  // 박스 이동
  function box_move() {
    var _box = $('#sample_box');
    var _pos = _box.position();
    var _doc_root = $(document);
    var _doc_w = _doc_root.width();
    var _doc_h = _doc_root.height();
 
    var _new_x = get_rand_int(0, _doc_w);
    var _new_y = get_rand_int(0, _doc_h);
 
    if (_pos.left == 50) {
      //_h3_a.show(); _h3_b.hide();
      _box.animate({ left: _new_x + "px", top: _new_y + "px" }, 200, "easeOutBack");
    }
    else { // 작아지는 경우
    }
  }
 
  // 박스 리셋
  function box_reset() {
    var _box = $('#sample_box');
    var _pos = _box.position();
    _box.animate({ left: "50px", top: "50px" }, 200, "easeOutBack");
  }
 
  // https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random
  function get_rand_int(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min; //최댓값은 제외, 최솟값은 포함
  }
</script>
language/jquery/jquery_참고.txt · 마지막으로 수정됨: 2024/04/23 22:44 저자 127.0.0.1