-
728x90반응형
유틸리티 메소드
유틸리티 메소드
제이쿼리는 프로그래밍을 하는 데 도움이 되는 다수의 유틸리티 메소드를 제공한다.타입 검사 메소드
제이쿼리는 인수로 전달받은 값의 타입을 손쉽게 확인해 주는 다음과 같은 메소드를 제공한다.
- $.type( )
- $.isArray( )
- $.isFunction( )
- $.isNumeric( )
- $.isEmptyObject( )
- $.isPlainObject( )
- $.isWindow( )
- $.isXMLDoc( )
$.type( ) 메소드
자바스크립트의 typeof 연산자는 값에 따라 부정확하거나 모순된 타입 검사 결과를 반환한다.
하지만 제이쿼리는 전달받은 값을 자바스크립트의 내부 클래스와 비교하여, 더욱 정확한 타입 검사를 제공하는 $.type( ) 메소드를 제공한다.
예제
123456789101112131415161718192021222324252627282930313233343536<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>jQuery Utility Method</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script>$(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});});</script></head><body><h1>$.type() 메소드</h1><button>타입 검사!</button><p id="text"></p></body></html>cs 실행결과 :
$.type() 메소드
특정 타입 검사 메소드
제이쿼리는 $.type( ) 메소드뿐만 아니라 전달된 값이 특정 타입의 값인지 아닌지를 검사해 주는 다양한 메소드를 제공한다.
예제
123456789101112131415161718192021222324252627282930313233343536<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>jQuery Utility Method</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script>$(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});});</script></head><body><h1>특정 타입 검사 메소드</h1><button>타입 검사!</button><p id="text"></p></body></html>cs 실행결과 :
특정 타입 검사 메소드
타입 검사 메소드
메소드
설명
$.type( )
전달받은 값을 자바스크립트의 내부 클래스와 비교하여, 더욱 정확한 타입 검사를 제공함.
$.isArray( )
전달받은 값이 배열인지 아닌지를 검사함.
$.isFunction( )
전달받은 값이 자바스크립트 함수 객체인지 아닌지를 검사함.
$.isNumeric( )
전달받은 값이 자바스크립트 Number 객체인지 아닌지를 검사함.
$.isEmptyObject( )
전달받은 값이 비어있는 객체(열거할 수 있는 프로퍼티를 가지고 있지 않은 객체)인지 아닌지를 검사함.
$.isPlainObject( )
전달받은 값이 기본 객체(plain object)인지 아닌지를 검사함.
$.isWindow( )
전달받은 값이 자바스크립트 Window 객체인지 아닌지를 검사함.
$.isXMLDoc( )
전달받은 DOM 노드가 XML 문서에 포함되어 있거나, XML 문서인지 아닌지를 검사함.
기타 유틸리티 메소드
제이쿼리는 타입 검사 메소드뿐만 아니라 편리한 기능을 제공하는 다수의 유틸리티 메소드를 제공한다.
$.each( ) 메소드
$.each( ) 메소드는 객체나 배열에서 모두 사용할 수 있는 범용적인 반복 함수(iterator function)입니다.
length 속성이 있는 배열이나 배열과 같은 객체를 전달받아, 그 길이만큼 반복해서 콜백함수를 실행한다.
객체의 경우에는 객체가 가지고 있는 프로퍼티의 개수만큼 반복해서 콜백함수를 실행한다.
다음 예제는 $.each( ) 메소드에 배열을 인수로 전달하여 각 배열 요소를 출력하는 예제이다.
예제
123456789101112131415161718192021222324252627<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>jQuery Utility Method</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script>$(function() {$("button").on("click", function() {$.each([1, true, "JQuery"], function(index, value) {$("#text").append("배열의 " + (index + 1) + "번째 요소의 값은 " + value + "입니다.<br>");});});});</script></head><body><h1>$.each() 메소드</h1><button>반복해서 출력하기!</button><p id="text"></p></body></html>cs 실행결과 :
$.each() 메소드
다음 예제는 $.each( ) 메소드에 객체를 인수로 전달하여 객체의 각 프로퍼티를 출력하는 예제이다.
예제
1234567891011121314151617181920212223242526272829303132<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>jQuery Utility Method</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script>$(function() {var kitty = {name: "나비",family: "코리안 숏 헤어",age: 2}$("button").on("click", function() {$.each(kitty, function(key, value) {$("#text").append("해당 객체의 " + key + " 프로퍼티의 값은 " + value + "입니다.<br>");});});});</script></head><body><h1>$.each() 메소드</h1><button>반복해서 출력하기!</button><p id="text"></p></body></html>cs 실행결과 :
$.each() 메소드
$.extend( ) 메소드
$.extend( ) 메소드는 두 개 이상의 객체의 모든 프로퍼티를 하나의 객체로 병합한다.
이 메소드는 인수로 전달받은 첫 번째 객체에 두 번째 객체의 모든 프로퍼티를 추가한다.
그리고서 첫 번째 객체에 세 번째 객체의 모든 프로퍼티를 추가한다.
이와 같은 순서대로 인수로 전달받은 모든 객체의 프로퍼티를 첫 번째 객체에 모두 추가한다.
예제
123456789101112131415161718192021222324252627282930313233343536373839404142<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>jQuery Utility Method</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script>$(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>");});});});</script></head><body><h1>$.extend() 메소드</h1><button>합쳐서 출력하기!</button><p id="text"></p></body></html>cs 실행결과 :
$.extend() 메소드
위의 예제는 kitty 객체에 owner 객체와 puppy 객체의 모든 프로퍼티를 순서대로 병합한다.
이때 중복되는 name 프로퍼티의 값은 가장 마지막으로 추가된 값이 설정된다.
따라서 name 프로퍼티의 값은 가장 마지막으로 병합한 puppy 객체의 name 프로퍼티의 값으로 설정된다.
Tip : $.extend( ) 메소드에 인수로 전달되는 첫 번째 객체는 원본 객체 자체가 변형된다는 사실에 유의해야 한다.
$.trim( ) 메소드
$.trim( ) 메소드는 문자열의 시작과 끝에 위치한 공백 문자(whitespace)를 제거한다.
예제
1234567891011121314151617181920212223242526<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>jQuery Utility Method</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script>$(function() {$("button").on("click", function() {$("#text").html($.trim(" 문자열의 시작과 뒤에 많은 공백 문자가 있습니다! "));});});</script></head><body><h1>$.trim() 메소드</h1><button>공백 문자 제거하기!</button><pre> 문자열의 시작과 뒤에 많은 공백 문자가 있습니다! </pre><p id="text"></p></body></html>cs 실행결과 :
$.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을 반환한다.
예제
1234567891011121314151617181920212223242526<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>jQuery Utility Method</title><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script>$(function() {$("button").on("click", function() {var arr = [1, true, "JQuery"];$("#text").html("'true'값을 가지는 요소의 인덱스는 " + $.inArray(true, arr) + "입니다.");});});</script></head><body><h1>$.inArray() 메소드</h1><button>특정 요소 검색하기!</button><p id="text"></p></body></html>cs 실행결과 :
$.inArray() 메소드
배열에 관련된 메소드
메소드
설명
$.make.Array( )
배열과 같은 객체(array-like object)를 자바스크립트 Array 객체로 변환함.
$.inArray( )
전달받은 값을 배열에서 검색한 후, 값이 일치하는 요소의 인덱스를 반환함.
만약 일치하는 요소가 없으면 -1을 반환함.
$.map( )
배열이나 객체의 모든 요소를 새로운 배열로 변환함.
$.merge( )
두 개의 배열의 콘텐츠를 하나의 배열로 병합함.
$.grep( )
배열에서 필터 함수를 만족하는 요소를 검색함. 원본 배열은 변경되지 않음.
파싱에 관련된 메소드
메소드
설명
$.parseHTML( )
DOM 노드 배열을 문자열로 파싱함.
$.parseJSON( )
잘 구성된(well-formed) JSON 문자열을 전달받은 후, 자바스크립트 객체로 반환함.
$.parseXML( )
XML 문서를 문자열로 파싱함.
728x90반응형'Library > jQuery' 카테고리의 다른 글
Ajax와의 연동 (0) 2018.10.25 이펙트 효과(페이드/슬라이드/jQuery.fx 객체/animate) (0) 2018.10.25 이벤트 처리 (0) 2018.10.25 스타일 설정(프로퍼티/클래스) (0) 2018.10.25 요소의 영역(크기/위치) (0) 2018.10.24
