- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > À¥ÇÁ·Î±×·¡¹Ö > jQuery ÀÔ¹®(¹Ù·Î¹Ù·Î ÇÒ ¼ö ÀÖ´Â)[Á¦¿ì¹Ìµð¾î]
À¥ µðÀÚÀÌ³Ê¿Í À¥ ÆÛºí¸®¼Å¸¦ À§ÇÑ ½ÇÀü Å×Å©´ÐÀ» ´ãÀº¡ºjQuery ÀÔ¹®¡». °¡Àå ½±°í Àç¹ÌÀÖ´Â jQuery ÀÔ¹®¼ÀÌ´Ù. jQuery¸¦ ÇнÀÇϱâ Àü¿¡ ¹Ýµå½Ã Á¤¸®ÇØ¾ß ÇÒ ±âº»ÀûÀÎ »çÇ׿¡ ´ëÇØ ´Ù·ç¾ú´Ù. ¶ÇÇÑ ½Ç·ºÅ͸¦ ºñ·ÔÇÑ ´Ù¾çÇÑ Á¶ÀÛ ÇÔ¼ö¿¡ ´ëÇØ ÇнÀÇϸç jQuery¿¡ ´ëÇÑ ÀüüÀûÀÎ È帧À» ÀÍÈ÷°í, Çö¾÷¿¡¼ ¸¹ÀÌ »ç¿ëÇÏ´Â ¿¹Á¦¸¦ ¼±Á¤ÇÏ¿© ½ÇÀü¿¡ µµ¿òÀÌ µÇµµ·Ï ÇÏ¿´´Ù.
ÀúÀÚ: À¯±¤¿
PART 01. jQuery ÀÔ¹®¿¡ ÇÊ¿äÇÑ ±âº» ¿ä¼Ò
CHAPTER 01. jQuery¶õ?
1. jQuery Áغñ
1) jQuery ¼³Ä¡
2) jQuery ÀÚ½À¼
3) jQuery°¡ Àû¿ëµÈ À¥ »çÀÌÆ® »ç·Ê
CHAPTER 02. jQuery¸¦ °øºÎÇϱâ À§ÇÑ ¼±¼ö ÇнÀ
1. javaScript
1) javaScriptÀÇ Åº»ý
2) ÁÖ¼®(Comment)
3) º¯¼ö
4) µ¥ÀÌÅÍ Å¸ÀÔ
5) ¹è¿
6) °´Ã¼
7) ÇÔ¼ö
8) À̺¥Æ®
9) Á¶°Ç¹®
10) ¹Ýº¹¹®
11) ¿¬»êÀÚ(Operator)
12) ŸÀÌ¸Ó ¸Þ¼µå
13) ·£´ý ÇÔ¼ö
14) ¼ýÀÚ Å¸ÀÔ º¯È¯ ÇÔ¼ö
15) javaScript vs. java
2. DOM ¹®¼ °´Ã¼ ¸ðµ¨
1) DOM
2) ³ëµåÀÇ ÇüÅÂ
3) DOM Tree
4) DOMÀ» Á¦¾îÇÏ´Â javaScript ¸í·É¾î(¼Ó¼º/¸Þ¼µå)
5) DOM ³ëµå¿¡ Á¢±ÙÇÏ´Â ¹æ¹ý(javaScript vs. jQuery)
3. HTML/CSS
CHAPTER 03. jQuery ±âº» °³³ä
1. jQuery ±â´É Ä«Å×°í¸®
1) Core(ÇÙ½É °³³ä)
2) Selector(½Ç·ºÅÍ)
3) Attributes/CSS(¼Ó¼º)
4) Manipulation(Á¶ÀÛ)
5) Traversing(Ž»ö)
6) Events
7) Effects
8) UI
9) Ajax
2. ¿ö¹Ö¾÷ - Hello World!
1) Àüü ÄÚµå
2) ÄÚµå ¼³¸í
3) \$( )ÀÇ ÀǹÌ
4) \$(this)ÀÇ ÀǹÌ
5) ¹®¼ Áغñ À̺¥Æ®
6) µû¿ÈÇ¥
PART 02. jQuery ±âÃÊ
CHAPTER 01. ¼±ÅÃÀÚ(Selector)
1. ±âº» ¼±ÅÃÀÚ(Basic)
1) \$(h2)
2) \$(.group)
3) \$(#main)
4) \$(p, div, #nav)
5) \$(*)
2. °èÃþ ¼±ÅÃÀÚ(Hierarchy)
1) \$("div#container li")
2) \$("div > p")
3) \$("#first li")
4) \$("#second ~ li")
3. ¼Ó¼º ¼±ÅÃÀÚ(Attribute)
1) \$("li a[href=#page2]")
2) \$("li a[href^=http]")
3) \$("li a[href\$=.com]")
4) \$("[href*=2]")
5) \$("img[src !=sample1.png]")
6) \$("[src][alt]")
4. ±âº» ÇÊÅÍ ¼±ÅÃÀÚ(Basic Filter)
1) \$("li:eq(6)")
2) \$("li:gt(5)")
3) \$("li:lt(3)")
4) \$("li:first, li:last")
5) \$("li:even")
6) \$("li:odd")
7) \$("li:not(:eq(7))")
5. ³»¿ë ÇÊÅÍ ¼±ÅÃÀÚ(content Filter)
1) \$("li:contains(ap)")
2) \$("ul:has(li)")
3) \$("li:empty").text("Hello")
4) \$("li:parent")
6. º¸ÀÓ ÇÊÅÍ ¼±ÅÃÀÚ(Visibility Filter)
7. ÀÚ½Ä ¿ä¼Ò ÇÊÅÍ ¼±ÅÃÀÚ(Child Filter)
1) \$("li::first-child")
2) \$("li:last-child")
3) nth-child(index/even/odd/equation)
4) \$("div p:only-child")
8. Æû ¼±ÅÃÀÚ(Forms)
CHAPTER 02. Ž»ö(Traversing)
1. Æ®¸® ±¸Á¶ Ž»ö(Tree Traversal)
1) \$(div#container).children(p)
2) \$(div#container).find(p)
3) \$(p#part1).prev( )
4) \$(p#part1).next( )
5) \$(p#part1).siblings( )
6) \$(p#part1).parent( )
2. ÇÊÅ͸µ(Filtering)
1) \$(div#main p).first( )
2) \$(div#main p).last( )
3) \$(div#main p).eq(1)
4) \$(div).filter(".middle")
5) \$(div).not(.middle)
6) \$(li).has(ul)
CHAPTER 03. DOM º¯°æ(Dom Manipulation)
1. append( )
1) ¸Å°³ º¯¼ö : content
2) ¹Ì¸® º¸±â
2. prepend( )
1) ¸Å°³ º¯¼ö : content
2) ¹Ì¸® º¸±â
3. html( )/html(htmlString)
1) html( )
2) html(htmlString)
4. text( ) / text(textString)
1) text( )
2) text(textString)
5. remove( )
6. empty( )
7. detach( )
CHAPTER 04. CSS Styling and jQuery
1. css(propertyName)
2. css(propertyName, value)
3. addClass(className)
4. removeClass( [className])
5. addClass( )¿Í removeClass( ) È°¿ë ¿¹Á¦
1) ¹Ì¸® º¸±â
2) HTML
3) CSS
4) jQuery
5) ½ÇÇà
CHAPTER 05. Events
1. À̺¥Æ® ó¸® ¹æ½Ä
1) javaScript À̺¥Æ® ó¸® ¹æ½Ä
2) jQuery À̺¥Æ® ó¸® ¹æ½Ä
2. jQuery À̺¥Æ® ÁÖÁ¦º° ±¸ºÐ
1) ¸¶¿ì½º À̺¥Æ®
2) hover À̺¥Æ®
3) ¹®¼ ·Îµù À̺¥Æ®
4) Æû À̺¥Æ®
5) Å°º¸µå À̺¥Æ®
6) À¥ ºê¶ó¿ìÀú À̺¥Æ®
3. À̺¥Æ® È帧 ¹× Â÷´Ü
1) À̺¥Æ® È帧
2) À̺¥Æ® Â÷´Ü
CHAPTER 06. Effects and Custom Animations
1. Basics
1) hide( )
2) show( )
3) toggle( )
2. Fading
1) fadeIn( )
2) fadeOut( )
3) fadeToggle( )
4) fadeTo( )
3. Sliding Effects
1) slideDown( )
2) slideUp( )
3) slideToggle( )
4. Custom Animations
1) properties
2) ¾Ö´Ï¸ÞÀ̼ÇÀÇ ´Ù¾çÇÑ Ç¥Çö ¹æ¹ý
3) ¾Ö´Ï¸ÞÀÌ¼Ç Å¥
4) ¾Ö´Ï¸ÞÀÌ¼Ç Á¤Áö(Stopping Animations)
5) ¾Ö´Ï¸ÞÀÌ¼Ç ¿¬±â(Áö¿¬)
CHAPTER 07. jQuery UI
1. ´Ù¿î·Îµå ¹× ¼³Á¤
1) ù ¹ø° ¹æ¹ý
2) µÎ ¹ø° ¹æ¹ý
2. Ä÷¯ ¾Ö´Ï¸ÞÀ̼Ç
1) ¹Ì¼Ç : ³»ºñ°ÔÀ̼ÇÀÇ ±Û¾¾¿Í ¹è°æ»öÀ» ¾Ö´Ï¸ÞÀ̼ÇÀ» »ç¿ëÇÏ¿© º¯°æÇغ¸±â
2) ¹Ì¸® º¸±â
3. ´Ù¾çÇÑ easing È¿°ú
1) ¹Ì¼Ç : ´Ù¾çÇÑ easing °æÇèÇϱâ
2) ¹Ì¸® º¸±â
CHAPTER 08. jQuery PlugIn
1. jQuery PlugIn
2. jQuery PlugIn »ç¿ë ¹æ¹ý
3. ³»°¡ ¸¸µå´Â PlugIn Á¦ÀÛ¹ý
1) ±âº» Çü½Ä
2) ÄÚµå »ç·Ê
3) ÆÄÀÏ ÀúÀå
4) »ç¿ë¹ý
4. ¶óÀ̼±½º(ÀúÀÛ±Ç) È®ÀÎ
1) MIT ¶óÀ̼±½º
2) BSD ¶óÀ̼±½º
3) GPL ¶óÀ̼±½º
PART 03. jQuery ½ÇÀü ¿¹Á¦
CHAPTER 01. Gallery
1. ½æ³×ÀÏ Æ÷Åä °¶·¯¸®
2. ¼³¸í(ÀÚ¸·)À» Á¦°øÇÏ´Â °¶·¯¸®
3. ºÎµå·¯¿î(FadeIn-Out) Àå¸é Àüȯ °¶·¯¸®
4. lightBox PlugIn
5. Gallery PlugIn - skitter
CHAPTER 02. ³»ºñ°ÔÀ̼Ç
1. TreeÇü ³»ºñ°ÔÀ̼Ç
2. ¾îµð¼³ª ÆîÃÄÁö´Â ³»ºñ°ÔÀ̼Ç
3. ½½¶óÀ̵ù ³»ºñ°ÔÀ̼Ç(¹Ù³×ÀÌ ¸Þ´º)
CHAPTER 03. ´Ù¾çÇÑ À̹ÌÁö È¿°ú
1. ¹è°æ À̹ÌÁö¸¦ È°¿ëÇÑ ¿ªµ¿Àû ¿À¹ö È¿°ú
2. ¿¬¼Ó À̹ÌÁö¸¦ »ç¿ëÇÏ¿© ¾Ö´Ï¸ÞÀÌ¼Ç Á¦¾îÇϱâ
3. À̹ÌÁö À̵¿À» »ç¿ëÇÑ pan È¿°ú
4. »ö»ó ¾Ö´Ï¸ÞÀ̼ÇÀ» È°¿ëÇÏ¿© ¹è°æ Ä÷¯ ¹Ù²Ù±â
5. Á÷Á¢ ¸¸µé¾î º¸´Â À̹ÌÁö hover È¿°ú
6. Pixastic Image Processing Library
7. Zoomooz PlugIn
CHAPTER 04. À¯¿ëÇÑ ±â´É
1. drag and drop ±â´É
2. ½½¶óÀÌ´õ ¹Ù¸¦ »ç¿ëÇÑ ÄÜÅÙÃ÷ º¸±â
3. One Page Scroll
4. toolTip µµ¿ò¸» È¿°ú ¸¸µé±â
CHAPTER 01. jQuery¶õ?
1. jQuery Áغñ
1) jQuery ¼³Ä¡
2) jQuery ÀÚ½À¼
3) jQuery°¡ Àû¿ëµÈ À¥ »çÀÌÆ® »ç·Ê
CHAPTER 02. jQuery¸¦ °øºÎÇϱâ À§ÇÑ ¼±¼ö ÇнÀ
1. javaScript
1) javaScriptÀÇ Åº»ý
2) ÁÖ¼®(Comment)
3) º¯¼ö
4) µ¥ÀÌÅÍ Å¸ÀÔ
5) ¹è¿
6) °´Ã¼
7) ÇÔ¼ö
8) À̺¥Æ®
9) Á¶°Ç¹®
10) ¹Ýº¹¹®
11) ¿¬»êÀÚ(Operator)
12) ŸÀÌ¸Ó ¸Þ¼µå
13) ·£´ý ÇÔ¼ö
14) ¼ýÀÚ Å¸ÀÔ º¯È¯ ÇÔ¼ö
15) javaScript vs. java
2. DOM ¹®¼ °´Ã¼ ¸ðµ¨
1) DOM
2) ³ëµåÀÇ ÇüÅÂ
3) DOM Tree
4) DOMÀ» Á¦¾îÇÏ´Â javaScript ¸í·É¾î(¼Ó¼º/¸Þ¼µå)
5) DOM ³ëµå¿¡ Á¢±ÙÇÏ´Â ¹æ¹ý(javaScript vs. jQuery)
3. HTML/CSS
CHAPTER 03. jQuery ±âº» °³³ä
1. jQuery ±â´É Ä«Å×°í¸®
1) Core(ÇÙ½É °³³ä)
2) Selector(½Ç·ºÅÍ)
3) Attributes/CSS(¼Ó¼º)
4) Manipulation(Á¶ÀÛ)
5) Traversing(Ž»ö)
6) Events
7) Effects
8) UI
9) Ajax
2. ¿ö¹Ö¾÷ - Hello World!
1) Àüü ÄÚµå
2) ÄÚµå ¼³¸í
3) \$( )ÀÇ ÀǹÌ
4) \$(this)ÀÇ ÀǹÌ
5) ¹®¼ Áغñ À̺¥Æ®
6) µû¿ÈÇ¥
PART 02. jQuery ±âÃÊ
CHAPTER 01. ¼±ÅÃÀÚ(Selector)
1. ±âº» ¼±ÅÃÀÚ(Basic)
1) \$(h2)
2) \$(.group)
3) \$(#main)
4) \$(p, div, #nav)
5) \$(*)
2. °èÃþ ¼±ÅÃÀÚ(Hierarchy)
1) \$("div#container li")
2) \$("div > p")
3) \$("#first li")
4) \$("#second ~ li")
3. ¼Ó¼º ¼±ÅÃÀÚ(Attribute)
1) \$("li a[href=#page2]")
2) \$("li a[href^=http]")
3) \$("li a[href\$=.com]")
4) \$("[href*=2]")
5) \$("img[src !=sample1.png]")
6) \$("[src][alt]")
4. ±âº» ÇÊÅÍ ¼±ÅÃÀÚ(Basic Filter)
1) \$("li:eq(6)")
2) \$("li:gt(5)")
3) \$("li:lt(3)")
4) \$("li:first, li:last")
5) \$("li:even")
6) \$("li:odd")
7) \$("li:not(:eq(7))")
5. ³»¿ë ÇÊÅÍ ¼±ÅÃÀÚ(content Filter)
1) \$("li:contains(ap)")
2) \$("ul:has(li)")
3) \$("li:empty").text("Hello")
4) \$("li:parent")
6. º¸ÀÓ ÇÊÅÍ ¼±ÅÃÀÚ(Visibility Filter)
7. ÀÚ½Ä ¿ä¼Ò ÇÊÅÍ ¼±ÅÃÀÚ(Child Filter)
1) \$("li::first-child")
2) \$("li:last-child")
3) nth-child(index/even/odd/equation)
4) \$("div p:only-child")
8. Æû ¼±ÅÃÀÚ(Forms)
CHAPTER 02. Ž»ö(Traversing)
1. Æ®¸® ±¸Á¶ Ž»ö(Tree Traversal)
1) \$(div#container).children(p)
2) \$(div#container).find(p)
3) \$(p#part1).prev( )
4) \$(p#part1).next( )
5) \$(p#part1).siblings( )
6) \$(p#part1).parent( )
2. ÇÊÅ͸µ(Filtering)
1) \$(div#main p).first( )
2) \$(div#main p).last( )
3) \$(div#main p).eq(1)
4) \$(div).filter(".middle")
5) \$(div).not(.middle)
6) \$(li).has(ul)
CHAPTER 03. DOM º¯°æ(Dom Manipulation)
1. append( )
1) ¸Å°³ º¯¼ö : content
2) ¹Ì¸® º¸±â
2. prepend( )
1) ¸Å°³ º¯¼ö : content
2) ¹Ì¸® º¸±â
3. html( )/html(htmlString)
1) html( )
2) html(htmlString)
4. text( ) / text(textString)
1) text( )
2) text(textString)
5. remove( )
6. empty( )
7. detach( )
CHAPTER 04. CSS Styling and jQuery
1. css(propertyName)
2. css(propertyName, value)
3. addClass(className)
4. removeClass( [className])
5. addClass( )¿Í removeClass( ) È°¿ë ¿¹Á¦
1) ¹Ì¸® º¸±â
2) HTML
3) CSS
4) jQuery
5) ½ÇÇà
CHAPTER 05. Events
1. À̺¥Æ® ó¸® ¹æ½Ä
1) javaScript À̺¥Æ® ó¸® ¹æ½Ä
2) jQuery À̺¥Æ® ó¸® ¹æ½Ä
2. jQuery À̺¥Æ® ÁÖÁ¦º° ±¸ºÐ
1) ¸¶¿ì½º À̺¥Æ®
2) hover À̺¥Æ®
3) ¹®¼ ·Îµù À̺¥Æ®
4) Æû À̺¥Æ®
5) Å°º¸µå À̺¥Æ®
6) À¥ ºê¶ó¿ìÀú À̺¥Æ®
3. À̺¥Æ® È帧 ¹× Â÷´Ü
1) À̺¥Æ® È帧
2) À̺¥Æ® Â÷´Ü
CHAPTER 06. Effects and Custom Animations
1. Basics
1) hide( )
2) show( )
3) toggle( )
2. Fading
1) fadeIn( )
2) fadeOut( )
3) fadeToggle( )
4) fadeTo( )
3. Sliding Effects
1) slideDown( )
2) slideUp( )
3) slideToggle( )
4. Custom Animations
1) properties
2) ¾Ö´Ï¸ÞÀ̼ÇÀÇ ´Ù¾çÇÑ Ç¥Çö ¹æ¹ý
3) ¾Ö´Ï¸ÞÀÌ¼Ç Å¥
4) ¾Ö´Ï¸ÞÀÌ¼Ç Á¤Áö(Stopping Animations)
5) ¾Ö´Ï¸ÞÀÌ¼Ç ¿¬±â(Áö¿¬)
CHAPTER 07. jQuery UI
1. ´Ù¿î·Îµå ¹× ¼³Á¤
1) ù ¹ø° ¹æ¹ý
2) µÎ ¹ø° ¹æ¹ý
2. Ä÷¯ ¾Ö´Ï¸ÞÀ̼Ç
1) ¹Ì¼Ç : ³»ºñ°ÔÀ̼ÇÀÇ ±Û¾¾¿Í ¹è°æ»öÀ» ¾Ö´Ï¸ÞÀ̼ÇÀ» »ç¿ëÇÏ¿© º¯°æÇغ¸±â
2) ¹Ì¸® º¸±â
3. ´Ù¾çÇÑ easing È¿°ú
1) ¹Ì¼Ç : ´Ù¾çÇÑ easing °æÇèÇϱâ
2) ¹Ì¸® º¸±â
CHAPTER 08. jQuery PlugIn
1. jQuery PlugIn
2. jQuery PlugIn »ç¿ë ¹æ¹ý
3. ³»°¡ ¸¸µå´Â PlugIn Á¦ÀÛ¹ý
1) ±âº» Çü½Ä
2) ÄÚµå »ç·Ê
3) ÆÄÀÏ ÀúÀå
4) »ç¿ë¹ý
4. ¶óÀ̼±½º(ÀúÀÛ±Ç) È®ÀÎ
1) MIT ¶óÀ̼±½º
2) BSD ¶óÀ̼±½º
3) GPL ¶óÀ̼±½º
PART 03. jQuery ½ÇÀü ¿¹Á¦
CHAPTER 01. Gallery
1. ½æ³×ÀÏ Æ÷Åä °¶·¯¸®
2. ¼³¸í(ÀÚ¸·)À» Á¦°øÇÏ´Â °¶·¯¸®
3. ºÎµå·¯¿î(FadeIn-Out) Àå¸é Àüȯ °¶·¯¸®
4. lightBox PlugIn
5. Gallery PlugIn - skitter
CHAPTER 02. ³»ºñ°ÔÀ̼Ç
1. TreeÇü ³»ºñ°ÔÀ̼Ç
2. ¾îµð¼³ª ÆîÃÄÁö´Â ³»ºñ°ÔÀ̼Ç
3. ½½¶óÀ̵ù ³»ºñ°ÔÀ̼Ç(¹Ù³×ÀÌ ¸Þ´º)
CHAPTER 03. ´Ù¾çÇÑ À̹ÌÁö È¿°ú
1. ¹è°æ À̹ÌÁö¸¦ È°¿ëÇÑ ¿ªµ¿Àû ¿À¹ö È¿°ú
2. ¿¬¼Ó À̹ÌÁö¸¦ »ç¿ëÇÏ¿© ¾Ö´Ï¸ÞÀÌ¼Ç Á¦¾îÇϱâ
3. À̹ÌÁö À̵¿À» »ç¿ëÇÑ pan È¿°ú
4. »ö»ó ¾Ö´Ï¸ÞÀ̼ÇÀ» È°¿ëÇÏ¿© ¹è°æ Ä÷¯ ¹Ù²Ù±â
5. Á÷Á¢ ¸¸µé¾î º¸´Â À̹ÌÁö hover È¿°ú
6. Pixastic Image Processing Library
7. Zoomooz PlugIn
CHAPTER 04. À¯¿ëÇÑ ±â´É
1. drag and drop ±â´É
2. ½½¶óÀÌ´õ ¹Ù¸¦ »ç¿ëÇÑ ÄÜÅÙÃ÷ º¸±â
3. One Page Scroll
4. toolTip µµ¿ò¸» È¿°ú ¸¸µé±â