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 요소로 동적으로 컨트롤이 가능해진다.

링크

api.jquery.com / w3schools jquery / jqueryui.com

.animate()

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

jQuery animate()

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

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

샘플 페이지 작성

일단 박스를 선언.

한 파일에 모아두기.
style을 sample_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>

GINS WIKI 긴스 위키

목차