jquery selector
BASIC SELECTOR
HTML DOCUMENT³»ÀÇ ¸ðµç HTML¿ä¼Ò(HEAD, BODY, SCRIPT) µîµîÀÇ ¸ðµç ¿ä¼ÒµéÀ» ¼±ÅÃÇϱâ À§ÇÔ
¡¤ Class Selector (¡°.class¡±)
¿ä¼ÒÀÇ Á¤ÀǵǾî Àִ Ŭ·¡½º(class)¸¦ ±¸ºÐÀÚ·Î ¼±ÅÃÇϱâ À§ÇÔ (.)
¿¹) <div class=¡±jquery¡±></div> -> $(¡®.jquery¡¯);
¿ä¼ÒÀÇ Á¤ÀǵǾî ÀÖ´Â ¾ÆÀ̵ð(id)¸¦ ±¸ºÐÀÚ·Î ¼±ÅÃÇϱâ À§ÇÔ. (#)
¿¹) <div id=¡±jquery¡±></div> -> $(¡®#jquery¡¯)
¡¤ Element Selector (¡°element¡±)
ÀÏÁ¤ html ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ À§ÇÔ (ÇØ´ç Åױ׷Πã±â ¶§¹®¿¡ ±×´ÙÁö À¯¿ëÇÏÁø ¾ÊÀ½). – ¼±Åà ¹üÀ§°¡ ³Ð±â ¶§¹®
¿¹) <div></div><span></span><div></div> -> $(¡®div¡¯); = 2°³ ¹Ýȯ
¡¤ Multiple Selector (¡°selector1, selector2, selectorN¡±)
´ÙÁßÀ¸·Î ÀÏÁ¤ html ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ À§ÇÔ
¿¹) <div><span></span></div><form><input type=¡±text¡± /></form,> -> $(¡®div, span, form, input¡¯)
ATTRIBUTE SELECTOR
¡¤ Attribute Contains Prefix Selector [name|=value]
ÀÌ ¼±ÅÃÀÚ´Â ¿ä¼Ò¿¡ Æ÷ÇÔ µÇ¾î ÀÖ´Â ¼Ó¼º°ú ¼Ó¼º°ªÀ» ºñ±³ÇÏ¿© ÇØ´ç ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ À§ÇÏ¿© »ç¿ë µÈ´Ù.
¼Ó¼º°ªÀÌ µÎ ´Ü¾î ÀÌ»óÀÏ °æ¿ì¿¡´Â ¾ÆÀÌÇÂ(-) À¸·Î ¿¬°áÇÏ¸é ¼±ÅõǾî Áú ¼ö ÀÖÀ¸¸ç ½ºÅ©¸³Æ®¿¡ ¼³Á¤µÈ °ªÀº ¿ä¼Ò¿¡ ¼±¾ðµÈ ¼Ó¼º°ª¿¡ ¾ÕºÎºÐ¿¡ ³ª¿Í¾ß ÇÑ´Ù.
¿¹) $(¡®a[wow|=you]¡¯); -> ¸ðµç a Åױ׸¦ °Ë»öÇÏ°í ¼Ó¼º À̸§ÀÌ wow ÀΰͿ¡ °ª¿¡ you °¡ µé¾î ÀÖ´Â ÇØ´ç ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù ( <a href=¡±#¡± wow=¡±aa-you-wow¡±> x ), ( <a href=¡±#¡± wow=¡±you-wow¡±> o )
¡¤ Attribute Contains Selector [name*=value]
ÀÌ ¼±ÅÃÀÚ´Â ¿ä¼Ò¿¡ Æ÷ÇԵǾî ÀÖ´Â ¼Ó¼º°ú ¼Ó¼º°ªÀ» ºñ±³ÇÏ¿© ÇØ´ç ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ À§ÇÏ¿© »ç¿ë µÈ´Ù.
¼±¾ðµÇ¾îÁø ÇÊ¿ä·Î ÇÏ´Â ¼Ó¼º°ªÀÇ ¹®ÀÚ¸¦ ¿ä¼Ò¿¡ ÀÖ´Â ¼Ó¼º°ªÀÇ ³»¿ë Áß ¾Æ¹«°÷¿¡ ÇØ´ç ¹®ÀÚ°¡ ¾î¶°ÇÑ ÇüÅ·ΠÀÖ´ø ÀÏÄ¡ ÇÏ´Â ºÎºÐÀÌ ÀÖ´Ù¸é ÇØ´ç ¿ä¼Ò¸¦ ¹ÝȯÇÏ°Ô µÈ´Ù.
¿¹) $(¡®input[name*=¡¯wow¡¯]¡¯); -> ¿ì¼± ¸ðµç input Åױ׸¦ °Ë»öÇÏ°í ¼Ó¼º name Áß¿¡ ¡®wow¡¯ ¶ó´Â ¹®ÀÚ¿ÀÌ Æ÷ÇÔ µÇ¾î ÀÖ´Ù¸é ¹«Á¶°Ç ¹Ýȯ Ç϶ó.
¡¤ Attribute Contains Word Selector [name~=value]
ÀÌ ¼±ÅÃÀÚ´Â ¿ä¼Ò¿¡ Æ÷ÇÔ µÇ¾î ÀÕ´Â ¼Ó¼º°ú ¼Ó¼º°ªÀ» ºñ±³ÇÏ¿© ÇØ´ç ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ À§ÇÏ¿© »ç¿ë µÈ´Ù.
¼±¾ðµÇ¾îÁø ÇÊ¿ä·Î ÇÏ´Â ¼Ó¼º°ª(´Ü¾î) ¸¦ ¿ä¼Ò¿¡ ÀÖ´Â ¼Ó¼º°ú ºñ±³ÇÏ¿© ÇØ´ç ´Ü¾î°¡ ÀÖ´Ù¸é ÇØ´ç ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù. ÇÏÁö¸¸ ±âÁ¸ÀÇ ¼¿·ºÅͿʹ Ʋ¸®°Ô ÀÌ ¼±ÅÃÀÚ´Â ÇØ´ç ´Ü¾î°¡ ÇÏÀÌÇÂ(-) À̶óµçÁö, ´Ü¾î Áß°£¿¡ ³¢¾î ÀÖ´Ù¸é ¹ÝȯÇÏÁö ¾ÊÀ¸¸ç, °ø¹éÀ¸·Î ±¸ºÐµÇ¾î ÀÖ´Â °æ¿ì³ª, ÇØ´ç ´Ü¾î Çϳª¸¸ ÀÖÀ» °æ¿ì¿¡´Â ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù.
¿¹) $(¡®input[name~=¡¯wow¡¯]¡¯) -> ¸ðµç input Åױ׸¦ °Ë»öÇÏ°í ¼Ó¼º¿¡ ¡®wow¡¯ ¶ó´Â ´Ü¾î°¡ µ¶¸³ÀûÀ¸·Î Á¸ÀçÇÏ¸é ¹ÝȯÇÑ´Ù.
¡¤ Attribute Ends With Selector [name$=value]
ºñ±³ html ¿ä¼Ò ¼Ó¼º°ª Áß ÇØ´ç ¼Ó¼º°ªÀÇ °¡Àå µÚ¿¡ ÇÊ¿ä·Î ÇÏ´Â ´Ü¾î°¡ ºÙ¾î ÀÖ´Ù¸é ÇØ´ç ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù.
¿¹) $(¡®input[name$=¡¯wow¡¯]¡¯); -> ¿ä¼Ò ¼Ó¼ºÀÌ <input type=¡±text¡± name=¡±abcdwow¡± /> ·Î µÇ¾î¾ß ¹Ýȯ
¡¤ Attribute Equals Selector [name=value]
±âº»ÇüÅ·Π¿ä¼Ò ¼Ó¼º°ª°ú ÇÊ¿ä·Î ÇÏ´Â ´Ü¾î°¡ ¹«Á¶°Ç ÀÏÄ¡ÇÏ¿©¾ß ÇØ´ç ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù.
¿¹) $(¡®input[name=¡¯wow¡¯]¡¯); -> <input type=¡±text¡± name=¡±wow¡± /> ·Î µÇ¾î¾ß ¹Ýȯ
¡¤ Attribute Not Equal Selector [name!=value]
¿ä¼Ò ¼Ó¼º°ª°ú ÇÊ¿ä·Î ÇÏ´Â ´Ü¾î°¡ ÀÏÄ¡ ÇÏÁö ¾Ê´Â ¿ä¼ÒµéÀ» ¹ÝȯÇÑ´Ù.
This selector is equivalent to :not([attr=value]);
¿¹) $(¡®input[name!=¡¯wow¡¯]¡¯); -> <input type=¡±text¡± name=¡±wow¡± /> ¹Ýȯ¾ÈÇÔ <,input type=¡±text¡± name=¡±wowya¡± /> ¹Ýȯ¾ÈÇÔ
¡¤ Attribute Starts With Selector [name^=value]
¿ä¼Ò ¼Ó¼º°ª°ú ÇÊ¿ä·Î ÇÏ´Â ´Ü¾î°¡ ÀÏÄ¡¸¦ ÇØ¾ß Çϴµ¥ Àüü°¡ ÀÏÄ¡ÇÒ ÇÊ¿ä´Â ¾ø°í, ÇÊ¿ä·Î ÇÏ´Â ´Ü¾î°¡ ¿ä¼Ò¿¡ ÀÖ´Â ¼Ó¼º°ª¿¡ óÀ½¿¡ ½ÃÀÛ Çϸé ÇØ´ç ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù.
¿¹) $(¡®input[name^=¡¯wow¡¯]¡¯); -> <input type=¡±text¡± name=¡±wowabcd¡± /> ¹ÝȯÇÔ, <input type=¡±text¡± name=¡±abcdwow¡± /> ¹Ýȯ¾ÈÇÔ
¡¤ Has Attribute Selector [name]
ÇØ´ç ¼Ó¼ºÀÌ ÀÖ´Ù¸é ¹«Á¶°Ç ¹ÝȯÇÑ´Ù.
¿¹) $(¡®div[id]¡¯); -> ¸ðµç div ¸¦ °Ë»öÇÏ°í, ÇØ´ç div ¿¡ id ¼Ó¼ºÀÌ ÀÖ´Ù¸é °ªÀÌ ÀÖ´ø ¾ø´ø ÇØ´ç ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù.
¡¤ Multiple Attribute Selector [name=value][name2=value2]
È£Ãâ Á¶°ÇÀ» ¿©·¯ °¡Áö·Î ¼³Á¤ÇÏ¿© Á»´õ Á¤±³ÇÑ ¼±ÅÃÀ» ÇÒ ¼ö ÀÖµµ·Ï À¯µµ ÇÑ´Ù.
¿¹) $(¡®div[id][name$=¡¯wow¡¯]¡¯); -> ¸ðµç div ¸¦ °Ë»öÇÏ°í ±×Áß id ¼Ó¼ºÀ» °¡Áö°í ÀÖ´Â ¿ä¼ÒÁß name ¼Ó¼ºÀÌ ÀÖ°í ±× name ¼Ó¼º°ª¿¡ ¡®wow¡¯ ¶ó´Â °ªÀÌ °¡Àå ¸¶Áö¸·¿¡ ÀÖ´Ù¸é ÇØ´ç ¿ä¼Ò ¹Ýȯ
<input type=¡±text¡± id=¡±hey¡± name=¡±whatwow¡± /> ¹ÝȯÇÔ
FORM SELECTOR
¹öÆ°°ú ŸÀÔ¹öÆ° ¿ä¼Ò¸¦ ¸ðµÎ ¹ÝȯÇÔ
¿¹) $(¡®:button¡¯); -> <button></button> ȤÀº <input type=¡±button¡± /> À» ¸ðµÎ ¹Ýȯ
ŸÀÔ Ã¼Å©¹Ú½º ¿ä¼Ò¸¦ ¸ðµÎ ¹ÝȯÇÑ´Ù.
¿¹) $(¡®:checkbox¡¯); -> <input type=¡±checkbox¡± /> À» ¸ðµÎ ¹Ýȯ
¿ä¼ÒÁß checked=¡±checked¡± µÇ¾î ÀÖ´Â ¿ä¼Ò¸¦ ¸ðµÎ ¹ÝȯÇÑ´Ù.
¿¹) $(¡®:checked¡¯); - > <input type=¡±checkbox¡± checked=¡±checked¡± /> µîÀ» ¹Ýȯ
¿ä¼ÒÁß disabled=¡±disabled¡± µÇ¾î ÀÖ´Â ¿ä¼Ò¸¦ ¸ðµÎ ¹ÝȯÇÑ´Ù.
¿¹) $(¡®:disabled¡¯); -> <input type=¡±text¡± disabled=¡±disabled¡± /> µîÀ» ¹Ýȯ
¿ä¼ÒÁß enabled µÇ¾î ÀÖ´Â ¿ä¼Ò¸¦ ¸ðµÎ ¹ÝȯÇÑ´Ù. -> Áï ÇØ´ç ¿ä¼Ò¿¡¼ disabled °¡ µÇÁö ¾ÊÀº °ÍµéÀ» ¹Ýȯ
¿¹) $(¡®input:enabled¡¯);
¿ä¼ÒÁß input type=¡±file¡± ¿ä¼Ò¸¦ ¸ðµÎ ¹ÝȯÇÑ´Ù
¿¹) $(¡®input:file¡¯);
¿ä¼ÒÁß input type=¡±image¡± ¿ä¼Ò¸¦ ¸ðµÎ ¹ÝȯÇÑ´Ù.
¿¹) $(¡®input:image¡¯);
¿µ¿ª³»ÀÇ ¸ðµç ¿ä¼Ò(input, textarea, select, button) µîÀ» ¸ðµÎ ¹ÝȯÇÑ´Ù ( $(¡®form > *¡¯); )
¿¹) $(¡®:input¡¯);
¿ä¼ÒÁß input type=¡±password¡± ¿ä¼Ò¸¦ ¸ðµÎ ¹ÝȯÇÑ´Ù
¿¹) $(¡®input:password¡¯);
¿ä¼ÒÁß input type=¡±radio¡± ¿ä¼Ò¸¦ ¸ðµÎ ¹ÝȯÇÑ´Ù.
¿¹) $(¡®input:radio¡¯);
¿ä¼ÒÁß input type=¡±reset¡± ¿ä¼Ò¸¦ ¸ðµÎ ¹ÝȯÇÑ´Ù.
¿¹) $(¡®input:reset¡¯);
Select ¿ä¼ÒÀÇ option Ç׸ñÀ» À§ÇÑ ¼±ÅÃÀÚ·Î, option Ç׸ñÀÌ ¼±Åà µÇ¾îÁö´Â ¼ø°£ ÇØ´ç ¼±ÅÃµÈ option À» ¹ÝȯÇÑ´Ù.
¿¹) $(¡®select¡¯).change(function(){
$(¡®select option:selected¡¯)¡¦¡¦¡¦..xxxxxxxx
})
¿ä¼ÒÁß input type=¡±sutmit¡± ¿ä¼Ò¸¦ ¸ðµÎ ¹ÝȯÇÑ´Ù
¿¹) $(¡®input:submit¡¯);
¿ä¼ÒÁß input type=¡±text¡± ¿ä¼Ò¸¦ ¸ðµÎ ¹ÝȯÇÑ´Ù.
¿¹) $(¡®input:text¡¯);
BASIC FILTER SELECTOR
¿¡´Ï¸ÞÀÌ¼Ç È¿°ú°¡ ÁøÇàµÈ ¿¤¸®¸ÕÆ® ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù.
¿¹) $(¡¯element¡¯).slideToggle(¡®slow¡¯, anymethod); = element ¿¡ slideToggle ¿¡´Ï¸ÞÀÌ¼Ç ½ÇÇà ±×ÈÄ
$(¡®button¡¯).click(function(){
$(¡®div:animated¡¯).toggleClass(¡®anyclass¡¯);
});
ƯÁ¤ ¿¤¸®¸ÕÆ®ÀÇ :eq(index) ¡®index¡¯ ¹ø°ÀÇ ¿µ¿ªÀ» ¹ÝȯÇÑ´Ù. Index ´Â ¡°0¡± ºÎÅÍ ½ÃÀÛÇÑ´Ù.
¿¹) $(¡®div:eq(¡°2¡±)¡¯).css(¡®color¡¯, ¡®red¡¯); -> ¸ðµç divÁß¿¡ 2 ¹ø° div ¿¡ °ªµé¿¡ Ä÷¯¸¦ red·Î ±ÔÁ¤ÇÑ´Ù.
ƯÁ¤ ¿¤¸®¸ÕÆ®ÀÇ Â¦¼ö¹ø° ¿µ¿ªÀ» ¹ÝȯÇÑ´Ù. ¼ø¼´Â 0 ºÎÅÍ ½ÃÀÛÇÑ´Ù.
¿¹) $(¡®tr:even¡¯).css(¡®background-color¡¯, ¡®#000000¡¯); -> Å×À̺íÀÇ tr Áß 0ºÎÅÍ Â¦¼ö¹ø° ¿µ¿ªÀÇ ¹è°æ»öÀº Èæ»ö.
¿ä¼Ò Áß Ã¹¹ø° ³ª¿À´Â ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù. ÀÌ°ÍÀº :eq(0) °ú °°À¸¸ç, :lt(1) ·Î »ç¿ëµÇ¾îµµ ¹«¹æÇÏ´Ù.
¿¹) $(¡®tr:first¡¯).css(¡®color¡¯,¡¯red¡¯); -> tr Å×±×Áß Ã¹¹ø° ³ª¿À´Â ¿µ¿ªÀ» ¹ÝȯÇÑ´Ù.
¿ä¼ÒÁß :gt(index), index ¹ø° ´ÙÀ½ÀÇ ¸ðµç ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù. Index ´Â ¡®0¡¯ ºÎÅÍ ½ÃÀÛÇÑ´Ù. :nth-child(n) Àº nÀÌ 1ºÎÅÍ ½ÃÀÛ ÇÏ´Â °Í°ú´Â ´ëÁ¶µÈ´Ù.
¿¹) $(¡®td:gt(2)¡¯).css(¡®border¡¯,¡¯red¡¯); -> ¼¼¹ø° ³ª¿À´Â td ºÎÅÍÀÇ ¸ðµç tdÀÇ border »ö»óÀÌ ºÓÀº»öÀÌ´Ù
Html ¿ä¼ÒÁß header Å×±× h1~h6 ±îÁöÀÇ ¿ä¼ÒµéÀ» ¹ÝȯÇÑ´Ù.
¿¹) $(¡®:header¡¯)
¿ä¼Ò Áß ¸¶Áö¸·¿¡ ³ª¿À´Â ÇϳªÀÇ ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù.
¿¹) $(¡®tr:last¡¯).css(¡®color¡¯,¡¯red¡¯); -> tr Å×±×Áß ¸¶Áö¸·¿¡ ³ª¿À´Â ¿µ¿ª ³»¿ëÀÇ Ä÷¯´Â ºÓÀº»öÀÌ´Ù.
¿ä¼ÒÁß :lt(index), index ¹ø° ÀÌÀüÀÇ ¸ðµç ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù. Index ´Â ¡®0¡¯ ºÎÅÍ ½ÃÀÛÇÑ´Ù. :nth-child(n) Àº nÀÌ 1ºÎÅÍ ½ÃÀÛ ÇÏ´Â °Í°ú´Â ´ëÁ¶µÈ´Ù. (:gt(index) ¿Í´Â ÁöÁ¤ ¿µ¿ªÀÌ ´ëºñµÈ´Ù.)
¿¹) $(¡®td:lt(2)¡¯).css(¡®border¡¯,¡¯red¡¯); -> ¼¼¹ø° ³ª¿À´Â td ÀÌÀüÀÇ ¸ðµç tdÀÇ border »ö»óÀÌ ºÓÀº»öÀÌ´Ù
ƯÁ¤ ¿ä¼Ò Áß ÁÖ¾îÁø Á¶°Ç¿¡ ¸ÂÁö ¾Ê´Â ¿ä¼ÒµéÀ» ¹ÝȯÇÑ´Ù. ( :not(div a), :not(div, a) )
¿¹) $(¡®input:not(:checked)¡¯) -> Àüü input Å×±×Áß checked °¡ µÇÁö ¾Ê´Â ¸ðµç input À» ¹ÝȯÇÑ´Ù.
ƯÁ¤ ¿¤¸®¸ÕÆ®ÀÇ È¦¼ö¹ø° ¿µ¿ªÀ» ¹ÝȯÇÑ´Ù. ¼ø¼´Â 0 ºÎÅÍ ½ÃÀÛÇÑ´Ù.
¿¹) $(¡®tr:odd¡¯).css(¡®background-color¡¯, ¡®#000000¡¯); -> Å×À̺íÀÇ tr Áß 0ºÎÅÍ È¦¼ö¹ø° ¿µ¿ªÀÇ ¹è°æ»öÀº Èæ»ö.
CONTENTS FILTER SELECTOR
ÁÖ¾îÁø ¹®ÀÚ¿ÀÌ Æ÷ÇÔ µÇ¾î ÀÖ´Â ¸ðµç ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù.
¿¹) $(¡®div(:contain(¡°ouksoo¡±)¡¯).cass(¡®text-decoration¡¯,¡¯underline¡¯); -> ¡®ouksoo¡¯ ¹®ÀÚ¿ Æ÷ÇÔ ¸ðµç div ¿µ¿ªÀÇ ¼Ó¼ºÀ» ¾Æ·¡¹ØÁÙ ·Î Á¤ÀÇ
ÇØ´ç ¿ä¼Ò³» child node ȤÀº text µÑ Áß ¾Æ¹«°Íµµ ¾ø´Â ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù. Áï ºñ¾î ÀÖ´Â ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù ÀÌ ¼±ÅÃÀÚ´Â :parent ¼±ÅÃÀÚ¿Í´Â ¹Ý´ëµÈ´Ù..
¿¹) $(¡®td:empty¡¯).text(¡®wow¡¯); -> td ¿ä¼Ò Áß ºñ¾î ÀÖ´Â td ¸¦ ã°í ±× ¿ä¼Ò¾È¿¡ ¡®wow¡¯¶ó´Â ¹®ÀÚ¸¦ ³Ö´Â´Ù.
ÇØ´ç ¿ä¼Ò ³»¿¡ ÀÏÁ¤(ÁÖ¾îÁø) ¿ä¼Ò°¡ Æ÷ÇÔ µÇ¾î ÀÖ´Â ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù. Áï ¹Ýȯ ¹Þ°íÀÚ ÇÏ´Â ¿ä¼Ò´Â ÁÖ¾îÁø ÀÏÁ¤ÇÑ ¿ä¼Ò¸¦ Æ÷ÇÔÇÏ°í ÀÖ¾î¾ß ÇÑ´Ù.
¿¹) $(¡®div:has(p)¡¯).addClass(¡°text¡±); -> ¸ðµç div ¿ä¼ÒÁß p Åױ׸¦ Æ÷ÇÔÇÏ°í ÀÖ´Â div ¿¡ ¡®text¡¯ Ŭ·¹½º¸¦ Àû¿ë
ÇØ´ç ¿ä¼Ò³» child node ȤÀº text µÑ Áß ¾î¶² °ÍÀÌ¶óµµ Æ÷ÇÔÇÏ°í ÀÖ´Â ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù. Áï ºñ¾î ÀÖÁö ¾Ê´Â ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù ÀÌ ¼±ÅÃÀÚ´Â :empty ¼±ÅÃÀÚ¿Í´Â ¹Ý´ëµÈ´Ù..
¿¹) $(¡®td:parent¡¯).text(¡®wow¡¯); -> td ¿ä¼Ò Áß ºñ¾î ÀÖ´Â td ¸¦ ã°í ±× ¿ä¼Ò¾È¿¡ ¡®wow¡¯¶ó´Â ¹®ÀڷΠġȯÇÑ´Ù.
CHILD FILTER SELECTOR
ÇØ´ç ±¸¿ª¿¡ Æ÷ÇԵǾî ÀÖ´Â ¿ä¼Ò Áß °¡Àå ù¹ø° ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù. ¡°nth-child(1)¡± ¿Í °°´Ù°í º¸¸é µÈ´Ù
¿¹) $(¡®div span:first-child¡¯) .-> div ¿ä¼ÒÁß span ÀÌ °¡Àå ù¹ø° ³ª¿Ã ¶§, ±× ù¹ø° span À» ¹ÝȯÇÑ´Ù.
ÇØ´ç ±¸¿ª¿¡ Æ÷ÇԵǾî ÀÖ´Â ¿ä¼Ò Áß °¡Àå ¸¶Áö¸· ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù. ¸¶Áö¸·¿¡ ¼±¾ðµÇ¾îÁø ¿ä¼Ò°¡ ³ª¿Í¾ß ÇÑ´Ù.
¿¹) $(¡®div span:first-child¡¯) .-> div ¿ä¼ÒÁß span ÀÌ °¡Àå ¸¶Áö¸·¿¡ ³ª¿Ã ¶§, ±× ¸¶Áö¸· span À» ¹ÝȯÇÑ´Ù.
:nth-child(index) ¿¡¼ index ¹ø°ÀÇ ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù. ±âÁ¸ÀÇ :eq(index) µîÀº ½ÃÀÛÁ¡ÀÌ 0ºÎÅÍ ½ÃÀÛÇÏ¿© Ä«¿îÆÃÀ» ÇÏ¿´À¸³ª ÀÌ ¼¿·ºÅÍÀÇ index ´Â 1ºÎÅÍ ½ÃÀÛÇÑ´Ù´Â °Í¿¡ Â÷ÀÌ°¡ ÀÖ´Ù.
¿¹) $(¡®ul li:nth-child(2)¡¯) -> ul ¿ä¼ÒÁß µÎ¹ø° ³ª¿À´Â li ¸¦ ¹Ýȯ / :eq(2) ÀÏ°æ¿ì¿¡´Â ¼¼¹ø° ³ª¿À´Â li ¸¦ ¹Ýȯ.
ºÎ¸ð¿µ¿ª ³»¿¡ child node °¡ Çϳª ¹Û¿¡ ¾øÀ» °æ¿ì ÇØ´ç child ³ëµå¸¦ ¹ÝȯÇÑ´Ù. Text node ´Â ¿©±â¿¡ child node¿¡ Æ÷ÇÔ µÇÁö ¾Ê´Â´Ù.
¿¹) $(¡®div button:only-child¡¯). -> div ¿ä¼ÒÁß button ¿¤¸®¸ÕÆ®¸¦ Çϳª¸¸ Æ÷ÇÔ ÇÏ°í ÀÖÀ» ¶§ ±× button ¿¤¸®¸ÕÆ®¸¦ ¹ÝȯÇÑ´Ù.
HIERARCHY(°èÃþ) SELECTOR
¡¤ Child Selector (¡°parent > child¡±)
ºÎ¸ð¿¤¸®¸ÕÆ®¿¡ ¼ÓÇØ ÀÖ´Â ÀÚ½Ä ¿¤¸®¸ÕÆ®¸¦ ¹ÝȯÇÑ´Ù. (¼ø¼ö°èÃþ ¹Ýȯ, Ŭ·¡½º³ª ¾ÆÀ̵𸦠ÀÌ¿ëÇÏ¿© ¿øÇÏ´Â °ª µµÃâ
¿¹) $(¡®ul.topclass > li¡¯) ¡¦-> Ŭ·¡½º¸íÀÌ topclass ÀÎ ul ¿¡ ¼ÓÇØ ÀÖ´Â li ¸¸ ¹ÝȯÇÑ´Ù. ÀÚ½ÄÁß¿¡ Ŭ·¡½º¸íÀ» °¡ÁöÁö ¾Ê´Â ul ÀÌ °è¼Ó Æ÷ÇÔ µÇ¾î ÀÖ´õ¶óµµ. Á¶°Ç¿¡ ºÎÇÕµÇÁø ¾Ê±â ¶§¹®¿¡ ±× ¾Æ·¡ li ´Â ºñ ¹Ýȯ
¡¤ Descendant Selector (¡°ancestor descendant¡±)
±âº» °èÃþ±¸Á¶·Î ½ºÆäÀ̽º¹Ù¿¡ µû¶ó ±¸ºÐµÇ¸ç, µÚ¿¡ ³ª¿Ã¼ö·Ï ¾ÕÀÇ ¿¤¸®¸ÕÆ®¿¡ ºÎÇյȸç, ÃÖÁ¾Á¶°ÇÀÇ ¿¤¸®¸ÕÆ®µéÀ» ¹ÝȯÇÑ´Ù.
¿¹) $(¡®form input¡¯) -> ÆûÅ×±× ¿µ¿ª¿¡ Æ÷ÇÔ µÇ¾î ÀÖ´Â ¿ä¼Ò Áß input ¿¤¸®¸ÕÆ®´Â ¸ðµÎ ¹ÝȯÇÑ´Ù.
¡¤ Next Adjacent Selector (¡°prev + next¡±)
ÈÄÀÚ(next)¸¦ ¹ÝȯÇϴµ¥ ÀüÀÚÀÇ Á¶°ÇÀÌ °®Ãß¾î Á®¾ß ÇÑ´Ù.
¿¹) $(¡®label + input¡¯); - > input ¿ä¼Ò¸¦ ¹ÝȯÇϴµ¥ ±× input ¿äÁ¶ ºÎ¸ð°¡ ¾Æ´Ñ Àü¿¡ ¿ä¼Ò°¡ label ¿ä¼Ò¿©¾ß ¹Ýȯ
¡¤ Next Siblings Selector (¡°prev ~ siblings¡±)
ÀüÀÚ Á¶ÀüÀÌ ½ÃÀÛ ÇÏ´Â µ¥ºÎÅÍ ÈÄÀÚ Á¶°Ç±îÁöÀÇ ¸ðµç ÇØ´ç ¿ä¼Ò¸¦ ¹ÝȯÇÑ´Ù.
¿¹. First) $(¡®#prev ~ div) -> ¿ä¼ÒµéÁß ¾ÆÀ̵𰡠prev °¡ ³ª¿Â´Ù¸é °Å±â¼ºÎÅÍ ³ª¿À´Â div ¿ä¼Ò ¸ðµÎ¸¦ ¹ÝȯÇÑ´Ù.
¿¹. Second) $(¡®#prev ~ div.ouksoo¡¯) -> ¿ä¼ÒµéÁß ¾ÆÀ̵𰡠prev °¡ ³ª¿Â´Ù¸é °Å±â¼ºÎÅÍ ³ª¿À´Â div ¿ä¼ÒÁß Å¬·¡½º°¡ ouksooÀÎ ¿ä¼ÒµéÀ» ¸ðµÎ ¹ÝȯÇÑ´Ù.
VISIBILITY FILTER SELECTOR
¼û¾î ÀÖ´Â ¿ä¼ÒµéÀ» ¹ÝȯÇÑ´Ù.
- Display °¡ ¡®none¡¯ ÀÎ °æ¿ì
- Form element ÀÇ type=¡±hidden¡¯ ÀÎ °æ¿ì
- ³ÐÀ̳ª ³ôÀÌ°¡ °¢°¢ ¡®0¡¯ À¸·Î ¼¼Æà µÇ¾î ÀÕ´Â °æ¿ì
- Á¶»ó element °¡ hidden µÇ¾î ÀÖÀ½ À¸·Î¼ ÀÚ±â Àڽŵµ º¸ÀÌÁö ¾Ê°Ô µÈ °æ¿ì
¿¹) $(¡®div:hidden¡¯) -> div ¿ä¼ÒÁß º¸ÀÌÁö ¾Ê´Â div ¿ä¼ÒµéÀ» ¸ðµÎ ¹ÝȯÇÑ´Ù. - <div></div> ¿©¼ º¸ÀÌÁö ¾Ê´Â °ÍÀ» Æ÷ÇÔµÇÁö ¾Ê´Â´Ù.
:hidden °ú´Â ¹Ý´ë·Î º¸¿©Áö´Â ¸ðµç ¿ä¼ÒµéÀ» ¹ÝȯÇÑ´Ù.
Ãâó: http://uip80.tistory.com/entry/jquery-selector?category=317570 [¿©¸íÀÇÁý]