기타 유틸리티 메소드
기타 유틸리티 메소드
제이쿼리는 타입 검사 메소드뿐만 아니라 편리한 기능을 제공하는 다수의 유틸리티 메소드를 제공합니다.
$.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 프로퍼티의 값으로 설정됩니다.
$.trim() 메소드
$.trim() 메소드는 문자열의 시작과 끝에 위치한 공백 문자(whitespace)를 제거합니다.
예제
$(function() {
$("button").on("click", function() {
$("#text").html($.trim(" 문자열의 시작과 뒤에 많은 공백 문자가 있습니다! "));
});
});
범용 유틸리티 메소드
| 메소드 | 설명 |
|---|---|
| $.contains() | DOM 요소가 다른 DOM 요소의 자손(descendant) 요소인지 아닌지를 검사함. |
| $.unique() | DOM 요소 배열을 정렬하고, 중복된 요소를 제거함. |
|
$.each() |
객체나 배열에서 모두 사용할 수 있는 범용적인 반복 함수(iterator function)임. |
|
$.data() |
선택한 요소와 관련된 데이터를 저장하거나, 저장된 데이터값을 읽어옴. |
|
$.removeData() |
저장된 데이터를 제거함. |
|
$.queue() |
선택한 요소의 실행될 함수 큐(queue)를 참조하거나 조작함. |
| $.dequeue() | 선택한 요소의 함수 큐에서 다음 함수를 실행함. |
| $.extend() | 두 개 이상의 객체의 콘텐츠를 하나의 객체로 병합함. |
| $.noop() | 빈 함수를 의미함. |
| $.proxy() | 함수를 전달받은 후, 특정 콘텍스트(context)를 가지는 새로운 함수를 반환함. |
| $.now() | 현재 시각을 나타내는 숫자를 반환함. |
| $.trim() | 문자열의 시작과 끝에 위치한 공백 문자(whitespace)를 제거함. |
$.inArray() 메소드
$.inArray() 메소드는 전달받은 값을 배열에서 검색한 후, 값이 일치하는 요소의 인덱스를 반환합니다.
만약 배열에 전달받은 값과 일치하는 요소가 없으면 -1을 반환합니다.
예제
$(function() {
$("button").on("click", function() {
var arr = [1, true, "JQuery"];
$("#text").html("해당 요소의 인덱스는 " + $.inArray(true, arr) + "입니다.");
});
});
배열에 관련된 메소드
| 메소드 | 설명 |
|---|---|
| $.makeArray() | 배열과 같은 객체(array-like object)를 자바스크립트 Array 객체로 변환함. |
| $.inArray() | 전달받은 값을 배열에서 검색한 후, 값이 일치하는 요소의 인덱스를 반환함. 만약 일치하는 요소가 없으면 -1을 반환함. |
|
$.map() |
배열이나 객체의 모든 요소를 새로운 배열로 변환함. |
|
$.merge() |
두 개의 배열의 콘텐츠를 하나의 배열로 병합함. |
|
$.grep() |
배열에서 필터 함수를 만족하는 요소를 검색함. 원본 배열은 변경되지 않음. |
파싱에 관련된 메소드
| 메소드 | 설명 |
|---|---|
| $.parseHTML() | DOM 노드 배열을 문자열로 파싱함. |
|
$.parseJSON() |
잘 구성된(well-formed) JSON 문자열을 전달받은 후, 자바스크립트 객체로 반환함. |
|
$..parseXML() |
XML 문서를 문자열로 파싱함. |
