(ES5) - 14. jQuerySUNGMIN SHIN42 Minutes2017년 10월 10일

[ 열혈강의 No More Copy & Paste 자바스크립트 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=6983102)

14 Jquery

14.1 jQuery 기본

---

jQuery 특성

jQuery 라이브러리는 jQuery라는 이름의 객체로 생성
배열은 jQuery 라이브러리를 사용하는데 가장 중요한 것으로 HTML요소나 데이터를 담는데 사용됩니다. 그리고 두 가지 명령어 묶음이 존재하는 데 하나는 배열 내부에 있는 요소나 데이터를 사용하는 명령이고 다른 하나는 배열의 참조 없이 자체 수행하는 명령입니다.
그리고 객체의 재 사용성을 높이기 위해 대부분의 명령은 return this라는 체계를 가지고 있는데, 이는 데이터를 얻기 위한 명령어 외의 대 부분에 적용되어 있습니다 그러므로 반환된 객체에 다시 새로운 명령을 내릴 수 있습니다. 이러한 용법을 메서드 체인이라고 부르기도 합니다.

[ jQuery의 대표적 특징 ]

• CSS 선택자
  HTML 문서 구조를 명료하면서도 읽기 쉬운 형태로 표현하고 사용할 수 있습니다.
• 플러그인 아키텍쳐
  중복되는 기능과 코드가 엉키는 등의 Feature Creep(기본 기능 외에 새로운 기능을 계속 추가하는 것을 말 함)을 피하고 창의 적인 산출물을 공유할 수 있으며 이미 개발된 많은 플러그인을 쉽고 빠르게 이용할 수 있습니다.
• 메서드 체인
  여러 개의 동작(기능)을 한 줄에 나열하여 임시 변수의 사용을 최소화하여 불필요한 코드의 반복을 피할 수 있습니다.
• 크로스 브라우징
  브라우저마다 달리 방생하는 이벤트, 객체등을 처리하고자 여러 개의 메서드 또는 여러 번의 분기를 사용하지 않고 jQuery에서 제공하는 메서드 또는 문장으로 간단히 해결할 수 있습니다.

[ 위키피디아에서 정의하는 jQuery의 대표적 특징 ]

• DOM엘리먼트 선택
• DOM 탐색 및 수정
• 이벤트
• CSS 조작
• 특수 효과와 애니메이션
• Ajax
• 확장성
• 유틸리티(브라우저 버전, each 메서드)
• JS 플러그인

jquery의 구조와 코어

jQuery.holdReady(boolean)

jQuery.holdReady는 인자를 true로 지정하면 jQuery의 ready이벤트를 잠시 실행되지 않도록 붙잡아 둡니다. 그리고 인자가 false로 지정되면 실행 됩니다.

// ready 이벤트 중단
$.holdReady(true);
// getScript 메서드가 실행되면 ready 이벤트가 실행되도록 설정
$.getScript('myplugin.js', function(){
  $.holdReady(false);
});

jQuery(selector, [,context])

가장 기본이 되는 jQuery 객체를 생성하는 메서드로 jQuery객체는 이미 존재하고 있지만 여기서 이야기하는 jQuery 객체는 모체가 되는 jQuery의 정의 객체를 상속받아 엘리먼트나 어떤 데이터 등을 담아 둔 jQuery의 인스턴스 객체를 이야기 합니다.

$("<div>", {
  id: "ele",
  click: function(e) {
    alert('hello');
  },
  css: {
    width: "200px",
    height: "50px",
    backgroundColor: "skyblue",
    border: "1px solid royalblue"
  },
}).appendTo("body");

참고: 아름답게 jQuery 엘리먼트 생성하기 (https://mytory.net/archives/829)

jQuery.noConflict()

jQuery 객체를 대변하는 변수 $ 문자를 다른 라이브러리와 함께 사용할 때 다른 라이브러리에서 $ 변수를 사용할 수 있도록 jQuery가 사용하지 않도록 설정합니다.

$.noConflict();
// 이제부터 $문자를 사용하는 다른 라이브러리의 코드를 사용할 수 있습니다.

jQuery.sub()

jQuery의 또 다른 변수명을 설정합니다. 예를 들어 var myQuery async = Jquery.sub();를 선언했다면 이후로는 myQuery.each() 형식으로 사용할 수 있게 됩니다.

jQuery.when()

when() 메서드를 실행하고 돌아온 결과를 다음 두 예제처럼 뒤의 then 혹은 done 함수의 x 인자로 받아서 사용합니다.

참고: [jQuery] when() 함수 (http://seongilman.tistory.com/7)

14.2 jQuery 문법

---

jQuery의 문법은 쉽고 편리합니다.

// javascript
window.onload = function(){
  var ps = document.getElementsByTagName('p');
  ps[ps.length - 1].style.border = '1px solid black';
};
// jquery
$(function(){
  $('p:last').css('border', '1px solid black');
});

선택자(selector)

선택자는 jQuery 객체 생성을 하거나 하위의 탐색 메서드에서 사용합니다. 선택된 엘리먼트들은 앞서 설명한 jQuery 객체의 배열에 저장되어 jQuery 객체로 반환되게 됩니다. 그리고 그렇게 반환된 jQuery객체는 내부 엘리먼트를 활용한 객체 지원 메서드에서 활용됩니다.
선택자로는 css 선택자와 필터등을 이용할 수 있으며 거기에 추가로 jQuery만의 고유의 선택자도 지원합니다. 선택자를 사용할 때는 가능한 범위를 좁혀서 HTML 문서 내부 구조를 최대한 덜 탐색하게 하는 것이 성능에 좋다는 것을 잊지마세요.
[ 표 14-1 기본 CSS 선택자 - P422) ]
[ 표 14-2 위치 기반 선택자(필터) - P422 ]
[ 표 14-3 정의 필터 선택자 - P423 ~ 424 ]

엘리먼트 조작

• addClass(‘className’)
  엘리먼트의 class 속성에 인자로 받은 css 클래스를 추가합니다.
• removeClass(‘className’)
  엘리먼트의 class 속성에서 인자로 받은 css 클래스를 제거합니다.
• hasClass(‘className’)
  class 속성 중 해당하는 css 클래스가 존재하는지 여부를 boolean 값으로 반환합니다.
• toggleClass(‘className’)
  class 속성 값 중 인자로 주어지는 클래스 이름을 추가했다가 삭제하기를 번갈아 합니다, 1.4 버전부터 인자를 함수로 사용할 수 있습니다
  [ 참고 jQuery API 정복 - 클래스 토글하기, toggleClass (http://findfun.tistory.com/167) ]
• attr()
  엘리먼트의 속성 정보를 설정하거나 반환합니다.
  $(‘input’).attr(‘value’);
  $(‘input’).attr(‘value’, ‘홍길동’);
• removeAttr()
  인자로 받은 엘리먼트의 속성을 제거합니다.
• html()
  엘리먼트의 innerHTML 내용을 설정하거나 반환합니다.
  $(‘div’).html() // div의 하위 내용을 반환
  $(‘div’).html(‘hello’) // div의 하위 내용을 인자 값으로 변경
• prop()
  엘리먼트 객체의 속성 정보에 직접 접근하여 값을 설정하거나 반환합니다.
  $(‘a’).prop(‘href’) // 속성 href의 값을 반환
  $(‘a’).prop(‘href’, ‘111’); // 속성 href의 값을 설정
• removeProp()
  엘리먼트 객체의 속성 정보를 제거합니다.
• val()
  폼 엘리먼트로부터 value값을 설정하거나 반환받습니다.
  $(input[type=text]).val() // value 값을 반환
  $(input[type=text]).val(‘test’) // 인자 값으로 value 값을 설정

탐색

선택자를 이용해 기존 배열에 있는 엘리먼트를 기준으로 탐색할 수 있습니다. document 객체로부처 참색하는 것보다 더욱 빠르고 정확하게 찾을 수 있기 때문에 탐색 메서드를 알아두면 웹 어플리케이션의 성능 향상에 큰 도움이 됩니다.
이 것도 필터링(filtering), 구조 탐색(Tree) 그리고 그 외의 것으로 분류하고 있습니다.
[ 표 14-4 필터링 메서드 - P434 ]
[ 표 14-5 구조탐색 메서드 - P436 ]
[ 표 14-6 기타 메서드 - P437 ]

스타일

jQuery 객체는 속성에도 여러 가지 관려하고 있고 문서의 스타일이나 엘리먼트의 외형과 관련된 메서드도 제공하고 있습니다.
[ 표 14-7 스타일 관련 메서드 - P439 ]

이벤트

jQuery를 통해 이벤트를 관리하면 여러 브라우저에 따라 다른 부분들을 모두 지원하고 있어 편리합니다.
jQuery에서 이벤트를 설정하거나 방생 시키는 것 역시 여타 설정과 반환 법칙에 따라 가능합니다. 즉 아래 구문처럼 핸들러를 추가할 때는 인수를 넣어주고 강제 발생 시킬 때는 인수를 설정하지 않으면 됩니다.
$(‘button’).click(function({…}); // 클릭 이벤트에 실행될 명령 추가
$(‘button’).click(); // 클릭 이벤트를 강제 발생

[ 이벤트의 종류 - P442 ]

.bind(eventType [, eventData], handler(eventObject)
bind() 메서드는 이벤트에 핸들러를 연결하는 것이고 unbind()메서드는 이벤트와 핸들러의 연결을 해제하는 것 입니다.
아래처럼 하나의 이벤트를 이용해 연결할 수도 있고 그 다음 예제에서와 같이 이벤트 핸들러에서 사용할 데이터를 삽입할 수도 있습니다.

.unbind([eventType], [, handler(eventObject))
bind메서드를 통해 이벤트와 핸들러를 연결한 것처럼 unbind메서드를 통해 이벤트와 핸들러의 연결을 끊어줄 수 있습니다. jQuery객체를 통해 등록된 모든 이벤트를 해제하고 싶을 때는 아무런 인자도 주지 않고 선언해주면 됩니다.
$(‘button’).unbind() // 모든 이벤트 제거
$(‘button’).unbind(‘click’) // click 이벤트 제거
$(‘button’).unbind(‘click’, handler) // click 이벤트 내 특정 handler 제거

.on()
on()은 현재 문서 내부에 있는 선택자로 선택된 엘리먼트와 나중에 추가되는 선택자에 해당하는 엘리먼트에도 자동으로 이벤트 핸들러가 적용됩니다.
$(document).on(‘click’, ‘.btn_default’, function(){…})

.off()
unbind와 같이 on을 통해 선언된 이벤트를 제거 합니다.

.one()
one()메서드는 bind()메서드와 같지만 한 번만 실행되고 핸들러 연결이 자동으로 해제 됩니다.

효과

jQuery는 웹 페이지에 여러가지 애니메이션 효과(Effect)를 지원하고 있습니다.
학습하기 전에 계속해서 반복되는 인자로 사용되는 단어에 대해 잠깐 짚어 보겠습니다.

• duration
  효과가 나타나는 시간(duration)을 조절할 수 있는 데 값은 ‘fast’, ‘normal’, ‘slow’의 문자열이나 1/1000초 단위의 숫자를 입력할 수 있습니다.
• easing
  효과에 특별한 방식을 지정합니다.
• callback
  효과가 모두 끝난 다음 실행할 콜백 함수

jQuery.fx.interval
메서드가 아닌 설정 값으로 효과가 시작해서 종료할 때까지 엘리먼트 모양을 변경하는 시간 간격을 설정할 수 있습니다. duration과 같이 1/1000초를 기준으로 숫자를 설정하게 되는 데 기본 값은 13 입니다.

참고: jQuery.fx.interval, 에니메이션 프레임 조절 (http://findfun.tistory.com/350)

jQuery.fx.off
jQuery.fx.interval와 마찬가지로 메서드가 아닌 설정 값으로 boolean 값으로 설정하게 됩니다. true일 때는 효과가 duration 시간에 걸쳐 나타나게 되고 false일 때는 duration없이 바로 나타나게 됩니다.

참고: jQuery.fx.off, 전체 애니메이션 효과 전역 설정 (http://findfun.tistory.com/351)

.hide([duration] [, easing] [, callback])
엘리먼트가 화면에 표시되지 않도록 숨겨줍니다.
[ 예제 14-14 ]

참고: arguments.callee (https://msdn.microsoft.com/ko-kr/library/334e1zza(v=vs.94).aspx)

.show([duration] [, easing] [, callback])
엘리먼트가 화면에 표시되도록 합니다.

.toggle([duration] [, easing] [, callback])
show()와 hide() 메서드를 번갈아 반복합니다.

.slideDown([duration] [, easing] [, callback])
엘리먼트가 위에서 아래로 열리며 슬라이드처럼 보입니다.

.slideUp([duration] [, easing] [, callback])
엘리먼트가 아래에서 위로 슬라이드처럼 닫히며 숨습니다.

.slideToggle([duration] [, callback])
slideUp()과 slideDown()이 번갈아 반복합니다.

.fadeIn([duration] [, easing] [, callback])
엘리먼트의 투명도가 변하며 보이게 됩니다.

.fadeOut([duration] [, easing] [, callback])
엘리먼트가 점점 투명해지며 숨겨집니다.

.fadeTo(duration, opacity [, easing] [, callback])
엘리먼트의 현재의 투명도에서 인자의 opacity까지 투명해집니다.(이때 인자의 opacity는 0부터 1까지 설정할 수 있습니다.)

.fadeToggle([duration] [, easing] [, callback])
엘리먼트의 투명도를 변경해 보였다, 안보였다를 반복합니다.

.animate(properties, [duration] [, easing] [, callback])
인자 properties에 설정한 값만큼 엘리먼트를 변경합니다. 이 때 properties는 다음 예제와 같이 CSS를 기준으로 합니다.

.queue([queueName])
현재 실행되지 않고 남아 실행되어야 할 효과를 배열로 돌려줍니다. 기본 queueName는 fx로 설정되어 있습니다. 아래 에제처럼 여러가지 효과를 넣어두고 해당 jQuery 객체의 queue(fx) 메서드를 통해 가져온 배열의 길이로 몇 개의 효과가 남아있는지 확인할 수 있습니다.

.dequeue([queueName])
.dequeue() 메서드가 호출되면 큐에서 빠져나와 다음 메서드를 실행하게 됩니다. queue에서 빠져나오려면 이 메서드를 반드시 호출해야 합니다.

.clearQueue([queueName])
현재 queueName에 설정되어 있는 남아있는 모든 효과를 제거합니다. 즉 queue()메서드를 통해 쌓여있는 모든 명령과 현재 진행 중인 것까지 포함해서 모두 정지하고 초기화 합니다.

.delay(duration [,queueName])
delay()메서드는 queue에 설정된 다음 메서드의 실행까지 시간 간격을 삽입합니다.

.stop([clearQueue] [,jumpToEnd])
현재 실행 중인 효과를 멈추고 다음 효과로 진행하도록 하는 메서드로 jumpToEnd 인자는 1.7이상 버전에서 사용할 수 있습니다.

Ajax

---

jQuery.ajax(url [, setting]), jQuery.ajax(settings)
가장 기본적인 메서드로 이 메서드를 통해 특정 URL로 XMLHttpRequest를 이용한 요청을 하고 그에 대한 응답을 받아 처리하게 됩니다. url은 인자 중 가장 먼저 작성해주거나 객체 데이터에 url이라는 이름으로 따로 삽입해도 됩니다. 이때 사용되는 settings 인자에 설정할 수 있는 값들은 표 14-8을 참고해주세요.
[표 14-8 Settings 인자 - P458 ~ 459 ]

참고: jQuery.ajax() HTTP 비동기 데이터 교환 (http://findfun.tistory.com/382)

예제 - http://windfanta.ivyro.net/ajaxtest/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
  <title>ajax-test</title>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
</head>
<style>
#btnArea{margin-bottom:30px;}
#result{position:relative;width:200px;height:300px;padding:10px;border:1px solid #000}
#result ul{margin:0;padding:0}
#result li{list-style:none;padding:0;margin:0;margin-bottom:10px}
#result strong{display:block;padding:5px 0;text-align:center}
#result .loading{display:none;position:absolute;left:0;top:0;width:100%;height:100%;color:#fff;text-align:center;background:#000}
</style>
<body>

<div id="btnArea1">
  <h2>Jquery</h2>
  <button id="btnSuccess" type="button">jquery 정상</button>
  <button id="btnSuccess2" type="button">javascript 정상</button>
  <button id="btnError" type="button">jquery 에러(없는 URL)</button>
</div>

<div id="result">
  <ul>
    <li class="loading">로딩 중</li>
    <li class="num">
      <strong>코드 넘버</strong>
      <span class="val"></span>
    </li>
    <li class="result">
      <strong>반환 값</strong>
      <span class="val"></span>
    </li>
  </ul>
</div>

<script>
// jquery
$('#btnArea1 button').on('click', function () {
  var btnType = $(this).attr('id') == 'btnError';
  var url = (!btnType) ? '/ajaxtest/ajax.php' : '/ajaxtest/none.php';
  var ajaxCode = {
    jqueryCode: function () {
      // jquery
      $.ajax({
        // url
        url: url,
        // 타입(POST, GET)
        type: 'GET',
        // 전송받을 데이터의 종류(xml, html, json, jsonp, script, test)
        dataType: 'json',
        // 제한 요청시간 지정 (1/1000초)
        timeout: 5000,
        // success 성공 상태의 코드를 반환하면 호출되는 함수
        success: function (event, XMLRequest, ajaxOptions) {
          var result = '';
          for (var key in arg1) {
            result+= key + ': ' + event[key]+'<br>';
          }
          $('#result .num .val').html(ajaxOptions.status);
          $('#result .result .val').html(result);
        },
        // error 에러 상태 코드를 반환하면 호출되는 함수
        error: function (jqXHR, textStatus, errorThrown) {
          $('#result .num .val').html(jqXHR.status);
        },
        // 요청이 완료되면 호출되는 함수
        complete: function (data) {
          $('#result .loading').fadeOut(500);
        }
      });
    },
    // javascript
    jsCode: function () {
      // XMLHttpRequest 객체의 생성
      var req = new XMLHttpRequest();
      // 비동기 방식으로 Request를 오픈한다
      req.open('GET', '/ajaxtest/ajax.php', true);
      // Request를 전송한다
      req.send();

      // XMLHttpRequest.readyState 프로퍼티가 변경(이벤트 발생)될 때마다 콜백함수(이벤트 핸들러)를 호출한다.
      req.onreadystatechange = function (e) {
        // readyStates는 XMLHttpRequest의 상태(state)를 반환
        // readyState: 4 => DONE(서버 응답 완료)
        if (req.readyState === XMLHttpRequest.DONE) {
          // loading 숨김
          $('#result .loading').fadeOut(500);

          // status는 response 상태 코드를 반환 : 200 => 정상 응답
          if(req.status == 200) {
            // 받아온 json은 JSON.parse()를 통해 Object형태로 변환하지 않으면 문자열로 인식
            var data = JSON.parse(req.response);
            var result = '';

            for (var key in data) {
              result+= key + ': ' + data[key]+'<br>';
            }
            $('#result .num .val').html(req.status);
            $('#result .result .val').html(result);
          } else {
            $('#result .num .val').html(req.status);
          }
        }
      };
    }
  };
  var ajaxType = ($(this).attr('id') == 'btnSuccess2') ? ajaxCode.jsCode : ajaxCode.jqueryCode;

  $('#result .loading').fadeIn(500);
  setTimeout(ajaxType, 1000);
});


</script>

</body>
</html>

jquery Plug-in 만들기

---

참고 Jquery: 플러그인 개발 (http://www.nextree.co.kr/p9989/)

참고 ftt.jquery.medialayer (http://static.four33.com/event/common/js/ftt.jquery.medialayer.0.3.js)