jQuery 10 - [유틸리티 메소드, 타입검사, 기타]

유틸리티 메소드

 

코딩의 시작, TCP School

 

타입 검사 메소드

 

타입 검사 메소드

인수로 전달받은 값의 타입 확인 메소드

 

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
    });
});

 

특정 타입 검사 메소드

• 전달된 값이 특정 타입의 값인지 아닌지를 검사해 주는 다양한 메소드를 제공.

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

 

타입 검사 메소드

 

---

 

메소드	설명
$.type()	전달받은 값을 자바스크립트의 내부 클래스와 비교하여, 더욱 정확한 타입 검사를 제공함.
$.isArray()	전달받은 값이 배열인지 아닌지를 검사함.
$.isFunction()	전달받은 값이 자바스크립트 함수 객체인지 아닌지를 검사함.
$.isNumeric()	전달받은 값이 자바스크립트 Number 객체인지 아닌지를 검사함.
$.isEmptyObject()	전달받은 값이 비어있는 객체(열거할 수 있는 프로퍼티를 가지고 있지 않은 객체)인지 아닌지를 검사함.
$.isPlainObject()	전달받은 값이 기본 객체(plain object)인지 아닌지를 검사함.
$.isWindow()	전달받은 값이 자바스크립트 Window 객체인지 아닌지를 검사함.
$.isXMLDoc()	전달받은 DOM 노드가 XML 문서에 포함되어 있거나, XML 문서인지 아닌지를 검사함.

 

기타 유틸리티 메소드

 

$.each() 메소드

• $.each() 메소드는 객체나 배열에서 모두 사용할 수 있는 범용적인 반복 함수(iterator function).
  • length 속성이 있는 배열이나
  • 배열과 같은 객체를 전달받아,
  • 그 길이만큼 반복해서 콜백함수를 실행.

 

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

$(function() {
    $("button").on("click",  function() {
        $.each([1,  true,  "JQuery"],  function(index, value) {
            $("#text").append("배열의 "  +  (index  +  1)  +  "번째 요소의 값은 "  +  value  +  "입니다.<br>");
        });
    });
});

 

$(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(" 문자열의 시작과 뒤에 많은 공백 문자가 있습니다! "));
    });
});

 

범용 유틸리티 메소드

 

---

 

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

 

---

 

$.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 문서를 문자열로 파싱함.

 

---