jquery에서 위대한 함수들... 유용한

Contents

1 bind(type, data, fn)
2 trigger(type, data)
3 toggle(even, odd)
4 serialize
5 $.extend( target, prop1, propN )
6 $.grep( array, fn, inv )
7 $.map( array, fn )
8 $.merge( first, second )
9 $.trim( str )



1 bind(type, data, fn) #

  • type (String): An event type
  • data (Object): (optional) Additional data passed to the event handler as event.data
  • fn (Function): A function to bind to the event on each of the set of matched elements

이벤트를 처리기에 바인드하는 기능인데 여기에 사용자 지정이벤트를 지정하는 기능이 여러모로 쓸모 있으리라 생각되네요.

example1: click이벤트에 핸들러를 연결
function handler(event) {
   alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

example2: 사용자이벤트에 핸들러를 연결
$("p").bind("myEvent",function(event,message1,message2) {
 	alert(message1 + ' ' + message2);
 });
$("p").trigger("myEvent",["Hello","World"]);



2 trigger(type, data) #

bind()의 예제 참조



3 toggle(even, odd) #

클릭할때마다 각각 두 개의 함수를 교대로 호출
  • even (Function): 짝수번째 실행될 함수
  • odd (Function): 홀수번째 실행될 함수

Example:
$("p").toggle(
  function(){$(this).addClass("selected");}
 ,function(){$(this).removeClass("selected");}
);



4 serialize #

input 필드의 값을 스트링으로 직렬화

예:

원본데이터
<input type='text' name='name' value='John'/>
<input type='text' name='location' value='Boston'/>
직렬화:
$("input[@type=text]").serialize();
결과:
name=John&location=Boston




5 $.extend( target, prop1, propN ) #

  • target (Object): 확장할 개체
  • prop1 (Object): 첫번째개체로 머지될 개체
  • propN (Object): (optional) 첫번째개체로 머지될 또하나의 개체
예1:
 var settings = { validate: false, limit: 5, name: "foo" };
 var options = { validate: true, name: "bar" };
 jQuery.extend(settings, options);
==>
 settings == { validate: true, limit: 5, name: "bar" }
예2:
var empty = {}
 var defaults = { validate: false, limit: 5, name: "foo" };
 var options = { validate: true, name: "bar" };
 var settings = jQuery.extend(empty, defaults, options);
==>
 settings == { validate: true, limit: 5, name: "bar" }
 empty == { validate: true, limit: 5, name: "bar" }
예3:
somewhere in html land:
<a id="zbang" />

...

somewhere in js land:

var extension = { 
	foo: function() 
	{ 
	    alert(this.anarray); 
	},
	anarray: ['one', 'two', 'three', 'start your engines']
};
$.extend($("#zbang").get(0), extension);	
		
$("#zbang").get(0).foo();

==>
acts accordingly by giving the message: 'one', 'two', 'three', 'start your engines'




6 $.grep( array, fn, inv ) #

array의 값을 필터링하여 리턴

  • array (Array): The Array to find items in.
  • fn (Function): array의 개체마다 실행할 함수
  • inv (Boolean): 함수의 참/거짓을 반대로 적용

Example:
 $.grep( [0,1,2], function(n,i){
   return n > 0;
 });

Result:
 [1, 2]


7 $.map( array, fn ) #

array의 각 개체를 함수fn을 통해 변환하여 리턴 fn함수가 널을 리턴하면 개체를 삭제함

  • array (Array): The Array to translate.
  • fn (Function): The function to process each item against.

Example:
 $.map( [0,1,2], function(n){
   return n + 4;
 });
Result:
 [4, 5, 6]

Example:
 $.map( [0,1,2], function(n){
   return n > 0 ? n + 1 : null;
 });
Result:
 [2, 3]

Example:
 $.map( [0,1,2], function(n){
   return [ n, n + 1 ];
 });
Result:
 [0, 1, 1, 2, 2, 3]


8 $.merge( first, second ) #

두개의 어레이를 병합, 중복된 값은 제거

Example:
 $.merge( [0,1,2], [2,3,4] )
Result:
 [0,1,2,3,4]



9 $.trim( str ) #

str의 앞뒤 공백제거
Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2008-08-27 17:32:32
Processing time 0.2033 sec