ȸ¿ø°¡ÀԡžÆÀ̵ð/ºñ¹øã±â
ȨÀ¸·Î

[jQuery] jQuery Quick API
7³â Àü

1. Á¦¾î


¡¡

(1) ¼±ÅÃ

¡¡

.add() : ¿ä¼Ò¸¦ Ãß°¡ ¼±ÅÃÇÑ´Ù. 

$("p").add("div")  // p ¿ä¼Ò¿Í div ¿ä¼Ò¸¦ ¼±ÅÃÇÑ´Ù.

¡¡

.not() : ¼±ÅÃµÈ È®ÀåÁýÇÕ¿¡¼­ ÀÎÀÚ¿¡ ÇØ´çÇÏ´Â ¿ä¼Ò¸¦ Á¦°ÅÇÑ´Ù.

$("p").not(".green")  // p ¿ä¼ÒÀÇ È®ÀåÁýÇÕ¿¡¼­ class°¡ greenÀÎ ¿ä¼Ò¸¦ Á¦°ÅÇÑ´Ù.

¡¡

.children() : ¿ä¼ÒÀÇ °íÀ¯ÇÑ ÀÚ½ÄÀ¸·Î ±¸¼ºµÈ È®Àå ÁýÇÕÀ» ¹ÝȯÇÑ´Ù.

.contents() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ ÀÚ½Ä ¿ä¼Ò¸¦ °¡Á®¿Â´Ù.(text node Æ÷ÇÔ)

$('.container').contents().filter(function(){}); 

// class container ¿ä¼ÒÀÇ ÀڽĿä¼Ò(text Æ÷ÇÔ)¸¦ °¡Á®¿Í filter ÇÑ´Ù. iframe text¸¦ °¡Á®¿Ã¶§ »ç¿ë

¡¡

.first() : ¿ä¼ÒÀÇ Ã¹¹ø° ³ëµå ¹Ýȯ

.last() : ¿ä¼ÒÀÇ ¸¶Áö¸· ³ëµå ¹Ýȯ

.next() : ¿ä¼Ò ÁýÇÕ³»ÀÇ ¹Ù·Î ´ÙÀ½¿¡ ³ª¿À´Â ÇüÁ¦·Î ±¸¼ºµÈ ¿ä¼Ò ¹Ýȯ

.nextAll() : ¿ä¼Ò ÁýÇÕ³»ÀÇ ´ÙÀ½¿¡ ³ª¿À´Â ¸ðµç ÇüÁ¦·Î ±¸¼ºµÈ È®ÀåÁýÇÕ ¹Ýȯ

.nextUntil() : ¼±Åà ¿ä¼ÒºÎÅÍ ÀÎÀÚ°¡ ³ª¿Ã¶§±îÁö ÁýÇÕÀ» ¼±ÅÃÇÑ´Ù.

$("#term").nextUntil("dt").css('background-color', 'red'); 

// id term ¿ä¼ÒºÎÅÍ dt°¡ ³ª¿Ã¶§±îÁö ÇüÁ¦¿ä¼Ò¸¦ °Ë»öÇÏ°í ¹è°æÀ» red·Î º¯°æ

$("#term").nextUntil($("#term2"), "dd").css('background-color', 'red'); 

// id term ¿ä¼ÒºÎÅÍ id term2 ¿ä¼Ò±îÁö Áß dd ¿ä¼Ò¸¸ ¹è°æÀ» red·Î º¯°æ

¡¡

.parent() : ¿ä¼Ò ÁýÇÕÀÇ ¹Ù·Î À§ ºÎ¸ð·Î ±¸¼ºµÈ È®Àå ÁýÇÕ ¹Ýȯ

.parents() : ¿ä¼Ò ÁýÇÕÀÇ ¸ðµç Á¶»ó È®Àå ÁýÇÕÀ» ¹Ýȯ. ºÎ¸ð¿Í »óÀ§ ¸ðµç Á¶»óÀÌ Æ÷ÇÔµÇÁö¸¸ ¹®¼­·çÆ®´Â ¹ÌÆ÷ÇÔ

.parentsUnitl() : ¼±Åà ¿ä¼ÒºÎÅÍ ÀÎÀÚ°¡ ³ª¿Ã¶§±îÁö ºÎ¸ð ÁýÇÕÀ» ¼±ÅÃÇÑ´Ù.

$("#term").parentsUntil("dt").css('background-color', 'red'); 

// id term ¿ä¼ÒºÎÅÍ dt°¡ ³ª¿Ã¶§±îÁö ºÎ¸ð¿ä¼Ò¸¦ °Ë»öÇÏ°í ¹è°æÀ» red·Î º¯°æ

$("#term").parentsUntil($("#term2"), "dd").css('background-color', 'red'); 

// id term ¿ä¼ÒºÎÅÍ id term2 ºÎ¸ð¿ä¼Ò±îÁö Áß dd ¿ä¼Ò¸¸ ¹è°æÀ» red·Î º¯°æ

¡¡

.prev() : ¿ä¼Ò ÁýÇÕÀÇ ¹Ù·Î ÀÌÀü¿¡ ³ª¿À´Â ÇüÁ¦·Î ±¸¼ºµÈ È®Àå ÁýÇÕÀ» ¹Ýȯ

.prevAll() : ¿ä¼Ò ÁýÇÕÀÇ ÀÌÀü¿¡ ³ª¿À´Â ¸ðµç ÇüÁ¦·Î ±¸¼ºµÈ È®Àå ÁýÇÕÀ» ¹Ýȯ

.siblings() : ¿ä¼ÒÀÇ ¸ðµç ÇüÁ¦¸¦ Æ÷ÇÔÇÏ´Â È®Àå ÁýÇÕÀ» ¹Ýȯ.

.eq() : ¼±Åà ¿ä¼ÒÀÇ index¹ø° ¿ä¼Ò¸¦ ¼±ÅÃÇÑ´Ù.

$("div").eq(2).css('background-color', 'red'); // divÀÇ 3¹ø° ¿ä¼ÒÀÇ ¹è°æÀ» º¯°æ

¡¡

.index() : ¼±Åà ¿ä¼Ò¿¡¼­ ÀÎÀÚÀÇ index ¹øÈ£¸¦ ¹Ýȯ

$("div").index($("div:contains('Third')")); 

// div ¾È¿¡¼­ div¿¡ 'Third'¶ó´Â ´Ü¾î¸¦ Æ÷ÇÔÇÏ°í ÀÖ´Â div index °ª

¡¡

$.inArray() <jQuery.inArray()> : ´ë»ó ¹è¿­ ³»ÀÇ °ªÀ»Ã£¾Æ¼­ À妽º¸¦ ¹ÝȯÇÑ´Ù. ; ù¹ø° ¹è¿­Àº 0, ¿ä¼Ò°¡ ¾øÀ¸¸é -1

$.inArray("John", arr);     // arr ¹è¿­¿¡¼­ "John"ÀÇ À妽º¸¦ ã¾Æ¼­ ¹Ýȯ

¡¡

.find() : ¼±ÅÃµÈ ¿ä¼ÒÀÇ Àڽijëµå¿¡¼­ ÀÎÀÚÀÇ ¿ä¼Ò¸¦ ã´Â´Ù.

$("#div").find(ul); // id divÀÇ Àڽijëµå¿¡¼­ ul ¿ä¼Ò¸¦ ã´Â´Ù.

¡¡

.filter() : ¼±ÅÃµÈ ¿ä¼Ò¸¦ Æ÷ÇÔÇÑ ³ëµå¿¡¼­ ÀÎÀÚÀÇ ¿ä¼Ò¸¦ ã´Â´Ù.

$("#div").filter(ul); // id div ³ëµå ÀÚ½ÅÀ» Æ÷ÇÔÇÑ ¿ä¼Ò¿¡¼­ ul ¿ä¼Ò¸¦ ã´Â´Ù.

¡¡

.end() : jQuery ÇÔ¼ö¸¦ ¿¬¼âÀûÀ¸·Î(chain)À¸·Î »ç¿ëÇÒ °æ¿ì ¾ÕÂÊ¿¡ ÀÌ¹Ì ¼±ÅõǾú´ø ¿ä¼Ò·Î µ¹¾Æ°£´Ù.

$('ul:first').find('.foo).css('background-color' , 'red')  // ulÀÇ Ã¹¹ø° ¿ä¼Ò¿¡¼­ class=foo¸¦ ã¾Æ ¹è°æ º¯°æ

.end().find('bar').css('background-color', 'green'); // find¸¦ È£ÃâÇϱâ ÀüÀÇ ¿ä¼Ò($('ul:first))¿¡¼­ class=bar¸¦ ã¾Æ ¹è°æ º¯°æ


.each() : ´ÙÁß ¿ä¼Ò¸¦ ¼ø¼­´ë·Î ¼±ÅÃÇÑ´Ù.

$("div").each(function(i,element){

// div ¿ä¼Ò¸¦ ¼ø¼­´ë·Î ¼±ÅÃÇÑ´Ù.  i: ¼ø¼­ ½ÃÀÛÀº 0 ,  element : ¼±ÅÃµÈ ¿ä¼Ò 

});

¡¡

.has() : ÀÎÀÚ¸¦ °¡Áö°í ÀÖ´Â È®ÀåÁýÇÕÀ» ¼±Åà

$("li").has("ul");   // li ¿ä¼ÒÁß ulÀ» °¡Áö°í ÀÖ´Â ¿ä¼Ò¸¸ ¼±ÅÃ

¡¡

.slice() : ¼±ÅÃÇÑ ¿ä¼Ò ÁýÇÕÀ» ÀÎÀÚÀÇ ¹üÀ§·Î À߶󳽴Ù.

$("img").slice(2).css(...);    

// img ¿ä¼ÒÀÇ ¼¼¹ø° ¿ä¼ÒºÎÅÍ ³¡ ¿ä¼Ò±îÁö css Àû¿ë

$("img").slice(2, 4).css(...);    

// img ¿ä¼ÒÀÇ ¼¼¹ø° ¿ä¼ÒºÎÅÍ 5¹ø° ¿ä¼Ò¸¦ ¸¸³¯¶§±îÁö(4¹ø°) cssÀû¿ë

$("img").slice(-2, -1).css(...);    

// img ¿ä¼ÒÀÇ ³¡¿¡¼­ µÎ¹ø° ¿ä¼ÒºÎÅÍ ³¡¿¡¼­ ù¹ø° ¿ä¼Ò¸¦ ¸¸³¯¶§±îÁö cssÀû¿ë

¡¡

.clone() : ¼±ÅÃµÈ ¿ä¼Ò¸¦ º¹»çÇÑ´Ù. 

$("#img").clone();  // id img DOMÀ» º¹»çÇÑ´Ù.

¡¡

.closest() : ÇöÀç À§Ä¡ÇÑ ¿ä¼Ò¿¡¼­ DOM Æ®¸®¸¦ Ž»öÇÏ¿© ÀÏÄ¡µÈ ¿ä¼Ò¸¦ ¼±ÅÃÇÑ´Ù.

$("#name").closest("ul");   // id name ¿ä¼Ò¿¡¼­ °¡Àå °¡±î¿î ulÀ» ¼±ÅÃÇÑ´Ù.

$("#name").closest("ul", "#code");   // id code ¿ä¼Ò ¾Æ·¡ÀÇ id name ¿ä¼Ò¿¡¼­ °¡Àå °¡±î¿î ulÀ» ¼±ÅÃÇÑ´Ù.

¡¡

.andSelf() : ¼±ÅÃµÈ ±¸Á¶ ¿ä¼Ò¸¦ À̾îºÙÀδÙ.

$('div').find('p').andSelf().css(..);  

// div¿Í ³»ºÎÀÇ p¿ä¼Ò¸¦ ¼±ÅÃÇؼ­ °áÇÕ ÈÄ css Àû¿ë

¡¡

.offsetParent() : À§Ä¡(css:position) ¿ä¼Ò¸¦ ±â¹ÝÀ¸·Î ÇÑ ºÎ¸ð ¿ä¼Ò¸¦ ã´Â´Ù.

$('li.item-a').offsetParent().css(..);   // liÀÇ item-a Ŭ·¡½ºÀÇ css position»ó °¡Àå °¡±î¿î ºÎ¸ð¿ä¼Ò¿¡ css¸¦ Àû¿ë

¡¡

$.grep() <jQuery.grep()> : ¹è¿­ ¿ä¼Ò¸¦ Á¶°Ç¿¡ µû¶ó ÇÊÅ͸µÇÏ¿© Á¦°Å ÇÑ´Ù. ƯÁ¤ ·ÎÁ÷¿¡ ÀÇÇØ true°¡ µÇ´Â °á°ú¸¸ ¹Ýȯ

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

// ¹è¿­ [0,1,2] ¿¡¼­ 0º¸´Ù Å«°ªÀ» ¹Ýȯ [1,2]

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

// ¹è¿­ [0,1,2] ¿¡¼­ 0º¸´Ù Å©Áö ¾ÊÀº °ªÀ» ¹Ýȯ [0]

¡¡

$.proxy() <jQuery.proxy()> : jQueryÀÇ ³×ÀÓ½ºÆäÀ̽º¸¦ °ü¸®ÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù. "this" Å°¿öµå¸¦ ÅëÇÏ¿© ´Ù¸¥ °³Ã¼¸¦ À¯ÁöÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù.

           var app={

                   config : { clickMessage : Hi!" }, // config ¸Þ¼­µå¿¡ clickMessage¸¦ Á¤ÀÇ 

                   clickHandler : function(){  // clicHandler ¸Þ¼­µå ÇÔ¼ö Á¤ÀÇ

                                  alert( this.config.clickMessage);   

                                  // this:app ÀÇ config ¸Þ½ÃÁöÀÇ clickMessage¸¦ ¾Ë¶÷

                       }   

                   }

           $('a).bind('click', app.clickHandler);   

           // ½ÇÇàµÇÁö ¾Ê´Â´Ù. jQuery À̺¥Æ® ¸ðµ¨¿¡ ÀÇÇØ this°¡ app ÀÌ ¾Æ´Ï´Ù.

           $('a').bind('click', .proxy(app, 'clickHandler'));  

           // this Å°¿öµå¸¦ À¯ÁöÇÑä ½ÇÇàµÈ´Ù.


¡¡

(2) »ðÀÔ

¡¡

.after() : ÁöÁ¤ÇÑ ¿ä¼Ò µÚ¿¡ »õ·Î¿î ¿ä¼Ò¸¦ »ðÀÔ 

A.after( B) / AµÚ¿¡ B¸¦ Ãß°¡

¡¡

.insertAfter() : ÁöÁ¤ÇÑ ¿ä¼Ò µÚ¿¡ »õ·Î¿î ¿ä¼Ò¸¦ »ðÀÔ 

A.insertAfter(B) / BµÚ¿¡ A¸¦ Ãß°¡

¡¡

.append() : ÁöÁ¤ÇÑ ¿ä¼Ò µÚ¿¡ ³»¿ë »ðÀÔ

$("div").append("<p>³»¿ë</p>");    // div µÚ¿¡ <p>³»¿ë</p> ¸¦ »ðÀÔÇÑ´Ù.

¡¡

.appenTo() : ÁöÁ¤ÇÑ ³»¿ëÀ» ¿ä¼Ò µÚ¿¡ »ðÀÔ

$("<p>³»¿ë</p>").appendTo($("div"));   // <p>³»¿ë</p>¸¦ div µÚ¿¡ »ðÀÔÇÑ´Ù. 

¡¡

.before() : ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ ¾Õ¿¡ ¿ä¼Ò¸¦ »ðÀÔ 

A.before(B) / A ¾Õ¿¡ B¸¦ Ãß°¡

¡¡

.insertBefore() : ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ ¾Õ¿¡ ¿ä¼Ò¸¦ »ðÀÔ 

A.insertBefore(B) / B ¾Õ¿¡ A¸¦ Ãß°¡

¡¡

.prepend() : ÁöÁ¤ÇÑ ¿ä¼Ò ¾Õ¿¡ ³»¿ë »ðÀÔ

$("div").prepend("<p>³»¿ë</p>");    // div ¾Õ¿¡ <p>³»¿ë</p> ¸¦ »ðÀÔÇÑ´Ù.

¡¡

.prependTo() : ÁöÁ¤ÇÑ ³»¿ëÀ» ¿ä¼Ò ¾Õ¿¡ »ðÀÔ

$("<p>³»¿ë</p>").prependTo($("div"));  

// <p>³»¿ë</p>¸¦ div ¾Õ¿¡ »ðÀÔÇÑ´Ù. 

¡¡

.pushStack() : jQuery ½ºÅÿ¡ DOM ¿ä¼Ò¸¦ Ãß°¡ÇÑ´Ù.

$("#ids").pushStack($("div"));   

// id ids ¿ä¼Ò¿¡ jQuery ½ºÅÿ¡ div ¿ä¼Ò¸¦ Ãß°¡ÇÑ´Ù.

¡¡

.wrap() : $() Çü½ÄÀ¸·Î ¾²´Â ÇÔ¼öÀÇ ¼±ÅÃÇÑ ¿ä¼Ò °¢°¢À» ¹®ÀÚ¿­ ¶Ç´Â °´Ã¼·Î °¨½Ñ´Ù.

$(".inner").wrap('<div class="new" />');   

// class=inner ÁýÇÕ ¿ä¼Ò °¢°¢À» <div class ="new"></div>

$(".inner").wrap(function(){

      return '<div class="new" />');  

// class=inner ÁýÇÕ ¿ä¼Ò °¢°¢À» <div class ="new"></div>

});

¡¡

.unwrap() : ¼±ÅÃÇÑ ¿ä¼Ò ÁýÇÕÀÇ ºÎ¸ð¸¦ Á¦°ÅÇÑ´Ù.

$(".inner").wrap();   // class=inner ÁýÇÕ ¿ä¼ÒÀÇ ºÎ¸ð¸¦ Á¦°ÅÇÑ´Ù. 

¡¡

.wrapAll() : $() Çü½ÄÀ¸·Î ¾²´Â ÇÔ¼öÀÇ ¼±ÅÃÇÑ ¿ä¼Ò Àüü¸¦ ¹®ÀÚ¿­ ¶Ç´Â °´Ã¼·Î °¨½Ñ´Ù.

$(".inner").wrapAll('<div class="new" />');  

// class=inner ÁýÇÕ ¿ä¼Ò Àüü¸¦ <div class ="new"></div>

¡¡

.wrapInner() : $() Çü½ÄÀ¸·Î ¾²´Â ÇÔ¼öÀÇ ¼±ÅÃÇÑ ¿ä¼Ò °¢°¢ÀÇ ³»ºÎ¸¦ ¹®ÀÚ¿­ ¶Ç´Â °´Ã¼·Î °¨½Ñ´Ù.

$(".inner").wrapInner('<div class="new" />');  

// class=inner ÁýÇÕ ¿ä¼Ò °¢°¢ÀÇ ³»ºÎ¸¦ <div class ="new"></div> ·Î °¨½Ñ´Ù


¡¡

(3) »èÁ¦

.detach() : ÁöÁ¤ÇÑ ¿ä¼Ò¸¦ Æ÷ÇÔ ÇÏÀ§ ¿ä¼Ò ¸ðµÎ Á¦°Å

$("div").detach();    // div¸¦ Æ÷ÇÔ ÇÏÀ§ ¿ä¼Ò ¸ðµÎ Á¦°Å

¡¡

.empty() : ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ ÇÏÀ§ ¿ä¼Ò¸¦ Á¦°Å

$("div").empty();    // div ÇÏÀ§ ¿ä¼Ò ¸ðµÎ Á¦°Å

¡¡

.remove() : ÁöÁ¤ÇÑ ¿ä¼Ò¸¦ Æ÷ÇÔ ÇÏÀ§ ¿ä¼Ò ¸ðµÎ Á¦°Å, ¿ä¼Ò¿Í °ü·ÃµÈ À̺¥Æ®¿Í µ¥ÀÌÅÍ ¸ðµÎ Á¦°Å

$("div").remove();    // div Æ÷ÇÔ ÇÏÀ§ ¿ä¼Ò, À̺¥Æ®, µ¥ÀÌÅÍ ¸ðµÎ Á¦°Å


¡¡

(4) º¯°æ, º¯È¯

¡¡

.text() : ÇØ´ç ¿ä¼Ò¿¡ text ¿ä¼Ò¸¦ »ðÀÔ ¶Ç´Â º¯°æÇÑ´Ù.

.html() : ÇØ´ç ¿ä¼Ò¿¡ html ¿ä¼Ò¸¦ »ðÀÔ ¶Ç´Â º¯°æÇÑ´Ù.

.val() : ÇØ´ç ¿ä¼ÒÀÇ value °ªÀ» »ðÀÔ ¶Ç´Â º¯°æÇÑ´Ù.

.replaceAll() : ÇØ´ç ¿ä¼Òµé·Î ÀÎÀÚ ¿ä¼Ò¸¦ ´ëüÇÑ´Ù.

$('<h2>New heading</h2>').empty($("div"));    

// div ¿ä¼Ò¸¦ <h2>New heading</h2> ¿ä¼Ò·Î º¯°æÇÑ´Ù.

¡¡

.replaceWith() : ÇØ´ç ¿ä¼ÒµéÀ» ÀÎÀÚÀÇ ¿ä¼Ò·Î ¹Ù²Û´Ù.  ; replaceAll() °ú ¼±ÅÃ,ÀÎÀÚ(target)ÀÌ ¹Ý´ë

$("div").empty('<h2>New heading</h2>');    

//  <h2>New heading</h2> ¿ä¼Ò·Î div ¿ä¼Ò¸¦ º¯°æ ½ÃŲ´Ù.

¡¡

.toArray() : ¼±ÅÃÇÑ ¿ä¼Ò DOM ÁýÇÕÀ» ÀÚ¹Ù½ºÅ©¸³Æ® ¹è¿­·Î ¸¸µç´Ù.

var arr = $("div").toArray();    //  arr[0] === <div>Hello</div>

¡¡

$.makeArray <jQuery.makeArray()> : jQuery ÁýÇÕÀÇ ¿ä¼Ò °ªÀ» JavaScript ¹è¿­·Î º¯È¯ÇÑ´Ù.

var arr = $.makeArray($("input"));      //  arr[0] === "Hello"

¡¡

$.map() <jQuery.map()>

.map() : ¼±ÅÃµÈ ¹è¿­ ¿ä¼Ò¸¦ ¼ø¼­´ë·Î callback ÇÔ¼ö¸¦ ÅëÇØ ¾ò¾îÁø ¸®ÅÏ°ªÀ» Æ÷ÇÔÇÏ´Â »õ·Î¿î jQuery ¿ÀºêÁ§Æ® »ý¼º

var arr = $("div").map(function(){

      return $(this).text().toUpperCase();      // ¼±ÅÃµÈ ¿ä¼ÒµéÀÇ text°ªÀ» ´ë¹®ÀÚ·Î º¯°æÇÑ´Ù.

});

var arr = $("div").map({width : 10, height: 15} ,function(value, index){

      return index;      //  key¸¦ ¹ÝȯÇÑ´Ù.  ["width", "height"]

});

¡¡

$.globalEval() <jQuery.globalEval()> : ¹®ÀÚ¿­·Î ¸í·É¾î¸¦ ½ÇÇà½ÃÄÑÁØ´Ù.

$.globalEval("var newVar = true;")      // newVar == true

¡¡

$.merge() <jQuery.merge()> : µÎ°³ÀÇ ¹è¿­À» ù¹ø° ¹è¿­¿¡ ÇÕĨ´Ï´Ù.

$.merge([0,1,2],[2,3,4]);  // ù¹ø° ¹è¿­ °á°ú : [0,1,2,2,3,4]

.merge($.merge([],[0,1,2]),[2,3,4]);  // ù¹ø° ¹è¿­ÀÇ °ªÀ» À¯ÁöÇϱâ À§ÇØ »õ·Î¿î ¹è¿­À» ¸¸µç´Ù. 

¡¡

$.trim() <jQuery.trim()> : ¹®ÀÚ¿­ ¾ÕµÚ¿¡ ÀÖ´Â °ø¹é ¹®ÀÚ¸¦ Á¦°ÅÇÏ°í °á°ú ¹Ýȯ

var trimStr = $.trim(str);   // str === "   abc def ff  ";    trimStr === "abc def ff";

¡¡

$.unique() <jQuery.unique()> : element ¹è¿­ÀÇ Áߺ¹µÈ ¸ðµç element¸¦ Á¦°ÅÇÑ´Ù. ; string, number ¹è¿­¿¡¼­´Â µ¿ÀÛ X

var divs = $.unique(divs);      // divsÀÇ Áߺ¹ ¼±ÅÃµÇ¾î µé¾î°£ element¸¦ Á¦°ÅÇÑ´Ù.

¡¡

$.parseJSON() <jQuery.parseJSON()> : JSON¹®ÀÚ¿­À» JavaScript object·Î ¹ÝȯÇÑ´Ù.

var obj = $.parseJSON('{"name":"John"}'); // ¹®ÀÚ¿­ {"name":"John"}À» JavaScript object·Î º¯È¯ÇÑ´Ù.

alert(obj.name==="John");  // JavaScriptObjectÀÎ obj¿¡¼­ name ¿ä¼ÒÀÎ John

cf.) Çü½ÄÀÌ ¾î±ß³­ JSON ¹®ÀÚ¿­À» ÀÎÀÚ·Î »ç¿ëÇϸé exceptionÀÌ ¹ß»ýÇÑ´Ù. ¹®ÀÚ¿­ÀÇ key ¿Í value ´Â ½Öµû¿ÈÇ¥("")¸¦ »ç¿ëÇØ¾ß ÇÑ´Ù.

¡¡

$.parseXML() <jQuery.parseXML()> : À¯È¿ÇÑ XML¹®¼­¸¦ ÆÄ»óÇÑ´Ù.

$title = $.parseXML(xml).find("title");  // xml ÆÄÀÏ¿¡¼­ titleÀÇ °ªÀ» ã´Â´Ù.


¡¡

(5) È®Àå

¡¡

$.noop() <jQuery.noop()> : ºñ¾îÀÖ´Â ÇÔ¼ö (function(){})

¡¡

$.noConflict() <jQuery.Conflict()> : ´Ù¸¥ JavaScript ¶óÀ̺귯¸®¿Í ÇÔ²² »ç¿ëÇÒ¶§ $ÀÇ Ãæµ¹À» ¸·±âÀ§ÇØ »ç¿ë

¡¡

$.sub() <jQuery.sub()> : »õ·Î¿î jQuery ÇÔ¼ö¸¦ Á¤ÀÇÇÒ¶§, ³×ÀÓ½ºÆäÀ̽ºÀÇ Ãæµ¹·Î ´Ù¸¥ °³¹ßÀÚÀÇ ÇÔ¼ö¿¡ ¿µÇâÀ» ÁÖÁö ¾Êµµ·Ï ĸ½¶È­µÈ Ç÷¯±×ÀÎÀ» ¸¸µé°íÀÚ ÇÒ¶§ $.sub() ·Î º¹»çÇÏ¿© »ç¿ë

  (function(){

    var sub$ = jQuery.sub();

    sub$.fn.myCustomMethod = function(){

      return 'just for me';

    };


¡¡

    sub$(document).ready(function() {

      sub$('body').myCustomMethod() // 'just for me'

    });

  })();


¡¡

  typeof jQuery('body').myCustomMethod // undefined

¡¡

$.extend() <jQuery.extend()> : ù¹ø° ÀÎÀÚ¿¡¼­ µÎ¹ø° ÀÎÀÚ¸¦ º´ÇÕÇϸç, È®ÀåÇÑ´Ù.

µÎ¹ø° ÀÎÀÚ°ªÀÌ Ã¹¹ø° ÀÎÀÚ°ªÀÇ °°Àº ¿É¼ÇÀ» ´ëüÇϸç È®Àå

         var object1 = { apple : 0,  banana : {weight : 52, price : 100}, cherry : 97 };

         var object2 = { banana : {price : 200},  durian : 100 };

         $.extend(object1, object2);

°á°ú : object1 = { apple: 0, banana: { price: 200 }, cherry: 97, durian: 100 };


ù¹ø° ÀÎÀÚ°ªÀÇ ¿øº» °ªÀ» À¯ÁöÇÏ¸ç º´ÇÕ

         var object1 = {  apple: 0,  banana: {weight: 52, price: 100},  cherry: 97};

         var object2 = {  banana: {price: 200},  durian: 100};

         $.extend(true, object1, object2

°á°ú : object1 == { apple: 0, banana: { weight: 52, price: 200 }, cherry: 97, durian: 100 }


¿ä¼Ò¿¡ Àû¿ëÇÒ ¸í·É¾î È®Àå

            $.fn.extend({

                 myMethod : function(){...}

            });

            -> $("div").myMethod();


ÇÔ¼ö ½ÇÇà JQuery ¸í·É¾î È®Àå

            $.extend({

                 myMethod2 : function(){...}

            });

            -> $.myMethod();


¡¡

2. ¼Ó¼º(CSS), ÃßÃâ


¡¡

(1) ¼Ó¼º(CSS)

¡¡

.addClass() : ÁöÁ¤ÇÑ ¿ä¼Ò¿¡ class °ªÀ» Ãß°¡ÇÑ´Ù.

$("p").addClass("name");  // class = "name" Ãß°¡


.hasClass() : ÁöÁ¤ÇÑ ¿ä¼Ò¿¡ class À¯¹«¸¦ È®ÀÎÇÑ´Ù.

if($("p").hasClass("name")==true)  // class °¡ "name"ÀÎÁö È®ÀÎ true/false

¡¡

.removeClass() : ÁöÁ¤ÇÑ ¿ä¼Ò¿¡ class °ªÀ» Á¦°ÅÇÑ´Ù.

 $("p").removeClass("name");  // class = "name"À» Á¦°Å

¡¡

.toggleClass() : ÁöÁ¤ÇÑ ¿ä¼Ò¿¡ class¸¦ Ãß°¡/Á¦°Å

$("p").toggleClass("name");  // class = "name"ÀÌ ÀÖÀ¸¸é Á¦°Å / ¾øÀ¸¸é Ãß°¡

¡¡

.attr() 

1) ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ ¼Ó¼º°ªÀ» ÀÔ·Â ¶Ç´Â º¯°æÇÑ´Ù.

$("a").attr("href", "http://www.googlec.co.kr");  // a ¿ä¼ÒÀÇ href °ªÀ» º¯°æÇÑ´Ù.

$("#content").attr({id:'content01', class:'style1'});  // id content ¿ä¼ÒÀÇ id¿Í class °ªÀ» º¯°æÇÑ´Ù.

2) ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ ¼Ó¼º°ªÀ» °¡Á®¿Â´Ù.

$("a").attr("href");     // a ¿ä¼ÒÀÇ hrefÀÇ °ªÀ» °¡Á®¿Â´Ù.

¡¡

.removeAttr() : ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ ¼Ó¼º°ªÀ» Á¦°ÅÇÑ´Ù.

$("a").removeAttr("href");  // a ¿ä¼ÒÀÇ "href" ¼Ó¼º°ªÀ» Á¦°ÅÇÑ´Ù.

¡¡

.prop() : .attr()°ú µ¿ÀÏÇϳª, boolean °ªÀ» »ç¿ëÇÏ´Â ¼Ó¼º¿¡ »ç¿ëÇÑ´Ù. checked, selected, disabled

.removeProp() : removeProp()°ú µ¿ÀÏÇϳª, boolean °ªÀ» »ç¿ëÇÏ´Â ¼Ó¼º¿¡ »ç¿ëÇÑ´Ù. checked, selected, disabled

.css() 

1) ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ css °ªÀ» »ðÀÔ ¶Ç´Â º¯°æÇÑ´Ù..

$("div").css("color", 'red');  // div ¿ä¼ÒÀÇ ±ÛÀÚ»öÀ» red·Î ¼³Á¤ÇÑ´Ù.

$("div").css({color:'red', border:'1px solid blue'});  // µ¿½Ã¿¡ ¿©·¯°³ÀÇ °ªÀ» ¼³Á¤ÇÒ ¼ö ÀÖ´Ù.

2) ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ ¼Ó¼º°ªÀ» °¡Á®¿Â´Ù.

 $("div").css("backgroundColor");     // div ¿ä¼ÒÀÇ backgroud-Color °ªÀ» °¡Á®¿Â´Ù.

cf.) 

cssÀÇ ¼Ó¼º¸í°ú jQuery¿¡¼­ ¾²´Â ¼Ó¼º¸íÀº Çü½ÄÀÌ Á¶±Ý ´Ù¸£´Ù.

css : background-color , jQuery : backgroundColor

css : padding-left, jQuery : paddingLeft

¡¡

.width() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ ÇöÀçÀÇ °è»êµÈ ³ÐÀ̸¦ ¾ò°Å³ª ³ÐÀÌ °ªÀ» ¼³Á¤ÇÑ´Ù.

$("div").width();  // div ÀÇ ÇöÀç ³ÐÀÌ °ª (¼ýÀÚ·Î ¹Ýȯ, .css('width')´Â ¼ýÀÚµÚ¿¡ px°¡ ºÙ¾î ¹Ýȯ 400px)

$("div").width(30);  // divÀÇ ³ÐÀ̸¦ 30À¸·Î ¼³Á¤ÇÑ´Ù. { 30, 30px, 30%, auto }

¡¡

.innerWidth() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ paddingÀ» Æ÷ÇÔÇÑ ³ÐÀ̸¦ ¹ÝȯÇÑ´Ù. (border Á¦¿Ü)

$("div").innerWidth();  // div ÀÇ paddingÀ» Æ÷ÇÔÇÑ ÇöÀç ³ÐÀÌ


¡¡

¡¡

.outerWidth() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ padding °ú border¸¦ Æ÷ÇÔÇÑ ³ÐÀ̸¦ ¹ÝȯÇÑ´Ù. (ÀÎÀÚ°ª true ¸é margin Æ÷ÇÔ)

$("div").outerWidth();  // div ÀÇ padding°ú border Æ÷ÇÔÇÑ ÇöÀç ³ÐÀÌ

$("div").outerWidth(true);  // div ÀÇ padding°ú border, margin Æ÷ÇÔÇÑ ÇöÀç ³ÐÀÌ

¡¡

.height() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ ÇöÀçÀÇ °è»êµÈ ³ôÀ̸¦ ¾ò°Å³ª ³ôÀÌ °ªÀ» ¼³Á¤ÇÑ´Ù.

$("div").height();  // div ÀÇ ÇöÀç ³ôÀÌ °ª (¼ýÀÚ·Î ¹Ýȯ, .css('height')´Â ¼ýÀÚµÚ¿¡ px°¡ ºÙ¾î ¹Ýȯ 400px)

$("div").height(30);  // divÀÇ ³ôÀ̸¦ 30À¸·Î ¼³Á¤ÇÑ´Ù. { 30, 30px, 30%, auto }

¡¡

.innerHeight() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ paddingÀ» Æ÷ÇÔÇÑ ³ôÀ̸¦ ¹ÝȯÇÑ´Ù. (border Á¦¿Ü)

$("div").innerHeight();  // div ÀÇ paddingÀ» Æ÷ÇÔÇÑ ÇöÀç ³ôÀÌ

¡¡

.outerHeight() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ padding°ú border¸¦ Æ÷ÇÔÇÑ ³ôÀ̸¦ ¹ÝȯÇÑ´Ù. (ÀÎÀÚ°ª true¸é margin Æ÷ÇÔ)

$("div").outerHeight();  // div ÀÇ padding°ú border¸¦ Æ÷ÇÔÇÑ ÇöÀç ³ôÀÌ

$("div").outerHeight(true);  // div ÀÇ padding°ú border, marginÀ» Æ÷ÇÔÇÑ ÇöÀç ³ôÀÌ

¡¡

.data() 

1) ÁöÁ¤ÇÑ ¿ä¼Ò¿¡ °ªÀ» »ðÀÔ ¶Ç´Â º¯°æÇÑ´Ù.

$("div").data("foo", '52');  // div ¿ä¼Ò¿¡ "foo" ¶ó´Â key·Î 52¸¦ »ðÀÔÇÑ´Ù.

$("div").data("bar", {color:'red', border:'1px solid blue'});  // "bar" ¶ó´Â key·Î ¹è¿­ »ðÀÔ

$("div").data({baz : [1,2,3]});  // baz ¹è¿­ »ðÀÔ

2) ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ °ªÀ» °¡Á®¿Â´Ù.

$("div").data("foo");  // div ¿ä¼Ò¿¡ "foo"¶ó´Â key·Î ÀúÀåµÈ °ªÀ» °¡Á®¿Â´Ù.

$("div").data();  // div ¿ä¼Ò¿¡ Àüü °ªÀ» °¡Á®¿Â´Ù. {foo:52, bar:{color....}, baz:[1,2,3,4]}


$.data() <jQuery.data()> : ù¹ø° ÀÎÀÚÀÇ ¿ä¼Ò¿¡ µÎ¹ø° ÀÎÀÚ¸¦ Å°·Î ¼¼¹ø° °ªÀ» ÀúÀåÇÑ´Ù. .data()¿Í µ¿ÀÏ

$.data(document.body, "foo",'52');    // ÆäÀÌÁö body ¿ä¼Ò¿¡ foo¸¦ Å°·Î 52 »ðÀÔ


.removeData() : ÁöÁ¤ÇÑ ¿ä¼Ò¿¡ µ¥ÀÌÅ͸¦ Á¦°ÅÇÑ´Ù.

$("div").data("foo");  // div ¿ä¼Ò¿¡ "foo" ¶ó´Â keyÀÇ µ¥ÀÌÅ͸¦ Á¦°ÅÇÑ´Ù.

¡¡

$.removeData() <jQuery.removeData()> : ÁöÁ¤ÇÑ ¿ä¼Ò¿¡ µ¥ÀÌÅ͸¦ Á¦°ÅÇÑ´Ù.

$.data($("div"), "foo");  // div ¿ä¼Ò¿¡ "foo" ¶ó´Â keyÀÇ µ¥ÀÌÅ͸¦ Á¦°ÅÇÑ´Ù.

¡¡

$.hasData() <jQuery.hasData()> : $.data()¿¡ ÀÇÇØ ÀúÀåµÈ ÀÓÀÇÀÇ °ªµéÀÌ ÀÖ´ÂÁö È®ÀÎÇÑ´Ù.  true / false

if(.$.hasData(document.body)==true)   // document.body¿¡ data°¡ ÀÖÀ¸¸é true  


¡¡

(2) ̧̉

¡¡

$.browser <jQuery.browser> : JQuery°¡ ½ÇÇàµÇ´Â browserÀÇ version, browser Á¾·ù¸¦ Map Çü½ÄÀ¸·Î ¸®ÅÏÇÑ´Ù.

$.each($.browser,function(i, val){

           result += i +":" + val;     //   °á°ú msie:true version:7.0    

}

cf.)

$.browser.version : ºê¶ó¿ìÀúÀÇ ¹öÀüÀ» ¹®ÀÚ¿­·Î ¸®ÅÏ

$.browser.safari : »çÆĸ® ºê¶ó¿ìÀú ¿©ºÎ true & false ¸®ÅÏ

$.browser.opera : ¿ÀÆä¶ó ºê¶ó¿ìÀú ¿©ºÎ true & false ¸®ÅÏ

$.browser.msie : Internet Explorer ºê¶ó¿ìÀú ¿©ºÎ true & false ¸®ÅÏ

$.browser.mozilla : Mozilla ºê¶ó¿ìÀú ¿©ºÎ true & false ¸®ÅÏ


$.support <jQuery.support> : ºê¶ó¿ìÀú¸¶´ÙÀÇ ±â´ÉÀÇ Â÷À̳ª ¹ö±×µîÀÇ Á¤º¸¸¦ ±¸Á¶Ã¼·Î ¹Ýȯ ; 1.3 ÀÌÈÄ ¹öÀü¿¡¼­´Â $.browser ´ë½Å $.support¸¦ »ç¿ë ±ÇÀå

¿É¼Ç°ª : http://api.jquery.com/jQuery.support/

                       

.size() : ¼±ÅÃÇÑ ¿ä¼Ò ¹è¿­ÀÇ ±æÀ̸¦ ¹ÝȯÇÑ´Ù.

var num = $("div").size();  // numÀº divÀÇ ¹è¿­ Å©±â¸¦ ¼ýÀÚ·Î ¹ÝȯÇÑ´Ù. 

¡¡

.length : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ ¹è¿­ÀÇ ±æÀ̸¦ ¹ÝȯÇÑ´Ù.  (¼±Åà ¿ä¼Ò¿¡ "" ´Â Àû¿ëÀ̾ȵȴÙ. '' »ç¿ë)

var num = $('div').length;  // numÀº divÀÇ ¹è¿­ Å©±â¸¦ ¼ýÀÚ·Î ¹ÝȯÇÑ´Ù 

¡¡

.offSet() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ Àüü ¹®¼­ ³»(document)¿¡¼­ÀÇ left, top ÁÂÇ¥¸¦ ±¸ÇÑ´Ù.

ar offset = $('div:last').offset();  // div ¸¶Áö¸· ¿ä¼ÒÀÇ left, top ÁÂÇ¥ ¹Ýȯ offset.left / offset.top

¡¡

.position() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ ºÎ¸ð¿ä¼Ò¸¦ ±âÁØÀ¸·Î left, top ÁÂÇ¥¸¦ ±¸ÇÑ´Ù.

var position = $('div:last').position();  // div ¸¶Áö¸· ¿ä¼ÒÀÇ ºÎ¸ð·ÎºÎÅÍÀÇ left, top ÁÂÇ¥ ¹Ýȯ position.left / position.top

¡¡

.scrollLeft() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ ½ºÅ©·Ñ¹ÙÀÇ ¼öÆò À§Ä¡(xÁÂÇ¥)¸¦ ¾ò°Å³ª º¯°æÇÑ´Ù.

var x= $('div:last').scrollLeft();  // div ¸¶Áö¸· ¿ä¼ÒÀÇ ÇöÀç ¼öÆò ½ºÅ©·Ñ xÁÂÇ¥¸¦ ¹ÝȯÇÑ´Ù.

var x= $('div:last').scrollLeft(300); // div ¸¶Áö¸· ¿ä¼ÒÀÇ ¼öÆò ½ºÅ©·Ñ xÁÂÇ¥¸¦ 300À¸·Î À̵¿ÇÑ´Ù.

¡¡

.scrollTop() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ ½ºÅ©·Ñ¹ÙÀÇ ¼öÁ÷ À§Ä¡(yÁÂÇ¥)¸¦ ¾ò°Å³ª º¯°æÇÑ´Ù.

var x= $('div:last').scrollTop();  // div ¸¶Áö¸· ¿ä¼ÒÀÇ ÇöÀç ¼öÁ÷ ½ºÅ©·Ñ yÁÂÇ¥¸¦ ¹ÝȯÇÑ´Ù.

var x= $('div:last').scrollTop(300); // div ¸¶Áö¸· ¿ä¼ÒÀÇ ¼öÁ÷ ½ºÅ©·Ñ yÁÂÇ¥¸¦ 300À¸·Î À̵¿ÇÑ´Ù.

¡¡

$.type() <jQuery.type()> : ÀÎÀÚÀÇ objÀÇ typeÀ» ¹ÝȯÇÑ´Ù.

$.type(undefined) === "undefined" //

$.type() === "undefined" //

$.type(null) === "null" //

$.type(true) === "boolean" //

$.type(3) === "number" //

$.type("test") === "string" //

$.type(function(){}) === "function" //

$.type([]) === "array" //

$.type(new Date()) === "date" //

$.type(/test/) === "regexp" //

¡¡

$.now() <jQuery.now> : ÇöÀç ½Ã°£À» number·Î ¹Ýȯ

$.now() // result : 1340954729007     (new Data).getTime(); 


$.fx.interval<jQuery.fx.interval> : ºê¶ó¿ìÁ® ¾Ö´Ï¸ÞÀÌ¼Ç ÇÁ·¹ÀÓ Á¶Àý

$.fx.interval = 1000;    // ÇÁ·¹ÀÓÀ» 1000À¸·Î º¯°æÇÑ´Ù.

¡¡

$.fx.off<jQuery.fx.off> : ¸ðµç ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ Àü¿ªÀûÀ¸·Î ²ö´Ù.

$.fx.off = true;    // ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ ²ö´Ù.


¡¡

3. °ËÁõ


¡¡

.is() : ÇöÀç »óŸ¦ È®ÀÎÇÏ¿© ¹ÝȯÇÑ´Ù. true / false

var chk = $("div").is(":animated");   // chk ´Â true, false

¡¡

$.contains() <jQuery.contains()> : ù¹ø° ÀÎÀÚ ¿ä¼Ò¿¡ µÎ¹ø° ÀÎÀÚ ¿ä¼Ò¸¦ °¡Áö°í ÀÖ´ÂÁö È®ÀÎÇÑ´Ù.

$.contains($("#name"), $("#code"))   // #name ¿ä¼Ò ¾Æ·¡¿¡ #code ¿ä¼Ò°¡ ÀÖ´Ù¸é true

¡¡

$.isArray() <jQuery.isArray()> : ÀÎÀÚ°¡ ¹è¿­ÀÎÁö È®ÀÎÇÑ´Ù.

$.isArray(arr)   // arrÀÌ Array ÀÎÁö üũ  true / false

¡¡

$.isEmptyObject() <jQuery.isEmptyObject()> : ÀÎÀÚ°¡ empty ÀÎÁö üũÇÑ´Ù.

$.isEmptyObject(arr)   // arr ÀÌ empty ÀÎÁö üũ  empty : true / false

¡¡

$.isFunction() <jQuery.isFunction()> : ÀÎÀÚ°¡ JavaScript ÇÔ¼öÀÎÁö üũÇÑ´Ù.

$.isFunction(function(){});  // function(){}°¡ ÇÔ¼öÀÎÁö üũÇÑ´Ù. : true / false

¡¡

$.isPlainObject() <jQuery.isPlainObject()> : ÀÎÀÚ°¡ plain ObjectÀÎÁö È®ÀÎÇÑ´Ù. (Plain Object : "{}" ³ª "new Object"·Î ¸¸µé¾îÁø)  ; IE8¿¡¼­´Â Error

$.isPlainObject({});   // {}°¡ Plain Object ÀÎÁö üũ ÇÑ´Ù. true /false

¡¡

$.isWindow() <jQuery.isWindow()> : Window ÀÎÁö ÆǺ°ÇÑ´Ù.

$.isWindow(window);   // window°¡ Window ÀÎÁö üũ true / false

¡¡

$.isXMLDoc() <jQuery.isXMLDoc()> : XML ¹®¼­ÀÇ DOM ³ëµå ¶Ç´Â XML ¹®¼­ÀÎÁö üũ

$.isXMLDoc(document);   // document°¡ xml ¹®¼­ÀÎÁö È®ÀÎ : false


¡¡

4. È¿°ú

¡¡

.animate() : ÇØ´ç °´Ã¼ÀÇ CSS º¯È­ È¿°ú¸¦ ÁØ´Ù.  /$('p').animate({CSS Map}, {options});

$('p).animate({color:'white', font-size : 22px}, {duration : 400, easing : 'ease-in', 

complete : function(){....}});  {queue:false}

¡¡

.delay() : ÇØ´ç ½Ã°£¸¸Å­ ½ÇÇàÀ» delay ½ÃŲ´Ù.

$("div").slideDown().delay(5000).slideUp();  // id div ¿ä¼Ò¸¦ ½½¶óÀÌµå ´Ù¿î ÈÄ 5ÃÊ ÈÄ ½½¶óÀÌµå ¾÷ ÇÑ´Ù.

¡¡

.stop() : ½ÇÇàÁßÀÎ ¾Ö´Ï¸ÞÀ̼ÇÀ» ÁßÁöÇÑ´Ù.

$("div").stop();   // divÀÇ Å¥ÀÇ ¾Ö´Ï¸ÞÀ̼ÇÀ» ¸ØÃá´Ù.

¡¡

.show() : ÇØ´ç ¿ä¼Ò¸¦ º¸¿©ÁØ´Ù.

$("div").show();  // div °¡ ³ªÅ¸³­´Ù.

$("div").show(1000);  // div °¡ 1ÃÊ¿¡ °ÉÃļ­ ³ªÅ¸³­´Ù.

¡¡

.hide() : ÇØ´ç ¿ä¼Ò¸¦ ¼û±ä´Ù.

$("div").hide();  // div°¡ »ç¶óÁø´Ù.

$("div").show(1000);  // div °¡ 1ÃÊ¿¡ °ÉÃļ­ »ç¶óÁø´Ù.

¡¡

.toggle() : ÇØ´ç ¿ä¼Ò°¡ show »óŸé hide() / hide »óŸé show() ½ÇÇà

$("div").toggle();    // div°¡ hide »óŸé show() / show »óŸé hide()ÇÑ´Ù.

$("div").toggle(1000);   // div °¡ 1ÃÊ¿¡ °ÉÃļ­ toggle() ÇÑ´Ù.

¡¡

.fadeIn() : ¼­¼­È÷ ³ªÅ¸³ª°Ô ÇÑ´Ù.

$("div").fadeIn(); // div°¡ ¼­¼­È÷ ³ªÅ¸³­´Ù.

$("div").fadeIn("slow");  // div°¡ õõÈ÷ ¼­¼­È÷ ³ªÅ¸³­´Ù.

$("div").fadeIn(3000");   // div°¡ 3ÃÊ¿¡ °ÉÃļ­ ¼­¼­È÷ ³ªÅ¸³­´Ù.

¡¡

.fadeOut() : ¼­¼­È÷ »ç¶óÁö°Ô ÇÑ´Ù.

.fadeToggle() : show »óŸé fadeOut(), hide »óŸé fadeIn()ÀÌ ½ÇÇàµÈ´Ù.

.fadeTo() : ÁÖ¾îÁø ½Ã°£µ¿¾È ÁÖ¾îÁø Åõ¸íµµ·Î º¯È­ÇÑ´Ù.

$("div").fadeTo("slow", 0.15);  // õõÈ÷ Åõ¸íµµ 0.15 ·Î º¯È­

$("div").fadeTo("slow", 0.15);  // õõÈ÷ Åõ¸íµµ 0.15 ·Î º¯È­

¡¡

.slideDown() : ¼±Åà ¿ä¼Ò°¡ ½½¶óÀÌµå µÇ¾î ³»·Á¿Â´Ù.

$("div").slideDown(); // div°¡ ¾Æ·¡·Î ³»·Á¿Â´Ù.

$("div").slideDown("slow");  // div°¡ õõÈ÷ ¾Æ·¡·Î ³»·Á¿Â´Ù..

$("div").slideDown(3000");   // div°¡ 3ÃÊ¿¡ °ÉÃļ­ ¾Æ·¡·Î ³»·Á¿Â´Ù.

¡¡

.slideUp() : ¼±Åà ¿ä¼Ò°¡ ½½¶óÀÌµå µÇ¾î ¿Ã¶ó°£´Ù.

.slideToggle() : ¼±Åà ¿ä¼Ò°¡ slideDown »óŸé slideUp(), slideUp »óŸé slideDown()À» ½ÇÇà

.queue() : ¾Ö´Ï¸ÞÀ̼ÇÀÌ chainÀ¸·Î ¿¬¼ÓÀûÀ¸·Î ¿¬°áµÉ ¶§, ¾Ö´Ï¸ÞÀ̼ÇÀÌ ¾Æ´Ñ ½ÇÇà ÇÔ¼ö¸¦ Å¥¿¡ ÀúÀå ÇÑ´Ù.(ex: class ¼Ó¼º º¯°æ)

.dequeue() : queue¿¡ ½×¿©ÀÖ´Â ³ª¸ÓÁö ÇÔ¼ö¸¦ ½ÇÇàÇÑ´Ù.

$("div").show("slow").animate({left:'+=200'}. 2000)  // id div ¿ä¼Ò°¡ õõÈ÷ ³ªÅ¸³­ ÈÄ, 2ÃÊ°£ ¿À¸¥ÂÊÀ¸·Î 200À̵¿ÇÑ´Ù

$("div").queue(function(){  // queueÀÇ ÇÔ¼ö¸¦ È£ÃâÇÑ´Ù.

      $(this).addClass("newcolor");  // id div ¿ä¼ÒÀÇ class¸¦ newcolor µî·Ï

       $(this).dequeue(); // ´ÙÀ½ ¾Ö´Ï¸ÞÀÌ¼Ç ½ÇÇà

});

 $("div").animate({left:'-=200'}, 500);  // 05ÃÊ°£ ¿ÞÂÊÀ¸·Î 200 À̵¿ÇÑ´Ù.

¡¡

.clearQueue() : queue¿¡ ½×ÀÎ °ÍÀ» »èÁ¦ÇÑ´Ù. ÇöÀç ½ÇÇàÁßÀÎ queue´Â °è¼Ó ½ÇÇàµÈ´Ù.   

$("#stop").click(function(){  // id stop ¿ä¼Ò¸¦ Ŭ¸¯Çϸé

       $("div").clearQueue();  // divÀÇ queue°¡ ºñ¿öÁø´Ù. ½ÇÇàÁßÀΠť´Â ÁøÇàÇÑ´Ù.

});


¡¡

5. Event


¡¡

(1) event Á¦¾î

¡¡

.bind() : event°¡ ¹ß»ýÇÏ¸é ½ÇÇàµÉ ÇÔ¼ö¸¦ ÁöÁ¤ÇÑ´Ù. (ÀÌ¹Ì »ý¼ºµÈ DOM¿¡ ´ëÇÏ¿©)

$("#image").bind("mousedown", function(){ // id image ¿ä¼Ò¿¡ ¸¶¿ì½º¸¦ Ŭ¸¯ÇßÀ» ¶§, ÇØ´ç ÇÔ¼ö ½ÇÇà ÁöÁ¤ 

¡¡

});

¡¡

.unbind() : bind()¸¦ ÇØÁ¦ÇÑ´Ù.

.live() : µ¿ÀûÀ¸·Î »ý¼ºµÈ DOM °´Ã¼µéÀÇ À̺¥Æ®¸¦ ¿¬°áÇÑ´Ù. (À̺¥Æ® ¹öºí ¹ß»ý °¡´É)

$("#image").live("click", function(){  // id image ¿ä¼Ò¿¡ ¸¶¿ì½º¸¦ Ŭ¸¯ÇßÀ» ¶§, ÇØ´ç ÇÔ¼ö ½ÇÇà ÁöÁ¤ 

});

¡¡

.die() : live() Á¦°Å

.delegate() : µ¿ÀûÀ¸·Î »ý¼ºµÈ DOM °´Ã¼µéÀÇ À̺¥Æ®¸¦ ¿¬°áÇÑ´Ù. (À̺¥Æ® ¹öºí ¹æÁö)

$("#image").delegate("td", "click", function(){ // id image ¿ä¼Ò ¹ØÀÇ 'td'¿¡ ¸¶¿ì½º¸¦ Ŭ¸¯ÇßÀ» ¶§, ÇØ´ç ÇÔ¼ö ½ÇÇà ÁöÁ¤ 

});

¡¡

.undelegate() : delegate() Á¦°Å

.on() : µ¿ÀûÀ¸·Î »ý¼ºµÈ DOM °´Ã¼µéÀÇ À̺¥Æ®¸¦ ¿¬°áÇÑ´Ù. (1.7 ÀÌÈÄ ¹öÀü)

$("#image").on("click", "td", function(){ // id image ¿ä¼Ò ¹ØÀÇ 'td'¿¡ ¸¶¿ì½º¸¦ Ŭ¸¯ÇßÀ» ¶§, ÇØ´ç ÇÔ¼ö ½ÇÇà ÁöÁ¤ 

});

$("#image").on("click", "td",{foo: "bar"}, function(event){

    alert(event.data.foo);

// id image ¿ä¼Ò ¹ØÀÇ 'td'¿¡ ¸¶¿ì½º¸¦ Ŭ¸¯ÇßÀ» ¶§, {foo:"bar"}¸¦ event¿¡ ³Ö¾î ÇÔ¼ö ½ÇÇà

}); 

¡¡

.off() : on() Á¦°Å (1.7 ÀÌÈÄ ¹öÀü)

.one() : bind() ÇÔ¼öó·³ ¼±ÅÃµÈ À̺¥Æ®¸¦ ÁöÁ¤ÇÑ´Ù. ÇÏÁö¸¸ µü Çѹø¸¸ À̺¥Æ®°¡ ½ÇÇàµÈ´Ù.

.trigger() : ¼±ÅÃµÈ ¿ä¼ÒÀÇ À̺¥Æ®¸¦ ¹ß»ý½ÃŲ´Ù.

$("#img").trigger("click")    // id img ¿ä¼Ò¿¡ click À̺¥Æ®¸¦ ¹ß»ý½ÃŲ´Ù.

¡¡

.triggerHandler() : trigger() ÇÔ¼ö¿Í ºñ½ÁÇÏ°Ô µ¿ÀÛÇÑ´Ù.

- form submission¿¡´Â µ¿ÀÛÇÏÁö ¾Ê´Â´Ù.

 - ¼±ÅÃµÈ ¿ä¼ÒµéÁß °¡Àå ù¹ø° ¿ä¼Ò¸¸ ¿µÇâÀ» ¹ÌÄ£´Ù.

- ºê¶ó¿ìÀú ±âº»µ¿ÀÛ, ¹öºí¸µ, live Events´Â ÀϾÁö ¾Ê´Â´Ù.

$('element").¸í·É¾î(function(event){  // element ¿ä¼Ò¿¡ ¸í·É¾î ½ÇÇà½Ã ÇÔ¼ö µ¿ÀÛ

});


¡¡

(2) À¥ ºê¶ó¿ìÁ® Event

¡¡

.load() : ¹®¼­°¡ ºÒ·ÁÁ³À» ¶§

.unload() : ¹®¼­°¡ ´ÝÇûÀ» ¶§

.ready() : DOMÀÌ ¸ðµÎ Áغñ µÇ¾úÀ» ¶§ ÇÔ¼ö ½ÇÇà

$.holdReady() <jQuery.holdReady()> : DOMÀÌ ·ÎµåµÇ´Â °ÍÀ» Áö¿¬½ÃÄÑÁØ´Ù. ; js ÆÄÀÏÀ» ºÒ·¯µéÀÌ°í µ¿ÀÛÀ» ÇÒ¶§, js°¡ ·ÎµåµÇÁö ¾ÊÀº ½ÃÁ¡¿¡ DOMÀÌ ·Îµå µÇ´Â°ÍÀ» ¹æÁöÇØÁØ´Ù. / head ¿µ¿ª¿¡ ¼±¾ðÇÏ´Â°Ô ÁÁ´Ù.

$.holdReady(true); // DOMÀÌ ·ÎµåµÇ´Â °ÍÀ» ¸ØÃá´Ù.

$.getScript("myplugin.js", function(){ // myplugin.js ÆÄÀÏÀ» °¡Á®¿Â´Ù.

      .holdReady(false); // ÆÄÀÏ ·Îµå°¡ ¼º°øÇϸé DOMÀ» ±¸¼ºÇÑ´Ù.

});

¡¡

.resize() : â Å©±â°¡ º¯°æµÇ¾úÀ» ¶§ ÇÔ¼ö ½ÇÇà

.scroll() : HTML ¹®¼­°¡ ½ºÅ©·Ñ µÇ¾úÀ» ¶§

.error() : ¼±ÅÃµÈ °³Ã¼(images, window, document µî)°¡ Á¤È®ÇÏ°Ô ·Îµå(load)µÇÁö ¾ÊÀ» °æ¿ì ¹ß»ý ¿À·ù À̺¥Æ®

<img src="missing.png" alt="Book" id="book" />

$('#book').error(function(){ // À̹ÌÁö°¡ ·ÎµåµÇÁö ¾ÊÀ» °æ¿ì ÇÔ¼ö ½ÇÇà

});


¡¡

(3) ¸¶¿ì½º Event

.click() : ¸¶¿ì½º Ŭ¸¯½Ã

.dblclick() : ¸¶¿ì½º ´õºí Ŭ¸¯½Ã

.mousedown() : ¸¶¿ì½º ¹öÆ°À» ´©¸¥ ¼ø°£

.mouseup() : ¸¶¿ì½º ¹öÆ°À» ³õ´Â ¼ø°£

.mouseover() : ´ë»ó¿¡ ¸¶¿ì½º Ä¿¼­°¡ À§Ä¡ÇßÀ» ¶§

.mouseseenter() : ´ë»ó¿¡ ¸¶¿ì½º°¡ À§Ä¡ÇßÀ» ¶§

.mousemove() : ´ë»ó¿¡¼­  ¸¶¿ì½º Ä¿¼­°¡ ¿òÁ÷¿´À» ¶§

.mouseout() : ´ë»ó¿¡¼­ ¸¶¿ì½º°¡ ¹þ¾î ³µÀ»¶§

.mouseleave() : ´ë»ó¿¡¼­ ¸¶¿ì½º°¡ ¹þ¾î³µÀ» ¶§

.hover() : ¸¶¿ì½º°¡ ¿ä¼Ò¿¡ ¿À¹öµÇ¾úÀ»¶§ ù¹ø° ÇÔ¼ö°¡ ½ÇÇàµÇ°í, ¸¶¿ì½º°¡ ¿ä¼Ò¸¦ ¶°³¯¶§ µÎ¹ø° ÇÔ¼ö°¡ ½ÇÇàµÈ´Ù.

$("#p1").hover(function(event){ // ¸¶¿ì½º°¡ ¿À¹öµÇ¾úÀ»¶§ ÇÔ¼ö ½ÇÇà 

},

 function(){ 

// ¸¶¿ì½º°¡ ¶°³¯¶§ ÇÔ¼ö ½ÇÇà

});


¡¡

(4) Å°º¸µå Event

.keypress() : Å° ÀÔ·Â ½Ã ¹ß»ý(enter, tabemdÀÇ Æ¯¼öÅ° Á¦¿Ü)

.keydown() : Å° ÀÔ·ÂÀ» ´©¸£°í ÀÖÀ» ¶§, ¸ðµç Å°¿¡ ´ëÇØ Àû¿ë

.keyup() : Å° ÀÔ·Â ÈÄ ¹ß»ý


¡¡

(5) form Event

¡¡

.select() : ¼±ÅÃÇÑ °³Ã¼¸¦  ¼±Åà ÇßÀ» ¶§

.change() : <input />, <textarea />, <select /> ¿ä¼ÒÀÇ °ª º¯°æ½Ã ½ÇÇà

.focus() : ÇØ´ç ¿ä¼Ò¿¡ Æ÷Ä¿½º¸¦ ¹Þ¾ÒÀ» ¶§ ½ÇÇàµÇ´Â ÇÔ¼ö

.focusin() : focus() ÀÇ ¾÷±×·¹À̵å(1.4)

.blur() : ÇØ´ç ¿ä¼Ò¿¡ Æ÷Ä¿½º¸¦ ÀÒ¾úÀ» ¶§ ½ÇÇàµÇ´Â ÇÔ¼ö

.focusout() : blur()ÀÇ ¾÷±×·¹À̵å(1.4)

.submit() : submitÀÌ ÀϾ ¶§


¡¡


¡¡

(6) event ÇÔ¼ö option ó¸®

¡¡

event.target : event¸¦ ¹ß»ý½ÃŲ Target

event.currentTarget  : event ¹öºí¸µÀ¸·Î ÇöÀç À̺¥Æ® ¹ß»ýµÇ´Â Target

event.relatedTarget : ÇØ´ç À̺¥Æ®¿Í °ü·ÃµÈ ´Ù¸¥ DOM ¿ä¼Ò ¼±ÅÃ

event.result :ÇØ´ç À̺¥Æ®°¡ ½ÇÇàÇÑ À̺¥Æ® Çڵ鷯 ÇÔ¼ö¿¡ ÀÇÇØ ¸®ÅϵǴ °¡Àå ¸¶Áö¸· °ª

event.data : event ´ë»óÀÌ °¡Áö°í ÀÖ´Â °ª

event.namespace : À̺¥Æ®°¡ tirgger µÆÀ»¶§, ¹ß»ýÇÑ À̺¥Æ®ÀÇ namespace

event.pageX : À̺¥Æ®°¡ ¹ß»ýÇÑ ¿ä¼ÒÀÇ ¹®¼­ÀÇ ¿ÞÂʺÎÅÍÀÇ À§Ä¡

event.pageY : À̺¥Æ®°¡ ¹ß»ýÇÑ ¿ä¼ÒÀǹ®¼­ÀÇ »ó´ÜÀ¸·ÎºÎÅÍÀÇ À§Ä¡

event.timeStamp : event°¡ ½ÇÇàµÈ ½Ã°£

event.type : ½ÇÇàµÈ event ŸÀÔ

event.which : À̺¥Æ®°¡ ¹ß»ýµÈ ¿ä¼ÒÀÇ key (Å°º¸µå °ª<¼ýÀÚ>, ¸¶¿ì½º <¿ÞÂÊ 1, Áß°£ 2, ¿À¸¥ÂÊ 3>)

event.preventDefault() : ÇØ´ç ¿ä¼Ò¿¡ °É·ÁÀÖ´Â ´Ù¸¥ À̺¥Æ®¸¦ ¹«·ÂÈ­ ÇÑ´Ù. 

event.isDefaultPrevented() : event.preventDefault() »óÅÂÀÎÁö üũ true / false

event.stopPropagation() : ´Ù¸¥ À̺¥Æ® Çڵ鷯°¡ È£ÃâµÇ´Â °ÍÀ» ¸·´Â´Ù.(À̺¥Æ® ¹öºí¸µ)

event.stopImmediatePropagation() : ´Ù¸¥ À̺¥Æ® Çڵ鷯°¡ È£ÃâµÇ´Â °ÍÀ» ¸·´Â´Ù. (À̺¥Æ® ¹öºí¸µ)

event.isPropagationStopped() : event.stopPropagation()ÀÌ È£Ã⠵ƴÂÁö ¿©ºÎ ¸®ÅÏ true / false

event.isImmediatePropagationStopped() : event.stopImmediatePropagation()ÀÌ È£ÃâµÆ´ÂÁö ¿©ºÎ ¸®ÅÏ true /false 


¡¡

6. Ajax

¡¡

$.param() <jQuery.param()> : Æû ¿ä¼ÒµéÀÇ °ªÀ» º¯È¯ÇÏ¿© Á÷·ÄÈ­µÈ ¹®ÀÚ¿­·Î Ç¥ÇöÇÑ´Ù.

var params = {width : 1680, height : 1050}; // ¹è¿­ ¼±¾ð

var str = $.param(params); // Ajax·Î Àü¼Û°¡´ÉÇϵµ·Ï Á÷·ÄÈ­

// $.param({a:[2,3,4]});  // "a[]=2&a[]=3&a[]4"

// $.param({a:{b:1,c:2},d:[3,4,{e:5}] }); // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"

¡¡

.serialize() : ¼±ÅÃÇÑ formÀÇ µ¥ÀÌÅ͸¦ ajax·Î Àü¼ÛÇÒ ¼ö ÀÖµµ·Ï Á÷·ÄÈ­ ÇÑ´Ù.

$("#name").serialize();   //  id name formÀÇ µ¥ÀÌÅ͸¦ Á÷·ÄÈ­ÇÑ´Ù. a=1&b=2

¡¡

.serializeArray() : ¼±ÅÃÇÑ formÀÇ µ¥ÀÌÅ͸¦ ajax·Î Àü¼ÛÇÒ ¼ö ÀÖµµ·Ï  ¹è¿­·Î Á÷·ÄÈ­ ÇÑ´Ù.

$("#name").serializeArray();  //  id name formÀÇ µ¥ÀÌÅ͸¦ ¹è¿­·Î Á÷·ÄÈ­ÇÑ´Ù. [ { name : "a", value : "1" }, { name : "c", value:"3"}]

¡¡

$.ajax() <jQuery.ajax()> : ajax ºñµ¿±â È£Ãâ Àü¼Û

         $.ajax({

                type : 'POST',                                    // post ŸÀÔ Àü¼Û

                url : 'some.php',                                // Àü¼Û url

                data : "name=John&location=Boston",   // Àü¼Û ÆĶó¹ÌÅÍ

                cache : false,                                  // ajax·Î ÆäÀÌÁö¸¦ ¿äûÇؼ­ º¸¿©ÁÙ °æ¿ì

                                                  // cache°¡ ÀÖÀ¸¸é »õ·Î¿î ³»¿ëÀÌ ¾÷µ¥ÀÌÆ® µÇÁö ¾Ê´Â´Ù.

               async : true,                                    // ºñµ¿±â Åë½Å,  false : µ¿±â Åë½Å

               beforSend : fucntion(){                     // ajax ¿äûÀÌ Àü¼ÛµÇ±â Àü ½ÇÇà ÇÔ¼ö

                },

               success : function(msg){                   // ÄÝ¹é ¼º°ø ÀÀ´ä½Ã ½ÇÇà

                },

               error : function(){                              // Ajax Àü¼Û ¿¡·¯ ¹ß»ý½Ã ½ÇÇà

                },

             complete : function(){                       //  success, error ½ÇÇà ÈÄ ÃÖÁ¾ÀûÀ¸·Î ½ÇÇà

                  }

            });

¡¡

.ajaxSend()  : ajax ¿äûÀÌ ¼­¹ö·Î º¸³»Áö±âÀü¿¡ È£ÃâµÊ

.ajaxStart()  : ajax ¿äûÀÌ ¼­¹ö·Îº¸³»Áø Á÷ÈÄ¿¡ È£ÃâµÊ.

.ajaxStop()  : ÀÀ´äÀ» ¼­¹ö·ÎºÎÅÍ ¹ÞÀº Á÷ÈÄ¿¡ È£ÃâµÊ.

.ajaxSuccess() : ¿äûÀÌ ¼º°øÀûÀ¸·Î ¿Ï·áµÈ ÈÄ¿¡ È£ÃâµÊ.

.ajaxError()  : ajax ½ÇÇà ÈÄ ¿¡·¯ ¹ß»ý½Ã ÇÔ¼ö ½ÇÇà / $.ajax() ¿É¼ÇÀÇ error¿Í µ¿ÀÏ.

.ajaxComplete() : ajax ½ÇÇà ÈÄ ÃÖÁ¾ÀûÀ¸·Î ÇÔ¼ö ½ÇÇà / $.ajax() ¿É¼ÇÀÇ complete ¿Í µ¿ÀÏ.

$.ajaxPrefilter() <jQuery.ajaxPrefilter()>  : ajax ¿äûÀ» º¸³»±â Àü¿¡ Ajax ¿É¼ÇµéÀ» ¼öÁ¤Çϰųª Á¶ÀÛÇÑ´Ù.

$.ajaxPrefilter(function(options)){ // options : request ¿äû ¿É¼Ç °ªµé

}); 

¡¡

$.ajaxSetup() <jQuery.ajaxSetup()> : ¾ÕÀ¸·Î ¹ß»ýÇÒ ajax ¿äû¿¡ ´ëÇÑ µðÆúÆ® °ªÀ» ¼³Á¤ÇÑ´Ù.

$("button").click(function(){  // buttonÀ» Ŭ¸¯Çҽà ajax È£Ãâ¿¡ ´ëÇÑ  

          $.ajaxSetup({ // url°ú success ÇÔ¼ö¸¦ ¼ÂÆÃÇÑ´Ù.

                      url : "test_ajax.txt",

                      success:function(result){

          })

});

¡¡

$.get() <jQuery.get()> : get ¹æ½ÄÀ¸·Î ajax Åë½ÅÀ» ÇÑ´Ù. ¼­¹ö¿¡¼­ °¡Á®¿Â´Ù.

$.get("test.php", function(data.status){..});   // "test.php"·Î get ¹æ½Ä Åë½Å ÈÄ function ½ÇÇà  

¡¡

$.getJSON() <jQuery.getJSON()> : $.get()°ú µ¿ÀÏÇϳª, µ¥ÀÌÅÍ Å¸ÀÔÀº json ŸÀÔÀÌ´Ù.

$.getScript() <jQuery.getScript()> : $.get()°ú µ¿ÀÏÇϳª, µ¥ÀÌÅÍ Å¸ÀÔÀº script, µ¿ÀûÀ¸·Î ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ºÒ·¯¿Â´Ù.                       

$.post() <jQuery.post()> : post ¹æ½ÄÀ¸·Î ajax Åë½ÅÀ» ÇÑ´Ù. ¼­¹ö¿Í ÆĶó¹ÌÅÍ·Î µ¥ÀÌÅ͸¦ ÁÖ°í¹Þ´Â´Ù.

$.post("test.php",  // "test.php"·Î 

           {  //   name°ú message ÆĶó¹ÌÅÍ 

                    name: "myeonghyeon",

                    message : "hi"

           },

           function(data.status){..}  // callback() ÇÔ¼ö ½ÇÇà

);   // "test.php"·Î ÆĶó¹ÌÅ͸¦ º¸³» post ¹æ½Ä Åë½Å ÈÄ function ½ÇÇà  

¡¡

.promise() : ºñµ¿±âÇÔ¼ö(Ajax)°¡ ¸®ÅÏÇÑ °´Ã¼¸¦ °¡Áø´Ù.

.promise().done(); : ¼±ÅÃµÈ ºñµ¿±âÇÔ¼ö ¸®ÅÏ °´Ã¼ÀÇ ÄݹéÀÌ ¼º°ø, done ÇÔ¼ö ½ÇÇà

$("div").promise().done(function(){

          $("p").append("Finished");  // ¸ðµç div ¿ä¼ÒÀÇ ¿äûÀÌ ¸ðµÎ ¼º°øÇϸé, done ½ÇÇà, p ¿ä¼Ò¿¡ finished »ðÀÔ

});

¡¡

.promise().fail();  : ¼±ÅÃµÈ ºñµ¿±âÇÔ¼ö ¸®ÅÏ °´Ã¼ÀÇ ÄݹéÀÌ ½ÇÆÐ, fail ÇÔ¼ö ½ÇÇà

.promise().then();  : ÄݹéÀÌ ¼º°øÇϸé(success) ¸®Åϵ¥ÀÌÅ͸¦ thenÀÇ ÀÎÀÚ°¡ ¹Þ¾Æ¼­ ½ÇÇà

$("div").promise().then(A).then(B);   // div¿¡ ÁÖ¾îÁø ¾×¼ÇÀÌ ¼º°øÇÏ¸é ¸®ÅÏ°ªÀ» °¡Áö°í A ÇÔ¼ö ½ÇÇà AÇÔ¼ö ¸®ÅÏ°ªÀ» °¡Áö°í B ÇÔ¼ö ½ÇÇà

¡¡

$.when() <jQuery.when()> : ÀÎÀÚÀÇ ÇÔ¼öÀÇ Äݹé ÈÄ ¸®ÅÏ°ªÀ» ¹ÝȯÇÑ´Ù.

$.when( effect() ).done(function(){

        $("p").append("finished");  // effect() ÇÔ¼ö¸¦ ½ÇÇàÇؼ­ ¼º°øÇϸé p ¿¡ finished¸¦ »ðÀÔÇÑ´Ù.

});

$.when( A, B ).done(function(){  // µ¿½Ã¿¡ A,B ÇÔ¼ö¸¦ ½ÇÇàÇÏ°í ¸ðµÎ°¡ ¼º°øÇÒ °æ¿ì .done(function() ½ÇÇà

});

¡¡

$.deferred() <jQuery.deferred()>  : $.ajax°¡ ¹ÝȯÇÏ´Â °´Ã¼, pomise °´Ã¼¿Í °°Àº ÀÏÀ» ÇÒ ¼ö ÀÖÀ¸¸ç Ãß°¡ÀûÀÎ Äݹé ÇÔ¼ö¸¦ °¡Áø´Ù.

¡¡

deferred.always()  : ¿äûÀÌ ¼º°ø, ½ÇÆп¡ ¹«°üÇÏ°Ô Ç×»ó ½ÇÇàµÈ´Ù.

deferred.done() : ¿äûÀÌ ¼º°ø½Ã ½ÇÇàµÈ´Ù.

deferred.fail() : ¿äûÀÌ ½ÇÆнà ½ÇÇàµÈ´Ù.

deferred.isRejected() : ¿äûÀÌ ½ÇÆеƴÂÁö È®ÀÎÇÑ´Ù.

deferred.isResolved() : ¿äûÀÌ ¼º°øÇß´ÂÁö È®ÀÎÇÑ´Ù.

deferred.pipe() : ¿äûÀÇ return °ªÀ» ÀÎÀÚ·Î ³Ñ°ÜÁØ´Ù.

deferred.promise() : ¿äûÀÇ ÄݹéÀ» °´Ã¼·Î °¡Áö°í Àִ´Ù.

deferred.reject() : ¿äûÀÌ ½ÇÆнà fail() ÇÔ¼ö¸¦ È£ÃâÇÑ´Ù.

deferred.resolve() : ¿äûÀÌ ¼º°ø½Ã done() ÇÔ¼ö¸¦ È£ÃâÇÑ´Ù.

deferred.then() : µÎ°³ÀÇ ÀÎÀÚ¸¦ °¡Áö°í µÎ°³ ¸ðµÎ ¼º°øÇÒ ¶§ resolve(), Çϳª¶óµµ ½ÇÆÐÇϸé reject() ½ÇÇà

¡¡

¡¡

ÃßõÃßõ : 350 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
1,312
preg match¿¡ °üÇÑ Á¤±Ô½Ä
1,311
PHP $ SERVER ȯ°æ º¯¼ö Á¤¸®
1,310
PHP ÇöÀç ÆäÀÌÁöÀÇ µµ¸ÞÀθíÀ̳ª urlµîÀÇ Á¤º¸ ¾Ë¾Æ¿À±â
1,309
PHP preg match all()
1,308
PHP ·Î À¥ÆäÀÌÁö ±Ü¾î¿À±â ¸ðµç ¹æ¹ý ÃÑÁ¤¸®!
1,307
[PHP] ¿ø°ÝÁö ÆÄÀÏ ÁÖ¼Ò ³ëÃâ ¾ÈÇÏ°í curl·Î ´Ù¿î·Îµå ¹Þ±â
1,306
PHP ÇÔ¼ö Á¤¸®
1,305
PHP ¹è¿­¿¡¼­ ¹«ÀÛÀ§·Î Çϳª »Ì¾ÆÁÖ´Â array rand() ÇÔ¼ö
1,304
PHP Á¤±Ô½Ä Á¤¸®
1,303
PHP Á¤±Ô½ÄÀ» È°¿ëÇÑ ÅÂ±× ¹× ƯÁ¤ ¹®ÀÚ¿­ Á¦°Å ¹× ÃßÃâ ¹æ¹ý
1,302
php Å©·Ñ¸µ ¶Ç´Â ÆÄ½Ì ÇÔ¼ö, Á¤±Ô½Ä ¸ðÀ½
1,301
Á¦ÀÌÄõ¸® ±âº» ¸í·É¾î
1,300
PHP ÆÄÀÏ Á¸Àç ¿©ºÎ ÆľÇÇϱâ(·ÎÄà ÆÄÀÏ Á¸Àç ¹× ¿ø°ÝÁö ÆÄÀÏ Á¸Àç)
1,299
ÅÂ±× »çÀÌ¿¡ ÀÖ´Â ÅؽºÆ®¸¦ ÃßÃâ
1,298
»ç¿ëÀÚ ÇÔ¼ö ¸ðÀ½
1,297
¸¶¿ì½º,Å°º¸µå Á¦ÇÑ ( ¿À¸¥ÂÊŬ¸¯,µå·¡±×,¿µ¿ª¼±Åõî..)
1,296
PHP - ƯÁ¤ ÅÂ±× ¹× ¹®ÀÚ¿­ ÃßÃâ, Á¦°Å
1,295
[PHP] define°ú definedÀÇ Â÷ÀÌ
1,294
¿ìŬ¸¯ ¿Ïº®Â÷´Ü ½ºÅ©¸³Æ®
1,293
[PHP] dirname()ÇÔ¼ö¿Í $_SERVER °ü·Ã »ó¼öµé
1,292
[PHP] ÆÄÀÏ Å©±â, »çÀÌÁî ºÒ·¯¿À´Â ÇÔ¼ö, filesize()
[jQuery] jQuery Quick API
1,290
PHP 5.3.0 ¿¡¼­ »ç¶óÁø ÇÔ¼öµé ´ëü
1,289
¾î¶² ÆÄÀϵéÀÌ include ³ª require µÇ¾ú´ÂÁö È®ÀÎÇÏ´Â ÇÔ¼ö(get_included_files)
1,288
°ªÀÌ ¹è¿­ ¾È¿¡ Á¸ÀçÇÏ´ÂÁö È®ÀÎÇÏ´Â in_arrayÇÔ¼ö
1,287
UTF8 ÇÑ±Û ÀÚ¸£±â..
1,286
iconv ¿¡·¯ ¹ß»ý½Ã °è¼Ó ó¸®Çϱ⠿ɼÇ
1,285
[PHP] ÇöÀç ÆäÀÌÁöÀÇ µµ¸ÞÀÎ , URL Á¤º¸ ¾Ë¾Æ³»±â.
1,284
[PHP] ¸·°­ ±â´É ¹è¿­..
1,283
[JqueryMobile] - ÇöÀçÈ­¸éÀÇ °¡·Î¼¼·Î »çÀÌÁî ±¸Çϱâ
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.