문서의 이전 판입니다!

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의 값이 시간을 두고 변화 되는 것을 볼 수 있다.

간단한 예시로, 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>를 추가했다.

샘플 코드 전체

<!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 긴스 위키

목차

jQuery 문서 목록

jQuery 무엇인가?

첫번째 jQuery

정리하면

링크

.animate()

샘플 코드 전체