기타 유틸리티 메소드

jQuery는 타입 검사 메소드뿐만 아니라 편리한 기능을 제공하는 다수의 유틸리티 메소드를 제공한다.

$.each() 메소드

$.each() 메소드는 객체나 배열에서 모두 사용할 수 있는 범용적인 반복 함수(iterator function)이다.

length 속성이 있는 배열이나 배열과 같은 객체를 전달받아, 그 길이만큼 반복해서 콜백함수를 실행한다. 객체의 경우에는 객체가 가지고 있는 프로퍼티의 개수만큼 반복해서 콜백함수를 실행한다.

다음 예제는 $.each() 메소드에 배열을 인수로 전달하여, 각 배열 요소를 출력하는 예제이다.

var arr = ["a", "b", "c"];
$.each(arr, function(index, value) {
  $("#text").append("index=" + index + ", value=" + value + "<br>");
});

코드 실행

다음 예제는 $.each() 메소드에 객체를 인수로 전달하여 객체의 각 프로퍼티를 출력하는 예제이다.

var site = {
  "name" : "devkuma",
  "url" : "www.devkuma.com"
};

$.each(site, function(key, value) {
       $("#text").append("key=" + key + ", value=" + value + "<br>");
});

코드 실행

$.extend() 메소드

$.extend() 메소드는 두 개 이상의 객체의 모든 프로퍼티를 하나의 객체로 병합한다.

이 메소드는 인수로 전달받은 첫 번째 객체에 두 번째 객체의 모든 프로퍼티를 추가한다.
그리고서 첫 번째 객체에 세 번째 객체의 모든 프로퍼티를 추가한다.
이와 같은 순서대로 인수로 전달받은 모든 객체의 프로퍼티를 첫 번째 객체에 모두 추가한다.

var obj1 = {
  "name" : "google",
};
    
var obj2 = {
  "url" : "www.google.com",
  "adc" : "def"
};
    
var obj3 = {
  "name" : "devkuma",
  "url" : "www.devkuma.com",
  "book" : "jQuery" 
};

$.extend(obj1, obj2, obj3);
$.each(obj1, function(key, value) {
  $("#text").append("key=" + key + ", value=" + value + "<br>");
});

코드 실행

위의 예제는 obj1 객체에 obj2 객체와 obj3 객체의 모든 프로퍼티를 순서대로 병합한다.
이때 중복되는 name 프로퍼티의 값은 가장 마지막으로 추가된 값이 설정된다.
따라서 name 프로퍼티의 값은 가장 마지막으로 병합한 obj3 객체의 devkuma 프로퍼티의 값으로 설정된다.

$.extend() 메소드에 인수로 전달되는 첫 번째 객체는 원본 객체 자체가 변형된다는 사실에 유의해야 한다.

$.trim() 메소드

$.trim() 메소드는 문자열의 시작과 끝에 위치한 공백 문자(whitespace)를 제거한다.

var text = "   안녕하세요. 데브쿠마입니다.   ";
$("#text").append("trim 전, '" + text + "'<br>");
$("#text").append("trim 후, '" + $.trim(text) + "'");

코드 실행

범용 유틸리티 메소드

메소드설명
$.contains()DOM 요소가 다른 DOM 요소의 자손(descendant) 요소인지 아닌지를 검사함.
$.unique()DOM 요소 배열을 정렬하고, 중복된 요소를 제거함.
$.each()객체나 배열에서 모두 사용할 수 있는 범용적인 반복 함수(iterator function)임.
$.data()선택한 요소와 관련된 데이터를 저장하거나, 저장된 데이터값을 읽어옴.
$.removeData()저장된 데이터를 제거함.
$.queue()선택한 요소의 실행될 함수 큐(queue)를 참조하거나 조작함.
$.dequeue()선택한 요소의 함수 큐에서 다음 함수를 실행함.
$.extend()두 개 이상의 객체의 콘텐츠를 하나의 객체로 병합함.
$.noop()빈 함수를 의미함.
$.proxy()함수를 전달받은 후, 특정 콘텍스트(context)를 가지는 새로운 함수를 반환함.
$.now()현재 시각을 나타내는 숫자를 반환함.
$.trim()문자열의 시작과 끝에 위치한 공백 문자(whitespace)를 제거함.

$.inArray() 메소드

$.inArray() 메소드는 전달받은 값을 배열에서 검색한 후, 값이 일치하는 요소의 인덱스를 반환한다. 만약 배열에 전달받은 값과 일치하는 요소가 없으면 -1을 반환한다.

예제

var arr = ["devkuma", 123, "abc"];
    
$("#text").append("devkuma : " + $.inArray("devkuma", arr) + "<br>");
$("#text").append("123 : " + $.inArray(123, arr) + "<br>");
$("#text").append("abc : " + $.inArray("abc", arr) + "<br>");
$("#text").append("def : " + $.inArray("def", arr));

코드 실행

배열에 관련된 메소드

메소드설명
$.makeArray()배열과 같은 객체(array-like object)를 자바스크립트 Array 객체로 변환함.
$.inArray()전달받은 값을 배열에서 검색한 후, 값이 일치하는 요소의 인덱스를 반환함. 만약 일치하는 요소가 없으면 -1을 반환함.
$.map()배열이나 객체의 모든 요소를 새로운 배열로 변환함.
$.merge()두 개의 배열의 콘텐츠를 하나의 배열로 병합함.
$.grep()배열에서 필터 함수를 만족하는 요소를 검색함. 원본 배열은 변경되지 않음.

파싱에 관련된 메소드

메소드설명
$.parseHTML()DOM 노드 배열을 문자열로 파싱함.
$.parseJSON()잘 구성된(well-formed) JSON 문자열을 전달받은 후, 자바스크립트 객체로 반환함.
$.parseXML()XML 문서를 문자열로 파싱함.

참조


Ajax와 Form 요소

Ajax에서는 서버와의 비동기식 통신을 위해 form 요소를 통해 입력받은 데이터를 직렬화(serialization)하여 전송한다.

이때 직렬화(serialization)란 입력받은 여러 데이터를 하나의 쿼리 문자열로 만드는 것을 의미한다.
이렇게 함으로써 form 요소를 통해 입력받은 데이터를 한 번에 서버로 보낼 수 있게 된다.

직렬화(serialization)

jQuery에서는 HTML form 요소를 통해 입력된 데이터의 직렬화 작업을 매우 간단하게 수행할 수 있다.
.serialize() 메소드와 .serializeArray() 메소드를 이용하여 손쉽게 데이터를 직렬화할 수 있다. .serialize() 메소드는 HTML form 요소를 통해 입력된 데이터를 쿼리 문자열로 변환한다.
.serializeArray() 메소드는 serialize() 메소드와는 달리 입력된 데이터를 문자열이 아닌 배열 객체로 변환한다.

다음 예제는 <form>요소에 .serialize()를 한 값을 표시한다.

function showValues() {
    $("#text").text($("form").serialize());
}
$("input[type='text']").on("keydown", showValues);
$("input[type='checkbox'], input[type='radio']").on("click", showValues);
$("select").on("change", showValues);

코드 실행

한글이 포함된 입력 데이터가 쿼리 문자열로 변환될 때는 퍼센트 인코딩(percent-encoding)을 통해 변환된다.
이때 모든 한글 문자는 퍼센트 기호(%)를 포함한 16진수 값으로 변환된다.

참조


이펙트 효과의 제어

jQuery에서는 다음 메소드를 사용하여 사용자가 직접 이펙트 효과를 제어할 수 있다.

메소드설명
.delay()실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정한다.
.stop()선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킨다.
.finish()선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시키고, 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킨다.

이펙트 효과의 지연 시간 설정

.delay() 메소드는 실행 중인 큐(Queue) 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정한다.

다음 예제는 페이드 아웃 효과와 페이드 인 효과 사이에 1초의 지연시간을 설정하는 예제이다.

아래와 같이 HTML 요소가 있을 때,

<p><button>실행</button></p>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

아래와 같이 실행 버튼을 누르면 사각형이 사라졌다가 id가 "first"인 요소는 지연 시간이 없고, "second"인 요소는 0.5초, "third"는 1초의 지연 시간을 가졌다가 다시 표시된다.

$("button").on("click", function() {
  $("div.first").slideUp(300).fadeIn(400);
  $("div.second").slideUp(300).delay(500).fadeIn(400);
  $("div.third").slideUp(300).delay(1000).fadeIn(400);
});

코드 실행

이펙트 효과의 중지

.stop() 메소드는 선택한 요소에서 실행 중인 모든 이펙트 효과를 일시적으로 중지시킨다.

아래 예제는 시작 버튼을 누르면 크기가 점점 커지다가, 중시 버튼을 누르면 일시 중지된다.

$("button#start").on("click", function() {
  $("div").animate({width: 300, height: 300}, 3000);
});
$("button#stop").on("click", function() {
  $("div").stop();
});

코드 실행

이펙트 효과의 종료

.finish() 메소드는 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킨다.

아래 예제는 시작 버튼을 누르면 크기가 점점 커지다가, 종료 버튼을 누르면 효과가 종료된다.

$("button#start").on("click", function() {
  $("div").animate({width: 300, height: 300}, 3000);
});
$("button#finish").on("click", function() {
  $("div").finish();
});

코드 실행

.delay()와 .finish()의 차이점

.stop() 메소드와 .finish() 메소드는 실행 중인 이펙트 효과를 멈춘다는 점이 동일하다.
차이점은 .stop() 메소드는 일시적으로 중지를 시키는 반면에 .finish() 메소드는 중지가 아닌 아예 종료시킨다는 점이 다르다. 즉, .stop() 메소드로 중지를 시키면 다시 재개할 수 있지만 .finish() 메소드는 다시 재개할 수 없고 처음부터 다시 실행을 시켜야 한다.

이벤트 메소드

jQuery는 .on() 메소드 이외에도 자바스크립트 이벤트와 관련된 다양한 메소드를 제공한다.
이러한 이벤트 메소드는 이벤트가 발생하는 요소에 따라 다음과 같이 구분할 수 있다.

  1. 마우스 이벤트와 관련된 메소드
  2. 키보드 이벤트와 관련된 메소드
  3. 입력 양식 이벤트와 관련된 메소드

마우스 이벤트와 관련된 메소드

jQuery에서 제공하는 마우스 이벤트와 관련된 메소드는 다음과 같다.

메소드설명
.click()자바스크립트의 "click" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "click" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.dblclick()자바스크립트의 "dblclick" 이벤트 핸들러를 연결되고, 해당 요소에 "dblclick" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.hover()자바스크립트의 "mouseenter"와 "mouseleave" 이벤트를 하나의 이벤트 핸들러와 연결되고, 해당 요소에 "mouseenter"와 "mouseleave" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.mousedown()자바스크립트의 "mousedown" 이벤트 핸들러를 연결되고, 해당 요소에 "mousedown" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.mouseenter()해당 요소 위로 마우스가 진입할 때 발생하는 이벤트가 이벤트 핸들러에 연결되고, 해당 요소에 마우스 진입 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.mouseleave()해당 요소에서 마우스가 빠져나갈 때 발생하는 이벤트와 이벤트 핸들러에 연결되고, 해당 요소에 마우스가 빠져나가는 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.mousemove()자바스크립트의 "mousemove" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "mousemove" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.mouseout()자바스크립트의 "mouseout" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "mouseout" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.mouseover()자바스크립트의 "mouseover" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "mouseover" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.mouseup()자바스크립트의 "mouseup" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "mouseup" 이벤트가 발생되었을 때 설정한 함수가 실행된다.

.click() 메소드와 .dblclick() 메소드

.click() 메소드는 자바스크립트의 "click" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "click" 이벤트가 발생되었을 때 설정한 함수가 실행된다.

.dblclick() 메소드는 자바스크립트의 "dblclick" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "dblclick" 이벤트가 발생되었을 때 설정한 함수가 실행된다.

아래 예제는 버튼이 클릭되거나 더블 클릭되었을 때 상태를 출력하는 예제이다.

$("button").click(function() {
  $("div").text("클릭이 되었습니다.");
});
$("button").dblclick(function() {
  $("div").text("더블 클릭이 되었습니다.");
});

코드 실행

.hover() 메소드

.hover() 메소드는 자바스크립트의 "mouseenter"와 "mouseleave" 이벤트를 하나의 이벤트 핸들러와 연결되고, 해당 요소에 "mouseenter"와 "mouseleave" 이벤트가 발생되었을 때 설정한 함수가 실행된다.

아래 예제는 버튼에 마우스가 올라오거나 빠져나갔을 때 상태를 출력하는 예제이다.

$("button").hover(function() {
  $("#text").text("마우스가 올라왔습니다.");
}, function(){
  $("#text").text("마우스가 빠져나갔습니다.");
});

코드 실행

설정한 함수가 두개이면 첫번째 함수는 "mouseenter" 이벤트가 발생할 시에 실행되고, 두번째 함수는 첫번째 함수는 "mouseleave" 이벤트가 발생할 시에 실행된다.

설정한 함수가 한개인 경우에는 "mouseenter" 이벤트와 "mouseleave" 이벤트 중에 하나만 발생하면 한개의 함수가 실행된다.

키보드 이벤트와 관련된 메소드

메소드설명
.keydown()자바스크립트의 "keydown" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "keydown" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.keyup()자바스크립트의 "keyup" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "keyup" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.keypress()자바스크립트의 "keypress" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "keypress" 이벤트가 발생되었을 때 설정한 함수가 실행된다.

.keypress() 메소드

.keypress() 메소드는 자바스크립트의 "keydown" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "keydown" 이벤트가 발생되었을 때 설정한 함수가 실행된다.

다음 예제는 <input>요소에 키보드로 문자를 입력할 때마다 카운팅하여 출력하는 예제이다.

var i = 0;
$("input").keypress(function() {
  $("#text").text((++i) + "번 키보드가 눌렸습니다.");
});

코드 실행

Shift, Esc, Delete와 같은 화면에 출력되지 않는 키(modifier and non-printing keys)들은 "keydown" 이벤트는 발생시키지만, "keypress" 이벤트는 발생시키지 않는다.

입력 양식 이벤트와 관련된 메소드

메소드설명
.blur()자바스크립트의 "blur" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "blur" 이벤트를 발생시킴.
.change()자바스크립트의 "change" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "change" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.select()자바스크립트의 "select" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "select" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.submit()자바스크립트의 "submit" 이벤트가 이벤트 핸들러를 연결되고 해당 요소에 "submit" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.focus()자바스크립트의 "focus" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "focus" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.focusin()"focusin" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "focusin" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.focusout()"focusout" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "focusout" 이벤트가 발생되었을 때 설정한 함수가 실행된다.

.focusin() 메소드와 .focusout() 메소드

.focusin() 메소드는 "focusin" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "focusin" 이벤트가 발생되었을 때 설정한 함수가 실행된다.

.focusout() 메소드는 "focusout" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "focusout" 이벤트가 발생되었을 때 설정한 함수가 실행된다.

$("input").focusin(function() {
  $(this).css("background-color", "yellow");
});

$("input").focusout(function() {
  $(this).css("background-color", "white");
});

코드 실행

this 키워드는 현재 선택되어 있는 요소 그 자체를 가리킨다.

참조


이벤트의 위임(event delegation)

jQuery는 이벤트의 위임을 통해 다수의 요소에 공통으로 적용되는 이벤트 핸들러를 공통된 상위 요소에 단 한번의 연결만으로도 동작할 수 있도록 해준다.

다음 예제는 다수의 <a> 요소에 클릭 이벤트 핸들러를 연결하고 있다.

$("#linkList a").on("click", function(event) {
  event.preventDefault();
  alert("이 링크는 동작하지 않습니다!");
});
<ul id="linkList">
  <li><a href="//www.devkuma.com">첫번째 링크</a></li>
  <li><a href="//www.devkuma.com">두번째 링크</a></li>
</ul>

코드 실행

이는 각 요소에 연결된 이벤트 핸들러는 화면에 현재 존재하는 <a>요소에는 연결되지만, 새롭게 추가되는 요소에는 연결되지 않는다.

위에 예제에서 신규 추가하는 버튼을 추가해 보자.

$("button").one("click", function() {
  $("#linkList").append('<li><a href="//www.devkuma.com">신규 링크</a></li>');
});
<button>신규 링크 추가</button>

코드 실행

이런 경우에 이벤트의 위임을 이용하면, 새롭게 추가된 <a>요소에도 연결할 수 있다.

$("#linkList").on("click", "a", function(event) {
  event.preventDefault();
  alert("이 링크는 동작하지 않습니다!");
});

코드 실행

.on() 메소드는 해당 요소에 첫 번째 인수로 전달받은 이벤트가 전파되었을 때, 그 이벤트를 발생한 요소가 두 번째 인수로 전달받은 선택자와 같은지 여부를 확인한다.
만약, 이벤트가 발생한 요소와 두 번째 인수로 전달받은 선택자가 같다면, 연결된 이벤트 핸들러를 실행한다.

이벤트의 위임을 이용하면 현재 존재하는 하위 요소뿐만 아니라, 새롭게 추가되는 하위 요소까지도 모두 자동으로 연결된다.

이벤트의 전파(event propagation)

이벤트의 전파란 이벤트가 발생했을 때, 브라우저가 이벤트 핸들러를 실행시킬 대상 요소를 결정하는 과정이다.
이벤트가 Document 객체나 HTML 문서의 요소에서 일어나면 대상 객체를 결정하기 위해 이벤트의 전파가 일어난다.
이렇게 이벤트가 전파되는 과정을 이벤트 버블링(event bubbling)이라고 한다.

이벤트 버블링은 이벤트가 발생한 요소부터 시작하여 DOM 트리를 따라 위쪽으로 올라가며 전파되는 과정을 의미한다.
즉, 이벤트가 발생한 요소에 연결된 이벤트 핸들러가 실행된 후, 그 부모 요소에 연결된 핸들러가 실행된다.
또다시 그 부모 요소에 등록된 핸들러가 실행되며, 마지막에는 Document 객체까지 계속 전파된다.

이러한 전파를 통해 위와 같은 이벤트의 위임(event delegation)이 가능해진다.

이벤트의 전파(propagation)에 대한 더 자세한 사항은 자바스크립트 이벤트 리스너 호출 수업에서 확인할 수 있다.

+ Recent posts