jQuery 유틸리티 메소드

유틸리티 메소드

제이쿼리는 프로그래밍을 하는 데 도움이 되는 다수의 유틸리티 메소드를 제공합니다.

 

타입 검사 메소드

제이쿼리는 인수로 전달받은 값의 타입을 손쉽게 확인해 주는 다음과 같은 메소드를 제공합니다.

 

 

 

1. $.type()

 

2. $.isArray()

 

3. $.isFunction()

 

4. $.isNumeric()

 

5. $.isEmptyObject()

 

6. $.isPlainObject()

 

7. $.isWindow()

 

8. $.isXMLDoc()

 

$.type() 메소드

자바스크립트의 typeof 연산자는 값에 따라 부정확하거나 모순된 타입 검사 결과를 반환합니다.

 

하지만 제이쿼리는 전달받은 값을 자바스크립트의 내부 클래스와 비교하여, 더욱 정확한 타입 검사를 제공하는 $.type() 메소드를 제공합니다.

 

예제

$(function() {

 

$("button").on("click", function() {

 

$("#text")

 

.append($.type(true) + "<br>") // boolean

 

.append($.type(new Boolean()) + "<br>") // boolean

 

.append($.type(100) + "<br>") // number

 

.append($.type(new Number(20)) + "<br>") // number

 

.append($.type("문자열") + "<br>") // string

 

.append($.type(new String("홍길동")) + "<br>") // string

 

.append($.type(function() {}) + "<br>") // function

 

.append($.type(new Function()) + "<br>") // function

 

.append($.type([]) + "<br>") // array

 

.append($.type(/정규표현식/) + "<br>") // regexp

 

.append($.type(null) + "<br>"); // null

 

});

 

});

 

특정 타입 검사 메소드

제이쿼리는 $.type() 메소드뿐만 아니라 전달된 값이 특정 타입의 값인지 아닌지를 검사해 주는 다양한 메소드를 제공합니다.

 

예제

$(function() {

 

$("button").on("click", function() {

 

$("#text")

 

.html($.isArray([]) + "<br>") // true

 

.append($.isArray(30) + "<br>") // false

 

.append($.isFunction(new Function()) + "<br>") // true

 

.append($.isFunction("문자열") + "<br>") // false

 

.append($.isNumeric(100) + "<br>") // true

 

.append($.isNumeric([7]) + "<br>") // false

 

.append($.isEmptyObject({}) + "<br>") // true

 

.append($.isEmptyObject({name: "홍길동"}) + "<br>") // false

 

.append($.isPlainObject(new Object()) + "<br>") // true

 

.append($.isPlainObject(new Object("문자열")) + "<br>") // false

 

.append($.isWindow(window) + "<br>"); // true

 

});

 

});

 

기타 유틸리티 메소드

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

 

$.each() 메소드

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

 

 

 

length 속성이 있는 배열이나 배열과 같은 객체를 전달받아, 그 길이만큼 반복해서 콜백함수를 실행합니다.

 

객체의 경우에는 객체가 가지고 있는 프로퍼티의 개수만큼 반복해서 콜백함수를 실행합니다.

 

 

 

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

 

예제

$(function() {

 

$("button").on("click", function() {

 

$.each([1, true, "JQuery"], function(index, value) {

 

$("#text").append("배열의 " + (index + 1) + "번째 요소의 값은 " + value + "입니다.<br>");

 

});

 

});

 

});

 

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

 

예제

$(function() {

 

var kitty = {

 

name: "나비",

 

family: "코리안 숏 헤어",

 

age: 2

 

}

 

$("button").on("click", function() {

 

$.each(kitty, function(key, value) {

 

$("#text").append("해당 객체의 " + key + " 프로퍼티의 값은 " + value + "입니다.<br>");

 

});

 

});

 

});

 

$.extend() 메소드

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

 

 

 

이 메소드는 인수로 전달받은 첫 번째 객체에 두 번째 객체의 모든 프로퍼티를 추가합니다.

 

그리고서 첫 번째 객체에 세 번째 객체의 모든 프로퍼티를 추가합니다.

 

이와 같은 순서대로 인수로 전달받은 모든 객체의 프로퍼티를 첫 번째 객체에 모두 추가합니다.

 

예제

$(function() {

 

var kitty = {

 

name: "나비",

 

family: "코리안 숏 헤어",

 

age: 2

 

}

 

var owner = {

 

name: "홍길동",

 

region: "서울",

 

gender: "남자"

 

}

 

var puppy = { name: "멍멍이" }

 

 

 

$("button").on("click", function() {

 

// kitty 객체에 owner 객체와 puppy 객체의 모든 프로퍼티를 합침.

 

$.extend(kitty, owner, puppy);

 

$.each(kitty, function(key, value) {

 

$("#text").append("해당 객체의 " + key + " 프로퍼티의 값은 " + value + "입니다.<br>");

 

});

 

});

 

});

위의 예제는 kitty 객체에 owner 객체와 puppy 객체의 모든 프로퍼티를 순서대로 병합합니다.

 

이때 중복되는 name 프로퍼티의 값은 가장 마지막으로 추가된 값이 설정됩니다.

 

따라서 name 프로퍼티의 값은 가장 마지막으로 병합한 puppy 객체의 name 프로퍼티의 값으로 설정됩니다.

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

 

$.trim() 메소드

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

 

예제

$(function() {

 

$("button").on("click", function() {

 

$("#text").html($.trim(" 문자열의 시작과 뒤에 많은 공백 문자가 있습니다! "));

 

});

 

});

 

$.inArray() 메소드

$.inArray() 메소드는 전달받은 값을 배열에서 검색한 후, 값이 일치하는 요소의 인덱스를 반환합니다.

 

만약 배열에 전달받은 값과 일치하는 요소가 없으면 -1을 반환합니다.

 

예제

$(function() {

 

$("button").on("click", function() {

 

var arr = [1, true, "JQuery"];

 

$("#text").html("해당 요소의 인덱스는 " + $.inArray(true, arr) + "입니다.");

 

});

 

});