jQuery 입문 | 유틸리티 메소드 | 기타 유틸리티 메소드 $.each() $.extend() $.trim()

기타 유틸리티 메소드

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

$.each() 메소드

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

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

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

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

<!DOCTYPE html>
<html lang="ko">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function() {
    var arr = ["a", "b", "c"];
    $.each(arr, function(index, value) {
       $("#text").append("index=" + index + ", value=" + value + "<br>");
    });
  });
  </script>
</head>
<body>
  <h1>jQuery $.each()</h1>
  <p id="text"></p>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html lang="ko">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function() {
    var site = {
      "name" : "devkuma",
      "url" : "www.devkuma.com"
    };

    $.each(site, function(key, value) {
       $("#text").append("key=" + key + ", value=" + value + "<br>");
    });
  });
  </script>
</head>
<body>
  <h1>jQuery $.each()</h1>
  <p id="text"></p>
</body>
</html>

$.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>");
});

<!DOCTYPE html>
<html lang="ko">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function() {
    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>");
    });
  });
  </script>
</head>
<body>
  <h1>jQuery $.extend()</h1>
  <p id="text"></p>
</body>
</html>

위의 예제는 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));

<!DOCTYPE html>
<html lang="ko">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function() {
    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));
  });
  </script>
</head>
<body>
  <h1>jQuery $.inArray()</h1>
  <p id="text"></p>
</body>
</html>

배열에 관련된 메소드

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

파싱에 관련된 메소드

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

참조

최종 수정 : 2021-08-27