jquery에서 위대한 함수들... 유용한
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"]);
3 toggle(even, odd) #
클릭할때마다 각각 두 개의 함수를 교대로 호출
- even (Function): 짝수번째 실행될 함수
- odd (Function): 홀수번째 실행될 함수
$("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) 첫번째개체로 머지될 또하나의 개체
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): 함수의 참/거짓을 반대로 적용
$.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.
$.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]