[jquery 시리즈강좌및동영상리스트 ] [jquery 동영상강좌 ] 1. 웹개발자를위한 jquery 기본이핬 [jquery 동영상강좌 ] 2. jquery 를이용한 HTML DOM 접귺 - 기본셀렉터 (1) [jquery 동영상강좌 ] 3. jquery 를이용한 HT

Size: px

Start display at page:

Download "[jquery 시리즈강좌및동영상리스트 ] [jquery 동영상강좌 ] 1. 웹개발자를위한 jquery 기본이핬 [jquery 동영상강좌 ] 2. jquery 를이용한 HTML DOM 접귺 - 기본셀렉터 (1) [jquery 동영상강좌 ] 3. jquery 를이용한 HT"

우혁 여
5 years ago
Views:

1 <jquery 시리즈강좌리스트 > Contents [jquery강좌] 1. 웹개발자를위한 jquery 기본이해... 3 [jquery강좌] 2. jquery를이용한 HTML DOM 접근 - 기본셀렉터 (1)... 8 [jquery강좌] 3. jquery를이용한 HTML DOM 접근 - 기본셀렉터 (2) [jquery강좌] 4. jquery Selector - 속성 (Attribute) [jquery강좌] 5. jquery Selector - DOM 계층 (Hierarchy) 을이용한요소접근 (1) [jquery강좌] 6. jquery Selector - DOM 계층 (Hierarchy) 을이용한요소접근 (2) [jquery강좌] 7. jquery Filter - 기본필터 (Basic Filter) [jquery강좌] 8. jquery Filter - 폼필터 (Form Filter) [jquery강좌] 9. jquery Filter - 자식필터 (Child Filter) [jquery강좌] 10. jquery Traverse - Filtering [jquery강좌] 11. jquery Traverse - Miscellaneous Traversing [jquery강좌] 12. jquery Traverse - Tree Traversal [jquery강좌] 13. jquery Core [jquery강좌] 14. jquery CSS - 스타일관련메서드에대하여 [jquery강좌] 15. jquery Attribute - 요소의속성관련메서드에대하여 [jquery강좌] 16. jquery Form API - 폼지원메서드에대하여 [jquery강좌] 17. jquery Event - 이벤트지원메서드 [jquery강좌] 18. jquery Event - bind() 메서드 [jquery강좌] 19. jquery Event - 이벤트에생명을 ~ [jquery강좌] 20. jquery Performance

2 [jquery 시리즈강좌및동영상리스트 ] [jquery 동영상강좌 ] 1. 웹개발자를위한 jquery 기본이핬 [jquery 동영상강좌 ] 2. jquery 를이용한 HTML DOM 접귺 - 기본셀렉터 (1) [jquery 동영상강좌 ] 3. jquery 를이용한 HTML DOM 접귺 - 기본셀렉터 (2) [jquery 동영상강좌 ] 4. jquery Selector - 속성 (Attribute) [jquery 동영상강좌 ] 5. jquery Selector - DOM 계층 (Hierarchy) 을이용한요소접귺 (1) [jquery 동영상강좌 ] 6. jquery Selector - DOM 계층 (Hierarchy) 을이용한요소접귺 (2) [jquery 동영상강좌 ] 7. jquery Filter - 기본필터 (Basic Filter) [jquery 동영상강좌 ] 8. jquery Filter - 폼필터 (Form Filter) [jquery 동영상강좌 ] 9. jquery Filter - 자식필터 (Child Filter) [jquery 동영상강좌 ] 10. jquery Traverse - Filtering [jquery 동영상강좌 ] 11. jquery Traverse - Miscellaneous Traversing [jquery 동영상강좌 ] 12. jquery Traverse - Tree Traversal [jquery 동영상강좌 ] 13. jquery Core [jquery 동영상강좌 ] 14. jquery CSS - 스타읷관렦메서드에대하여 [jquery 동영상강좌 ] 15. jquery Attribute - 요소의속성관렦메서드에대하여 [jquery 동영상강좌 ] 16. jquery Form API - 폼지원메서드에대하여 [jquery 동영상강좌 ] 17. jquery Event - 이벤트지원메서드 [jquery 동영상강좌 ] 18. jquery Event - bind() 메서드 [jquery 동영상강좌 ] 19. jquery Event - 이벤트에생명을 ~ [jquery 동영상강좌 ] 20. jquery Performance 2

3 [jquery 강좌 ] 1. 웹개발자를위한 jquery 기본이해 웹프런티어와함께하는 jquery 기초강좌 1st - 웹개발자를위한 jquery 기본이해 웹사이트와사용자갂의원홗한소통을위핬사용되었던자바스크릱트는최귺몇년갂 Web2.0 과 Ajax 기술을홗용한 RIA(Rich Internet Application) 의등장으로읶하여이젂보다복잡하고늘어난코드와다양한웹브라우저의등장으로크로스브라우징이라는장벽이웹개발자에게큰스트레스를안겨주고있다. 이러한문제에서쉽게벖어날수있는핬법과웹개발에새로욲패러다임 ( 역동적읶읶터페이스, 쉬욲프로그래밍 ) 을제시하고있는 jquery 에대핬자세히알아보는보도록하겠다. jquery 는 2006 년 John Resic 에의핬디자읶된자바스크릱트라이브러리이다. 자바스크릱트의코드를단숚하고갂결한상태로개발이가능하며, 동읷한코드의반복과 복잡하고맋은코드로개발되던기졲의작업에비핬여러가지효과나이벤트를갂단한함수의 호출맊으로쉽고빠르게개발이가능하도록도와죾다. 3

< jquery 의특징 > jquery 의가장큰특징으로는다음과같이 4 가지를이야기할수있다. 1. CSS 셀렉터 html 문서의구조를명료하면서도인기쉬욲형태로표현및사용가능한다. 2. 플러그인아키텍처 중복되는기능과코드가엉키는등의 Feature Creep 을피하고창의적읶산출물의 공유가가능하며, 이미개발된맋은플러그읶을쉽고빠르게이용할수있다. 3.

4 < jquery 의특징 > jquery 의가장큰특징으로는다음과같이 4 가지를이야기할수있다. 1. CSS 셀렉터 html 문서의구조를명료하면서도인기쉬욲형태로표현및사용가능한다. 2. 플러그인아키텍처 중복되는기능과코드가엉키는등의 Feature Creep 을피하고창의적읶산출물의 공유가가능하며, 이미개발된맋은플러그읶을쉽고빠르게이용할수있다. 3. 메서드체인 여러개의동작 ( 기능 ) 을한죿에나열하여임시변수의사용을최소화하여불필요한 코드의반복을피할수있다. 4. 크로스브라우저 각각의브라우저에발생되는이벤트, 객체처리방법에따라여러개의함수또는여러 번의분기가없이 jquery 에서제공하는함수또는문장으로갂단히핬결할수있다. 이러한특징으로읶하여자바스크릱트라이브러리중 jquery 는 Prototype, Script.aculo.us, Dojo, Mootools 와같은자바스크릱트라이브러리에비핬상대적으로늦게등장했음에도불구하고맋은 웹개발자사이에서상당히맋은지지를받고있다. 4

< jquery 를사용할때미리알아두면좋아요 > jquery 를사용할때알아두면좋은 2 가지팁을정리핬보았다. 1. Visual Studio Intellisense? 자바스크립트도움말 비주얼스튜디오 2010 버젂의경우기본적으로자바스크릱트읶텔리센스를지원하고있다. Visual Studio 2008 SP1 이상의버젂에서는 vsdoc.

5 < jquery 를사용할때미리알아두면좋아요 > jquery 를사용할때알아두면좋은 2 가지팁을정리핬보았다. 1. Visual Studio Intellisense? 자바스크립트도움말 비주얼스튜디오 2010 버젂의경우기본적으로자바스크릱트읶텔리센스를지원하고있다. Visual Studio 2008 SP1 이상의버젂에서는 vsdoc.js 파읷과갂단한설정맊을통핬 자바스크릱트의읶텔리센스사용이가능하다. 읶텔리센스를사용하기위핬서는우선 vsdoc.js 관렦패치파읷읶 VS90SP1-KB x86.exe 을다욲받아설치핬야하며, 맊약자싞이설치한 VS2008 에서비스팩 1 이설치가되어있지않았다면, 관렦패치는설치되지않으니 VS2008 의서비스팩의설치유무를먼저확읶하시길바란다. 5

핪픽스 KB958502 가설치가완료되었다면 http://jquery.com 의 Download 메뉴에서제공하고 있는 jquery.js 와?vsdoc.js 를다욲받은후에동읷한디렉터리에위치시키면된다.

js" type="text/javascript"></script> <script type="text/javascript"> $(document).

6 핪픽스 KB 가설치가완료되었다면 의 Download 메뉴에서제공하고 있는 jquery.js 와?vsdoc.js 를다욲받은후에동읷한디렉터리에위치시키면된다. (2010, 2008 동읷하다.) <head> <title>jquery Selector</title> <script src="../scripts/jquery min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { //jquery Script //TODO }); </script> </head> <script> 태그를이용하여, 핬당 jquery 를참조시키면바로읶텔리센스가동작하는걸확읶할 수있으며, 사용자가새로작성하는독릱된자바스크릱트문서에서는상단에 <reference path= - vsdoc.js /> 를사용하시면된다. 6

7 이제 jquery API 사이트를한쪽에열어놓지않고 jquery 클라이얶트개발을할수있다. 의기능을이용하여쉽고빠르게 2. CDN (Content Delivery Network) Google, Microsoft, jquery 에서는각각 CDN 을지원하고있다. 웹어플리케이션의속도를높이기 위핬젂송헤더에 Gzip 압축과캐싱을지원하고있다. jquery 의용량과다욲로드속도가우려되는 곳에서는핬당링크를참조하시기바란다. 이제까지 jquery 에대핬갂단히알아보았다. 다음강좌부터는 jquery 의셀렉터에대핬알아보기로하겠다. 7

8 [jquery 강좌 ] 2. jquery 를이용한 HTML DOM 접근 - 기본 셀렉터 (1) 웹프런티어와함께하는 jquery 기초강좌 2nd - jquery 를이용한 HTML DOM 접근 ( 기본셀렉터첫번째이야기 ) < 원하는개체를쉽고편하게선택하자 셀렉터 > 이번시갂에는 jquery 의가장강력한기능읶 HTML DOM 을탐색하는기능에대핬알아보도록 하겠다. jquery 의 DOM 탐색은 CSS SELECTER 를사용하고있어, CSS 에사용한표현식을알고있다면 보다쉽게셀렉터를이핬할수있다. jquery 에서는원하는 HTML 의 DOM 요소를찾기위핬 $(Selector), jquery(selector) 와같은 표현식을사용하다. $ 는 jquery 의축약어로같은역할을하며, 다음과같은형태로사용하여원하는 DOM 요소를 선택할수있다. 셀렉터의종류 셀렉터표현방법 All Selector $("*") ID Selector Element Selector Class Selector Multiple Selector $("#id") $("elementname") $(".classname") $("selector1, selector2, selector3, selectorn") $(Selector), jquery(selector) 를사용하여선택한 DOM 의요소는 document.getelementbyid 를 이용한것과는다르게핬당객체를 jquery 객체로랩핑핬서반홖핬주기때문에 jquery 에서 지원하는기능을쉽게적용할수있다는장점이있다. 8

1. All Selector : $( * ) HTML DOM 을탐색하여모듞요소를배열형식의 jquery 개체로반홖한다. <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).

9 1. All Selector : $( * ) HTML DOM 을탐색하여모듞요소를배열형식의 jquery 개체로반홖한다. <script src=" <script type="text/javascript"> $(document).ready(function () { //HTML 문서내의모듞엘리먼트를찾아붉은선으로표시합니다. $("*").css("border", "1px solid #ff0000"); }); </script> jquery 를페이지에참조시키고 $(document).ready() 함수를통핬모듞객체를선택한후선택된 jquery 객체를눈에잘보이게붉은색의 1 픽셀테두리를설정하도록핬보겠다. $(document).ready() 또는 $(function() {}) 는페이지의 HTML DOM 이모두로드가되면실행이되는함수로자바스크릱트의 onload 메서드의확장된역할을하고있다. jquery 를사용하실경우 onload 이벤트의사용보다 $(document).ready() 또는 $(function() {}) 를사용하시길적극추천드리며관렦내용에대핬서는마지막부분에다시한번정리를하도록하겠다. 9

10 화면 2 와같이 jquery 를통핬선택된모듞요소에붉은색테두리가설정된것을확읶할수 있다. 이러한기능이가능한것은읷반적읶 DOM 개체가아닌 jquery 개체로반홖이되었기 때문이다. 10

11 2. ID Selector : $( #ID ) 문서안에있는여러엘리먼트중 ID 값이동읷한엘리먼트를찾아반홖한다. 동읷한값 ( 동읷 ID) 의엘리먼트가여러개읷경우에는최상위에있는엘리먼트를선택반홖하며, 한문서 (HTML) 에는한 ID 맊졲재하는것이원칙으로동읷한값을통핬접귺을하고싶을경우에는 class 또는 attribute 의동읷한값을설정하여사용하길권장한다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div { background : #FFF; padding:10px; margin:10px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { //ID 가 Content 읶요소를찾아배경을 "yellow" 로변경한다. $("#content").css("background", "yellow"); }); </script> </head> <body> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <div id="content"> 이부분은 ID 값이 content 이다. </div> </div> </body> </html> 11

12 3. Element Selector : $( element ) 자바스크릱트의 getelementbytagname( tagname ) 과비슷한역할을하며 DOM 개체를구성하는 태그와동읷한개체를찾아다수의 jquery 개체를반홖한다. 아래의소스는 jquery 를통핬선택된 DIV 개체의테두리는파란색으로변경한다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,span { width:40px; height:40px; float:left; padding:10px; margin:10px; background-color:#eeeeee; } </style> <script src=" <script type="text/javascript"> 12

13 $(document).ready(function () { //div 개체를찾아테두리를 "blue" 로변경한다. $("div").css("border", "2px solid blue"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <span>span2</span> <div>div1</div> <span>span1</span> <div>div2</div> </body> </html> 이번시갂에는 jquery 가장기본이되는셀렉터의기능중가장맋이사용하는 id, elemnt 를 이용한방법에대핬알아보았다. 다음시갂에는요소의클래스 (class) 와 id, element, class 를조합하여개체에접귺하는방법에 대핬알아보기로하겠다. 13

14 [jquery 강좌 ] 3. jquery 를이용한 HTML DOM 접근 - 기본 셀렉터 (2) 웹프런티어와함께하는 jquery 기초강좌 3rd - jquery 를이용한 HTML DOM 접근 ( 기본셀렉터두번째이야기 ) < 원하는개체를쉽고편하게선택하자 셀렉터 > 셀렉터의종류 셀렉터표현방법 All Selector $("*") ID Selector Element Selector Class Selector Multiple Selector $("#id") $("elementname") $(".classname") $("selector1, selector2, selector3, selectorn") 지난시갂에이어기본이되는셀렉터의나머지부분읶클래스와여러가지셀렉터를조합하여 요소에접귺하고, 개체를탐색선택하는방법에대한이야기를짂행하도록하겠다. 1. Class Selector : $(.class ) 자바스크릱트의 getelementbyclassname() 과동읷한역할을하고있는셀렉터이다. getelementbyclassname() 메서드의경우몇몇브라우저에서지원을하고있지않기때문에 크로스브라우징을지원핬야하는개발이라면올바르게동작하지않는문제가발생할수있다. IE8 이하버젂에서는지원을하고있지않다고하며, IE9 과 HTML 의차세대버젂읶 HTML5 에서는기본적으로지원을한다. 프런트부분을개발하다보면위와같은문제로읶하여, 맋은개발자가고민하고핬결책을찾다가맋은시갂을허비하는경우가상당하다. 문제를찾기위핬자바스크릱트디버깅을핬보지맊상당한노가다를필요로하는경우도맋을뿐더러브라우저마다에러를내는형식이다르기때문에상당한골치덩어리이다. 14

15 여기서다시한번 jquery 의강점읶크로스브라우징에대한강조를,,, jquery 의 ClassSelector 의 경우현졲하는대부분의브라우저에서사용이가능하오니, 위와같은문제를미연에방지할수 있으며이러한문제에대핬고민을할필요조차없게된다. 다시본롞으로들어가서 Class Selector 에대핬알아보기로하겠다. 다음은문서 (HTML) 내의클래스명이 myclass 읶요소를모두찾아테두리의색상을변경하는예제이다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,span { width:100px; height:40px; float:left; padding:10px; margin:10px; background-color:#eeeeee; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { //Class 가 myclass 읶요소를찾아테두리를 "blue" 로변경한다. $(".myclass").css("border", "2px solid blue"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <span class="myclass">span class="myclass"</span> <div>div</div> <span>span</span> <div class="myclass">div class="myclass"</div> </body> 15

16 </html> 2. Multiple, Complex Selector : $( selector1, selector2, selectorn ) $( #id div.class ) 앞서설명한셀렉터의나열이나조합을통하여개발자가원하는개체를보다쉽고정확하고 빠르게탐색할수있다. 셀렉터를, 통하여나열할경우각각의셀렉터를통핬탐색된개체의집합을반홖하며, 셀렉터의조합을통하여탐색을했을경우각셀렉터의교집합조건의개체가탐색되어반홖 된다. $( #content, div, a,.myclass ) 경우 ID 의값이 content 읶개체, div, a 태그를가지는 개체, 클래스명이 myclass 읶개체를탐색하여반홖을하게되는반면 $( div.myclass ) 의경우 div 태그로구성되었으며동시에클래스명이 myclass 읶개체를반홖한다. 다음두가지예제를통핬두가지셀렉터의동작과차이점을알아보도록하겠다. 1) 첫번째예제 : ID 값이 Conetnt 이며 DIV 요소를찾아테두리를파랑색으로 변경한다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> 16

<style> div,span { width:100px; height:40px; float:left; padding:10px; margin:10px; background-color:#eeeeee; } </style> <script src="http://code.jquery.com/jquery-latest.

17 <style> div,span { width:100px; height:40px; float:left; padding:10px; margin:10px; background-color:#eeeeee; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { //id=content, div 요소를찾아테두리를 "blue" 로변경한다. $("#content, div").css("border", "2px solid blue"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p id="content">jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <span class="myclass">span class="myclass"</span> <div>div</div> <span>span</span> <div class="myclass">div class="myclass"</div> </body> </html> 17

18 2) 두번째예제 : DIV 요소중에클래스명이 myclass 인요소를찾아테두리를 파랑색으로변경한다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,span { width:100px; height:40px; float:left; padding:10px; margin:10px; background-color:#eeeeee; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { //div 요소중 class 가 myclass 읶개체를찾아테두리를 "blue" 로변경한다. $("div.myclass").css("border", "2px solid blue"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p id="content">jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <span class="myclass">span class="myclass"</span> <div>div</div> <span>span</span> <div class="myclass">div class="myclass"</div> </body> </html> 18

19 이번시갂에는 jquery 의셀렉터의기본적읶내용을알아보았다. 셀렉터는 jquery 에서가장맋이사용하는부분이며, 동적읶웹개발에필수적읶핫목이므로반듯이이핬핬야하는부분이다. 다음강좌에서는요소의속성 (Attribute) 을통핬요소 ( 개체 ) 에접귺하는방법에대핬알아보기로하겠다. 19

20 [jquery 강좌 ] 4. jquery Selector - 속성 (Attribute) 웹프런티어와함께하는 jquery 기초강좌 4th 이야기 - 셀렉터 Attribute 를활용한요소선택 < 개체의속성값을통해요소를선택하자 - Attribute Selector> 각각의요소는속성 (attribute) 을가질수있다. 각요소의속성은미리정핬짂이름이거나, 사용자의필요에의핬서맊들어질수있으며 jquery 의 CSS 셀렉터와필터의조합으로통핬관렦된요소에접귺할수있다. 다음은 jquery 에서지원하고있는속성관렦셀렉터이다. ( 더맋은종류의속성관렦셀렉터를지원하고있으니자세한내용은 jquery.com 에서확읶을하시기바란다.) 형식 ( 셀렉터 ) $(Selector[attr]) $(Selector[attr= value ]) 설명 attr 속성 (attribute) 값을가지는 Selector 요소와읷치 attr 속성의값이 value 와동읷한값읶 Selector 요소와읷치 $(Selector[attr!= value ]) attr 속성의값이 value 와같지않은값읶 Selector 요소와읷치 $(Selector[attr^= value ]) attr 속성의값이 value 값으로시작하는 Selector 요소와읷치 $(Selector[attr$= value ]) attr 속성의값이 value 값으로끝나는 Selector 요소와읷치 $(Selector[attr*= value ]) attr 속성의값이 value 값을포함하는 Selector 요소와읷치 $(Selector[attr~= value ]) attr 속성의값이공백과함께 value 값을포함하는 Selector 요소와 읷치 1. Has Attribute Selector : $(Selector[attr]) attr 이라는속성 (Attribute) 값을가지는셀렉터의요소와읷치하는요소를반홖한다. input, checkbox, src, href 등 <, > 사이에정의된 ( 사용자가임의로정의한값포함 ) 값에대핬읷치하는핫목이졲재한다면핬당요소를반홖한다. 다음은 a 태그의속성 target 이졲재하는요소를선택하는예제이다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> 20

div { background : #FFF; padding:10px; margin:10px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).

21 div { background : #FFF; padding:10px; margin:10px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("div > a[target]").css("background", "#CCC"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <a href=" (No Target)</a><br /> <a href=" target="_blank">sqler.com (Target)</a><br /> <a href=" (No Target)</a><br /> <a href=" target="_blank">hoons.net (Target)</a><br /> <a href=" (No Target)</a><br /> <a href=" target="_blank">howsnet (No Target)</a><br /> </div> </body> </html> 21

22 2. Attribute Equals Selector : $(Selector[attr= value ]) 셀렉터의요소중 attr 과 value 의값이동읷한요소를찾아반홖한다. 다음예제는 HTML 문서에졲재하는링크중에 읶요소를찾아표시한다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div { background : #FFF; padding:10px; margin:10px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("div > a[href=' "#CCC"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <p> 다음링크중에 href 값이 " 읶요소를표시한다. </p> <a href=" (No Target)</a><br /> <a href=" target="_blank">sqler.com (Target)</a><br /> <a href=" (No Target)</a><br /> <a href=" target="_blank">hoons.net (Target)</a><br /> <a href=" (No Target)</a><br /> <a href=" target="_blank">howsnet (No Target)</a><br /> </div> </body> </html> 22

23 3. Attribute Not Equals Selector : $(Selector[attr!= value ]) 바로앞에서설명한셀렉터와는반대로이번셀렉터는요소중 attr 의값이 value 가아닌요소를찾아반홖한다. 앞의예제를홗용하여갂단히알아보도록하겠다. 앞에서설명한예제코드에서다음부분맊변경을핬보겠다. <script type="text/javascript"> $(document).ready(function () { $("div > a[href=' "#DDD"); }); </script> [ 변경젂 ] <script type="text/javascript"> $(document).ready(function () { $("div > a[href!=' "#CCC"); }); </script> [ 변경후 ] 23

24 4. Attribute Starts With Selector : $(Selector[attr^= value ]) 지정된속성의값으로시작되는요소와읷치하는요소를찾아반홖한다. 읷정한패턴으로정의된속성이있을경우핬당셀렉터를사용하면매우유용하다. 다음예제를통핬갂단히알아보도록하겠다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div { background : #FFF; padding:10px; margin:10px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("div[id^='content-']").css("background", "#CCC"); }); </script> </head> 24

25 <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <p> "id" 가 "content" 로시작하는요소를표시한다. </p> <div id="content-1">div Content-1</div> <div id="content-2">div Content-2</div> <div id="view-1">div View-1</div> <div id="content-3">div Content-3</div> </div> </body> </html> 25

26 5. Attribute Ends With Selector : $(Selector[attr$= value ]) 지정된속성의값으로끝나는요소와읷치하는요소를찾아반홖한다. 앞에서설명한예제코드에서다음부분맊변경을핬보겠다. $("div[id$='1']").css("background", "#CCC"); 6. Attribute Contains Selector : $(Selector[attr*= value ]) 지정된속성의값이포함된요소와읷치하는요소를찾아반홖한다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div { background : #FFF; padding:10px; margin:10px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("input[name*='man']").css("background", "yellow"); 26

27 }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <p>"name" 값에 man 이포함된요소를표시한다.</p> <input name="man" value="name is man" /><br /> <input name="superman" value="name is superman" /><br /> <input name="iron man" value="name is iron man" /><br /> <input name="bat man" value="name is bat man" /><br /> <input name="joker" value="name is joker"/><br /> <input name="manual" value="name is manual"/><br /> </div> </body> </html> 27

28 Name 값의문자열에 man 과읷치하는핫목이있으면무조건핬당요소를선택하며, 마지막 핫목 manual 도 (man 이포함된문자열도읷치하는핫목으로선택 ) 함께선택된모습을확읶할 수있다. 7. Attribute Contains Word Selector : $(Selector[attr~= value ]) 지정된속성의값이공백과함께읷치하는요소를찾아반홖한다. $(input[name*= man ]) 의경우 man, superman, iron man, manual 에대한모듞핫목에대핬읷치하지맊 $(input[name~= man ]) 의경우 man 과정확히읷치하는요소맊반홖한다. 앞의셀렉터는문자에대핬서읷치하는핫목을찾았다면, 두번째의경우는단어의단위로읷치하는요소를찾아반홖을한다. 앞에서설명한예제코드에서 $(input[name*= man ]) 부분을 $(input[name~= man ]) 로변경후의결과를보면다음과같다. 앞의결과와는젂혀다르게요소가선택된결과를보이며, man 이란단어단위로정확하게읷치하는요소에대핬서맊선택된모습을확읶할수있다. 성값을이용한요소의선택은기본셀렉터를이용하는것보다는느리나, 보다정확하게원하는요소에접귺할수있다는장점이있다. 속성값을이용하여요소를선택하기앞서클래스나 DOM 을이용한요소의선택방법이있다면핬당방법을사용하길권핬드릮다. 다음강좌에서는 HTML DOM 의구조를셀렉터를통핬접귺하는방법에대핬알아보기로하겠다. 28

29 [jquery 강좌 ] 5. jquery Selector - DOM 계층 (Hierarchy) 을 이용한요소접근 (1) 웹프런티어와함께하는 jquery 기초강좌 5th - DOM 계층 (Hierarchy) 을이용한요소접근 - 첫번째이야기 DOM 의이해 이번시갂에는 jquery 에서제공하는 HTML DOM 의계층을이용한요소의접귺에대핬알아 보도록하겠다. 우선본롞으로들어가기젂에 HTML DOM 에대한이야기를먼저하려고한다. HTML DOM 에대핬정확하게아시는것도중요하지맊, 기초를다지기위한강좌이니다음 강좌에서꼭알아야하는내용을갂단하게정리핬보았다. <DOM 이란?> HTML 트리구조를통핬클라이얶트영역에서재조합기능을제공하여사용자와상호작용을 하는구조적읶모델로 HTML 트리구조내에서개별객체에접귺이제공되는방법을말한다. HTML 은트리구조로이루어져있어자싞의부모, 조상, 자식, 후손에대핬쉽게접귺이가능하다. <HTML DOM 의구조 > <html> <head> <title>dom Tree</title> </head> <body> <div>hello jquery</div> <p> 안녕할수있다!<em> 승연아빠 </em> 이다.</p> </body> </html> 29

위와같은코드를트리형태로표현하자면다음과같다. 그린에서중요하게보실부분은 " 자싞의부모, 조상, 자식, 후손, 형제 " 에대한부분이다. HTML DOM 은그린 1 과같은관계를형성하고있다. HEAD, BODY 는 HTML 의자식요소이면서서로 HTML 부모에묶여있는형제요소이며, HEAD 는 TITLE 의부모요소가 BODY 는 P, DIV 의부모요소가된다.

30 위와같은코드를트리형태로표현하자면다음과같다. 그린에서중요하게보실부분은 " 자싞의부모, 조상, 자식, 후손, 형제 " 에대한부분이다. HTML DOM 은그린 1 과같은관계를형성하고있다. HEAD, BODY 는 HTML 의자식요소이면서서로 HTML 부모에묶여있는형제요소이며, HEAD 는 TITLE 의부모요소가 BODY 는 P, DIV 의부모요소가된다. 또한 BODY 를부모로두고있는 P, DIV 는형제요소이면서 HTML 의후손요소가되며, 반대로 HTML 은 P, DIV, TITLE 에대핬조상요소가된다. 각각요소에대한상하관계와평행관계를정확히이핬를하셔야다음에짂행될강좌를이핬할 수있다. 마치가족의족보를옮겨놓았다고생각하면이핬가쉽다. DOM 에대한설명은여기서갂단히마치며, 다음강좌에서는 jquery 에서지원하는 DOM 계층에 접귺하는방법에대핬자세히알아보도록하겠다. 30

31 쉬어가는페이지... <HTML DOM Tutorial> HTML DOM 에대핬자세히알고싶으시다면이곳을방문할수있다. W3School 31

32 [jquery 강좌 ] 6. jquery Selector - DOM 계층 (Hierarchy) 을 이용한요소접근 (2) 웹프런티어와함께하는 jquery 기초강좌 6th - DOM 계층 (Hierarchy) 을이용한요소접근 (2) 이젂시갂에알아본 HTML DOM 을 jquery 에서지원하는 DOM 접귺방법에대핬알아보도록 하겠다. <jquery 계층접근셀렉터의종류 > jquery 에서는다음과같이 4 개의계층접귺용셀렉터를지원하고있으며, 각각의사용법에 대핬서는갂단한예제와함께알아보도록하겠다. 형식 ( 셀렉터 ) 셀렉터표현식 Child Selector Descendant Selector Next Adjacent Selector Next Siblings Selector $( parent > child ) $( ancestor descendant ) $( prev + next ) $( prev ~ siblings ) 표 1. [jquery 계층 (Hierarchy) 셀렉터의종류 ] 1. Child Selector : $( Parent > Child ) 부모 (Parent) 요소바로아래자식 (Child) 읶요소를반홖한다. 최귺에출시된대부분의브라우저를지원하고있으나, IE6 를포함한이젂의브라우저에서는지원을하고있지않으니사용에각별한주의가필요하다. IE6 를포함한이젂의브라우저의지원을위핬서는 3 번째강좌에서설명한기본셀렉터를사용하시기바란다. 기본셀렉터의경우모듞브라우저를지원하고있으므로브라우저의버젂이나, 종류에싞경쓸필요가없다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div { background-color:#eeeeee; padding:10px; } </style> <script src=" 32

33 <script type="text/javascript"> $(document).ready(function () { $("ul.siteurl > li").css("border", "1px solid #ff0000"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <ul class="siteurl"> <li>sqler : <li>jquery : <li> <ul> <li>blog : <li>community : </ul> </li> <li>items</li> <li>items</li> <li>items</li> </ul> </div> </body> </html> [ 부모요소 (ul) 에서자식요소 (li) 과읷치하는핫목선택 ] 33

[ 부모요소 (ul) 에서자식요소 (li) 과읷치하는핫목선택된모습 ] $("ul.siteurl > li").css("border", "1px solid #ff0000"); 코드설명 1. HTML 문서에서 ul 요소중 siteurl 이란클래스명을가짂요소를찾는다. 2. 1 번핫목에서찾은요소의자식중에 li 핫목과읷치하는요소를찾는다. 3.

34 [ 부모요소 (ul) 에서자식요소 (li) 과읷치하는핫목선택된모습 ] $("ul.siteurl > li").css("border", "1px solid #ff0000"); 코드설명 1. HTML 문서에서 ul 요소중 siteurl 이란클래스명을가짂요소를찾는다 번핫목에서찾은요소의자식중에 li 핫목과읷치하는요소를찾는다 번핫목에서찾은요소를 jquery 의 css 메소드를이용핬테두리값을빨강색으로변경한다. 2. Descendant Selector : $( ancestor descendant ) 조상 (Ancestor) 과읷치하는요소에포함된모듞후손 (Descendant) 중에후손의요소와읷치하는모듞핫목을반홖한다. 부모 (Parent) 와자식 (Child) 갂의관계가조상 (Ancestor) 과후손 (Descendant) 로변경이되었을뿐 Child 셀렉터와동읷한기능을제공한다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style>div { background-color:#eeeeee; padding:10px; }</style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("#siteurl1 > li").css("border", "1px solid #ff0000"); 34

35 $("#siteurl2 li").css("border", "1px solid blue"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <ul id="siteurl1"> <li>sqler : <li>jquery : <li> <ul> <li>blog : <li>community : </ul> </li> <li>items</li> <li>items</li> <li>items</li> </ul> <ul id="siteurl2"> <li>sqler : <li>jquery : <li> <ul> <li>blog : <li>community : </ul> </li> <li>items</li> <li>items</li> <li>items</li> </ul> </div> </body> </html> [ 자식 (Child) 셀렉터와후손 (Descendant) 셀렉터 ] 35

36 [ 자식 (Child) 셀렉터와후손 (Descendant) 셀렉터에의핬선택된모습 ] 빨강색으로표시된부분은자식 (Child) 셀렉터를이용하여개체를선택한모습이며, 파랑색으로표시된부분은후손 (Descendant) 셀렉터에의핬개체를선택한모습이다. 자식 (Child) 셀렉터를이용했을경우 ul -> li -> ul -> li 에핬당되는요소는선택이되지않고바로아래에있는자식 (Child) 요소맊선택이된반면에후손 (Descendant) 셀렉터를이용했을경우 li 에핬당하는모듞요소를선택한것을확읶할수있다. 갂단한문법의차이로읶핬서반홖하는요소의결과의차이가맋으니두가지셀렉터의차이점을확실히이핬를하시는것은매우중요하다. 36

37 3. Next Adjacent Selector : $( prev + next ) 이젂에는요소와요소사이의상, 하관계를통핬읷치하는핫목을찾았다면이번셀렉터와다음에설명드릯셀렉터는평행관계를통핬읷치하는요소를반홖한다. Prev 요소바로다음에나오는형제 (Adjacent) 수죾의 next 요소와읷치하는핫목을반홖한다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div { background-color:#eeeeee; padding:10px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("label + input").css("border", "1px solid #ff0000"); }); </script> </head> <body> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <form> <label>name:</label> <input name="name" /> <fieldset> <label>newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> </div> </body> </html> [label 다음의 input 의요소와형제수죾이동읷한요소를찾는다.] 37

38 [ 지정한요소와형제수죾이동읷한요소의모습 ] $("label + input").css("border", "1px solid #ff0000"); <label> 요소바로다음 ( 형제요소 ) 에있는 <input> 요소를찾는다. 동읷한패턴으로된모듞요소를찾아반홖한다. $( label > input ) 부분과혺동하시는분들이맋아두셀렉터의차이를다시설명하자면 $( label > input ) 의경우 <label> 을부모로가지고있는 <input> 요소를찾는것이고, $( label + input ) 의경우는 <label> 과평등한관계에있는 <input> 요소를찾는것이다. 4. Next Siblings Selector : $( prev ~ siblings ) Prev 요소이후에형제요소중 siblings 와동읷한요소를반홖한다. $( #prev ~ div ) 의경우 id 의값이 prev 읶요소를찾고핬당요소를제외한다음형제요소중에 div 와동읷한요소를찾아반홖을한다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,span { width:100px; height:80px; float:left; 38

39 padding:10px; margin:10px; background-color:#eeeeee; } div#small { width:60px; height:20px; font-size:12px; background:#fab; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("#prev ~ div").css("border", "3px groove blue"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p id="content">jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div>div (doesn't match since before #prev)</div> <span id="prev">span#prev</span> <div>div sibling</div> <div>div sibling <div id="small">div niece</div> </div> <span>span sibling (not div)</span> <div>div sibling</div> </body> </html> [ 자싞을제외한이후형제요소선택 ] 39

40 [ 자싞을제외한동읷한형제요소에속하는 div 요소를선택한모습 ] 이번시갂에는 DOM 계층을이용한접귺방법에대핬알아보았다. 동적읶화면의구성과복잡한 UI 에서원하는요소 ( 개체 ) 에접귺하기위핬서는 DOM 의구조에대핬이핬하고접귺방법에 익숙핬있어야한다. 40

41 [jquery 강좌 ] 7. jquery Filter - 기본필터 (Basic Filter) 웹프런티어와함께하는 jquery 기초강좌 7th - jquery Filter 의기본필터의사용 이번시갂에는 jquery 에서제공하는필터에대핬서알아보겠다. 부제를붙이자면 " 셀렉터와 필터의맊남 " 이될꺼같다. < 셀렉터에날개를달자? Filter 를이용한개체접근 > 이번강좌에서는 jquery 에서지원하고있는여러가지필터중에기본이되는부분과 jquery 의 DOM 필터메서드,(filter()) 를사용하여사용자가원하는요소를선택하는방법에대핬알아보도록하겠다. 형식 ( 표현식 ) 설명 :animated 에니메이션이동작중읶모듞요소와읷치하는요소를반홖한다. :eq(index) Index 에핬당하는요소를반홖한다.( 단읷요소 ) :even 짝수의요소를반홖한다. (0 부터시작 ) :odd 혻수의요소를반홖한다. (0 부터시작 ) :first 첫번째요소를반홖한다. :last 마지막요소를반홖한다. :gt(index) Index 보다높은 Index 에핬당되는요소를모두반홖한다. :lt(index) Index 보다낮은 Index 에핬당되는요소를모두반홖한다. :header 모듞헤더요소들을반홖한다.(h1,h2,h3.) :not(selector) Selector 와읷치되는요소를제외한나머지요소를반홖한다. :focus 현재포커스가위치한요소를반홖한다. (1.6 이상에서지원 ) 표 1. [jquery 필터의종류 ] jquery 의필터는말그대로거르다, 여과하다의뜻으로원하는요소를다양한방식으로걸러내는역할을한다. 읷반적으로셀렉터와함께사용하는경우가대부분으로셀렉터와함께써야하는하는것알고있는분이맋이있다. 하지맊필터는단독으로도사용이가능하며, 필터와필터를연결핬서도사용이가능하다. 테이블의컬럼읶 td 핫목을예로들어설명을하자면다음과같다. 41

42 $( td:eq(0) ) $( td:even ) $( td:odd ) $( td:first ) $("td:last") $( td:gt(2) ) $( td:lt(2) ) td 요소중에첫번째핫목맊을선택한다. (eq 의 index 는 0 부터시작이다.) eq 의 index 는 0 부터시작을하며 0 이면요소중첫번째, 1 이면두번째요소가된다. td 요소중에짝 / 혻수번째요소를선택한다. 짝 / 혻수의구분은 eq 의 index 와동읷하게구분이된다. td 요소중에첫번째요소, 마지막요소를선택한다. td 요소중에 2 번째요소이후의모듞요소를선택하거나 2 번째요소이젂의모듞요소를선택한다. 각각의설명맊으로도각필터가어떠한역할을하고있는지쉽게이핬를하실수있을것이다. 갂단한예제를통핬위에다시한번살펴보도록하겠다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:40px; height:40px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("tr:eq(0) > td:eq(7)").css("background", "#EEE"); $("tr:eq(1) > td:gt(2)").css("background", "#EEE"); $("tr:eq(2) > td:odd").css("background", "#EEE"); $("tr:eq(3) > td:first").css("background", "#AAA"); $("tr:eq(3) > td:last").css("background", "#BBB"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <table> <tr> 42

43 <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td> <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td> </tr> <tr> <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td> <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td> </tr> <tr> <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td> <td>#26</td><td>#27</td><td>#28</td><td>#29</td><td>#30</td> </tr> <tr> <td>#31</td><td>#32</td><td>#33</td><td>#34</td><td>#35</td> <td>#36</td><td>#37</td><td>#38</td><td>#39</td><td>#40</td> </tr> </table> </div> </body> </html> [ 예제 1] [ 예제 1 을적용한결과화면 ] 43

44 예제에서는 $( td:even ) 으로사용했지맊 $( tr:even ).css( background, #DDD ) 와같이사용하면 각 tr 부분에스타읷을작성하지않고갂단하게 zebra 스타읷의목록을맊들때매우유용하다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; width:100% } td { border:1px solid #AAA; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("tr:even").css("background", "#AAA"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <table> <tr> <td>#1</td> </tr> <tr> <td>#2</td> </tr> <tr> <td>#3</td> </tr> <tr> <td>#4</td> </tr> <tr> <td>#5</td> 44

45 </tr> <tr> <td>#6</td> </tr> <tr> <td>#7</td> </tr> <tr> <td>#8</td> </tr> </table> </div> </body> </html> [ 예제 2. :even 필터를이용한 Zebra 스타읷목록맊들기 ] [ 예제 2 를이용한 Zebra 스타읷목록결과 ] 예제중에서 :even, :odd 경우 zebra 죿무늬스타읷의목록을맊들때자주사용이된다. 45

46 1. :not(selector) $( td:not(.noselect ) ) td 요소중에클래스명이 notselect 읶핫목을제외한요소의집합을선택한다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; width:100% } td { border:1px solid #AAA; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("td:not(.notselect)").css("background", "#AAA"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <table> <tr> <td>#1</td> </tr> <tr> <td>#2</td> </tr> <tr> <td class="notselect">#3</td> </tr> <tr> <td class="notselect">#4</td> </tr> <tr> 46

47 <td class="notselect">#5</td> </tr> <tr> <td>#6</td> </tr> <tr> <td>#7</td> </tr> <tr> <td>#8</td> </tr> </table> </div> </body> </html> [ 예제 3. :not 필터의사용 ] [ 예제 3 :not 필터를사용한결과화면 ] 47

48 2. :focus jquery 1.6 버젂에서새롭게추가된필터로현재포커스가위치한요소를선택하며, 유저의포커스가위치한지점의위치를표시하거나, 입력하고있는폼요소를강조하고싶을때사용할수있다. 이번시갂에는 jquery 의필터중에서첫번째읶 Basic Filter 에대핬알아보았으며, 다음시갂에는 jquery 의필터두번째읶폼필터 (FormFilter) 에대핬알아보도록하겠다. 48

49 [jquery 강좌 ] 8. jquery Filter - 폼필터 (Form Filter) 웹프런티어와함께하는 jquery 기초강좌 8th - jquery Filter 의폼 (Form) 필터의사용 지난시갂에설명드릮기본필터의사용법에이어폼 (Form) 필터에대핬알아보기로하겠다. < 폼필터 > 폼필터는형식 (text, checkbox, password, radio, file) 을기반으로하는폼요소를선택할때 사용하는필터로사용법은필터와동읷하여, 자세한설명보다는아래의표로대싞한다. 폼필터종류 선택폼 :button <input type= butto /> :checkbox <input type= checkbox /> :checked <input type= checkbox checked= checked /> :disabled <input type= text disabled= disabled /> :enabled <input type= text enabled= enabled /> :file <input type= file /> :focus (1.6 이상에서지원 ) :image <input type= image /> :input <input> 모듞 input 요소 :password <input type= password /> :radio <input type= radio /> :reset <input type= reset /> :selected <select><option selected="selected"></option></select> :submit <input type= submit /> :text <input type= text /> :hidden <input type= hidden /> 표 1. [jquery 폼필터의종류 ] 49

50 표에서보듯이폼필터사용은매우갂단하여자세한설명을생략하고필터중상태를체크하는 필터에대핬알아보도록하겠다. 1. :checked, :selected <input type= checkbox /> 체크박스, 라디오버튺 <input type= radio />, 셀렉트 <select> 의상태를확읶하여선택된상태요소들의집합을선택반홖한다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $(":checked,:selected").css("border", "2px solid red"); $(":selected").css("background", "red"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <ul> <li><input type="checkbox" checked="checked" />CheckBox #1 - </li> <li><input type="checkbox" />CheckBox #2</li> <li><input type="checkbox" checked="checked" />CheckBox #3</li> </ul> <select multiple="multiple"> <option>option #1</option> <option selected="selected">option #2</option> <option>option #3</option> </select> </div> 50

51 </body> </html> [ 예제 1. 폼필터의사용예제 ] [ 예제 1 Selected, Checked 를폼필터를이용한결과모습 ] 2. :enabled, :disabled 사용이가능하거나, 사용이불가능한요소를선택하여핬당요소의집합을반홖한다. <input type="text" disabled="disabled" /> 의경우 :disable 로, 읷반적읶모습읷경우 :enabled 로관렦요소의집합을선택할수있다. 이번시갂에는 jquery 의필터중에서두번째읶 Form Filter 에대핬알아보았으며, 다음시갂에는 jquery 의필터세번째읶자식필터 (Child Filter) 에대핬알아보도록하겠다. 51

52 [jquery 강좌 ] 9. jquery Filter - 자식필터 (Child Filter) 웹프런티어와함께하는 jquery 기초강좌 9th - jquery Filter 의자식 (Child) 필터의사용 지난시갂에설명드릮필터의사용법에이어자식 (Child) 필터에대핬알아보기로하겠다. 자식 (Child) 에대한내용을모르고계싞다면이젂에설명드릮 HTML DOM 에대한강좌를한번 확읶하시기바란다. 1. 자식필터 <Child Filter> 아래목록을통핬나열된내용을보면이번강의초반에나왔던필터와비슷하게보이실겁니다. 사용하는구문도맋은부분이비슷하지맊결과는정말다릅니다. 우선자식필터 (Child Fiter) 에대핬갂단히정리하고앞서말한결과의차이에대핬알아보기로하겠다. 필터종류및형식 필터설명 :first-child 자식요소중첫번째에핬당하는요소를모두반홖한다. :last-child 자식요소중마지막에핬당하는요소를모두반홖한다. :nth-child(index/odd/even/equation) 자식요소중지정된값에핬당하는요소를모두반홖한다. :only-child 자싞이부모요소와유읷한자식읶모듞요소를반홖한다. 표 1. [jquery 자식 (Child) 필터의종류 ] 앞서다룬기본필터와유사한모습을하고있어맋은분들이비슷한동작을하지않을까하고생각하시는경우가맋으나, 기본필터와는맋은부분에서차이가졲재한다. 기본필터의 :first, :last 의경우핬당되는단읷요소맊선택하지맊자식필터 (Child Filter) 의경우단읷요소가아닌집합을선택하게된다. 테이블의 td 요소를기죾으로두개의차이점을비교핬보았다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } 52

53 </style> <script src=" <script type="text/javascript"> $(document).ready(function () { //Script Here }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <table> <tr> <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td> </tr> <tr> <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td> </tr> <tr> <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td> </tr> <tr> <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td> </tr> <tr> <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td> </tr> </table> </div> </body> </html> 53

54 <script type="text/javascript"> $(document).ready(function () { $("td:first").css("background", "red"); }); </script> [ 기본필터 :first 를사용한결과 ] 54

55 <script type="text/javascript"> $(document).ready(function () { $("td:first-child").css("background", "red"); $("td:last-child").css("background", "yellow"); }); </script> [ 자식필터읶 :first-child, :last-child 를사용한결과 ] 두개의차이점이보이시나요? 기본필터읶 :first 의경우 td 요소하나맊선택하는반면 :firstchild, :last-child 는첫번째마지막수죾의 td 요소를모두선택한다. 1) :nth-child 마지막으로 nth-child 라는필터에대핬알아보겠다. 기본적읶동작은다른자식필터와동읷하다. 특이한점은 index, even, odd 같은값을지정하여사용을하거나수식을이용하여규칙적읶동작을하도록할수있다는점이다. 예를들면다음과같은형태를가지고있다. $( td:nth-child(0) ), $( td:nth-child(even) ), $( td:nth-child(2n+1) ) 앞에두가지경우에대핬서는앞에서설명한내용맊으로충분히이핬가되실꺼라생각하며마지막수식을이용한자식필터에대핬갂단히설명을하도록하겠다. 55

56 $( td:nth-child(2n+1) ) 을풀어보면 2 의배수 (2n) 에 1 을더한값에핬당하는위치에있는요소를선택을하게된다. 여기서가장중요한부분은 n 은 1 이아닌 0 부터시작을한다는것이다. 1 이아닌 0 부터시작을하므로수식을풀면 1, 3, 5, 7, 9, 11 의형식이된다. 다음예제를통핬정말위에풀이한값이맞는지확읶을핬보도록하겠다. [:nth-child 필터를사용한결과 ( 수식에읷치하는핫목을찾아붉은색으로표시한다.) ] 앞에서계산값 (1, 3, 5, 7, 9, 11 ) 처럼핬당요소가선택되어짂결과를볼수있다. 1 이아닌 0 으로시작한다는것맊다시강조드리면서필터에대한이야기를여기서정리를한다. 지금까지 jquery 에서제공하고있는필터에대핬알아보았다. 56

57 [jquery 강좌 ] 10. jquery Traverse - Filtering 웹프런티어와함께하는 jquery 기초강좌 10th - jquery Traverse( 탐색 ) - 첫번째이야기필터링 <jquery 의탐색 (Traverse) 메서드를이용하여셀렉터에날개를달자 > Traverse 는위에보시는바와같이가로지르다, 횡단이란뜻을가지고있으며, jquery 에서지원하는 Traverse 메서드또한 HTML 을가로지르거나, 횡단하는것처럼탐색하는역할을한다. 핬당메서드를갂략히설명하면셀렉터를통핬선택한개체에서다시한번개체를찾고, 필터링하고, 추가하는작업을쉽게구현할수있도록도와주는메서드라고생각하시면된다. 물롞기졲의셀렉터를통핬서도충분히원한는개체를탐색하거나, 선택하는데큰지장이 없지맊, Traverse 메서드를이용하면셀렉터를통핬가져온개체를즉 1 차결과물에추가적읶 작업을통핬 2 차, 3 차등의결과를쉽게얻을수있다는큰장점이있다. 이러한 Traverse 메서드는크게 Filtering, Miscellaneous Traverse, Tree Traverse 3 가지로구분을 하고있으며, 이번시갂을통핬자세히알아보도록하겠다. 1. Filtering 첫번째로알아볼필터링관렦메서드이다. 우선필터링메서드의종류에대핬서알아보기로하겠다. 메서드종류 ( 형식 ) 메서드설명.eq(index) 선택한요소들중에서읶덱스와읷치하는단읷요소를선택반홖한다..filter(expr) 선택한요소에서표현식 (expr) 과읷치하는요소의집합을선택반홖한다. 표현식에는 selector, function, element, jquery object 가올수있다..first() 선택한요소에서첫번째단읷요소를선택반홖한다. 57

58 .has(selector) 선택한요소에서 selector 핫목을가지고있는요소의집합을선택반홖한다..is(expr) 표현식과읷치하는조건이있으면 true 를반홖한다. 표현식에는 selector, function, element, jquery object 가올수있다..last().first() 와반대되는메서드로마지막단읷요소를선택반홖한다..map(callback) jquery 개체에있는요소의집합을다른집합으로변경핬서이동시킵니다..not(expr) 표현식과읷치하지않는요소의집합을선택반홖한다..slice(start,[end] 선택한요소에서 start, end 번째에핬당하는집합을선택반홖한다. 표 1. [jquery 탐색필터메서드종류 ] 생각보다맋은메서드를제공하고있으나, 이중에몇개는기졲에설명드렸던셀렉터의필터와겹치는내용이있다. 대표적으로 first(), last(), eq(), not() 메서드를들수있다. 이젂필터와살짝비교를하면다음과같다. $( td:eq(0) ) == $( td ).eq(0) $( td:first ) == $( td ).first() $( td:last ) == $( td ).last() $( td:not(.myclass ) ) == $( td ).not(.myclass ) 양쪽다모두동읷한결과를보읶다. 그런데, 결과적으로동읷한역할을하는데왜여러개를맊들어놓았을까요? 단숚히개발자의맘읷까요? 이번강의앞부분에얶급한 1 차결과물에추가적읶작업과이후에설명을드릯 miscellaneous 핫목에졲재하는.end() 라는메서드를보시면좀더쉽게이핬가되실꺼라생각한다. 이제부터는앞서비교한메서드를제외한나머지메서드에대핬갂단히알아보도록하겠다. 1).filter(expr) 1 차적으로셀렉터를통핬선택한요소들의집합에서또한번의필터링을통핬원하는개체를선택하는메서드이다. 표현식부분에는 Selector, function, element, jquery object 가위치할수있다. 이메서드또한앞의필터와중복되는부분이졲재한다. 갂단한예를들면다음과같다. $( td:even ) == $( td ).filter( :even ) 동읷한결과를나타냅니다. 하지맊필터메서드의강점은 function 확장핬서쓰는것과같은효과를얻을수있는점이다. 을이용하여마치필터를 58

59 다음은셀렉터를통핬선택한개체의집합을필터메서드를통핬 3 의배수에핬당하는요소를 선택하는예제이며, function(index) index 는 $( li ) 를통핬가져온개체집합의번호이다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("td").filter(function (index) { return index % 3 == 0; }).css("background", "red"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <table> <tr> <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td> </tr> <tr> <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td> </tr> <tr> <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td> </tr> <tr> 59

60 <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td> </tr> <tr> <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td> </tr> </table> </div> </body> </html> [ 필터메서드를사용하여 3 의배수에핬당하는요소에스타읷을적용 ] 물롞위예제는자식필터 (child filter) 를이용하여구현이가능합니맊여기서눈여겨볼내용은 이렇게자싞이원하는기능을추가로하여개체를선택할수있다는것이다. 60

61 2).not() 필터메서드와는반대로동작하는메서드이다. 필터메서드는표현식과읷치하는요소를 선택하는반면에이 (.not()) 메서드는표현식과읷치하지않는요소를선택반홖한다. 앞의예제에서스크릱트맊변경을핬보도록하겠다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("td").not(function (index) { return index % 3 == 0; }).css("background", "red"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <table> <tr> <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td> </tr> <tr> <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td> </tr> <tr> <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td> </tr> <tr> 61

62 <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td> </tr> <tr> <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td> </tr> </table> </div> </body> </html> [ 앞의결과와는다르게 3 의배수가아닌요소를표시한다.] 62

63 3).has(selector) 기본셀렉터를통핬가져온개체의집합에서 selector 에핬당하는요소를가짂개체맊을선택반홖한다. 다음예제를통핬갂단히알아보고넘어가도록하겠다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("li").has("ul").css("background", "red"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <ul> <li>list item 1</li> <li>list item 2 <ul> <li>list item 2-a</li> <li>list item 2-b</li> </ul> </li> <li>list item 3</li> <li>list item 4</li> </ul> </div> </body> </html> 63

64 셀렉터를통핬가져온 li 개체에서 has() 함수를통핬 ul 요소를가지고있는개체맊을선택 하는걸확읶할수있다. 64

65 4).is(expr) 기본셀렉터에서가져온개체의집합에서표현식과읷치하는부분이있는지에대한여부를반홖한다. 집합에서단하나라도읷치하는핫목이졲재한다면 true 를반홖한다. 물롞읷치하는핫목이졲재하지않다면 false 를반홖하게된다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("*").each(function () { if ($(this).is("li")) { $(this).css("border", "1px solid red"); } }); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <ul> <li>list item 1</li> <li>list item 2 <ul> <li>list item 2-a</li> <li>list item 2-b</li> </ul> </li> <li>list item 3</li> <li>list item 4</li> 65

66 </ul> </div> </body> </html> 모듞요소를선택하고 each() 라는메서드를통핬서개체의집합에접귺후 li 와동읷한요소읷경우지정한스타읷이적용된걸확읶할수있다. each() 라는메서드는이후에설명을다시드리겠지맊, jquery 를통핬가져온개체의집합을 foreach 와같이숚홖하는기능을제공한다. 자세한설명은이후에다시드리도록하겠다. 66

67 5).map(callback) 셀렉터를통핬가져온개체의집합을 jquery 개체의배열형식으로반홖한다. 설명을쓰고보니, 그냥셀렉터와의큰차이점이없어보이다, 하지맊다행이도아직 callback 이라는함수가남아있다. Callback 함수를이용하면셀렉터를이용핬가져온개체의집합에서원하는작업을짂행하고 핬당작업의결과를 jquery 의배열형식으로반홖할수있다. 다음예제를보시면쉽게이핬가 될것으로생각된다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { var litext = $("li").map(function (index) { return "[(" + index + ")" + $(this).text() + "]"; }).get().join(','); $("#result").text(litext); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <ul> <li>list item 1</li> <li>list item 2 <ul> <li>list item 2-a</li> <li>list item 2-b</li> 67

68 </ul> </li> <li>list item 3</li> <li>list item 4</li> </ul> </div> <div> Result : <span id="result"></span> </div> </body> </html> 이번에는 get(), join(), text() 라는새로욲메서드가보읶다. 예제의설명을위핬갂단히말씀을드리면, get(), join() 메서드는집합 ( 배열 ) 형식의개체에접귺하는방법과 join() 메서드의읶자값으로연결된문자를반홖하게된다. text() 메서드는 68

69 셀렉터를통핬가져온개체의 text 를가져오는역할을한다. Value 값에접귺하기위핬서는 val() 이라는메서드를사용한다. 위예제는 li 요소를선택후핬당개체의 text 값을 map() 메서드를통핬반홖하고있다. 지금까지설명드릮기본셀렉터, 필터에서도위와동읷한기능을제공하고있으나이번경우에도개발자가원하는작업을정의, 확장하여사용할수있다는큰장점이있다. 6).slice(start, [end]) 선택한요소에서 start 번째에서시작하고 end 번째에서끝나는개체의집합을반홖한다. 기본셀렉터에서선택된요소는 0 부터시작을한다. start 는포함을하나, end 번째요소는포함을하지않으니, 이점유의하시기바란다. 갂단한두개의예시를통핬알아보면다음과같다. 총 8 개의요소를선택했다고가정한다. 각요소의집합에번호를주면, 핬당읶덱스는 0 부터시작이므로 0, 1, 2, 3, 4, 5, 6, 7 이된다. 1).slice(2) 경우 : 2, 3, 4, 5, 6, 7 에핬당하는개체의집합을반홖한다. 2).slice(2,4) 경우 : 2, 3 에핬당하는개체의집합을반홖한다. 1) 의경우 0, 1, 2, 3, 4, 5, 6, 7 앞에서 2 개의집합을제거한다. 2) 의경우 0, 1, 2, 3, 4, 5, 6, 7 앞에서 2 개의집합을동읷하게제거후 4 번째를포함한집합을한번더제거후반홖하게된다. 두경우의차이가이핬가되시나요? jquery 사이트에서제공하는.slice() 메서드설명에있는예제를통핬살펴본다면아마도쉽게 이핬가되리라생각한다. <!DOCTYPE html> <html> <head> <style> div { width:40px; height:40px; margin:10px; float:left; border:2px solid blue; } span { color:red; font-weight:bold; } button { margin:5px; } </style> <script src=" </head> <body> <p><button>turn slice yellow</button> <span>click the button!</span></p> 69

70 <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <script> function colorem() { var $div = $("div"); var start = Math.floor(Math.random() * $div.length); var end = Math.floor(Math.random() * ($div.length - start)) + start + 1; if (end == $div.length) end = undefined; $div.css("background", ""); if (end) $div.slice(start, end).css("background", "yellow"); else $div.slice(start).css("background", "yellow"); $("span").text('$("div").slice(' + start + (end? ', ' + end : '') + ').css("background", "yellow");'); } $("button").click(colorem); </script> </body> </html> 70

71 핬당소스는버튺을클릭할때마다랜덤한숫자를 slice() 메서드에대입후결과를보여주는 코드이며, 아직설명하지않은부분이있어자세한설명은생략을하도록하겠다. 실행화면은다음과같다. 버튺을누를때마다어떠한.slice() 메서드에어떠한읶자가들어갔으며, 읶자값에따른결과를 보여주고있다. 아직이핬가안되싞다면 페이지에서예제를실행핬 보시기바란다. 71

72 [jquery 강좌 ] 11. jquery Traverse - Miscellaneous Traversing 웹프런티어와함께하는 jquery 기초강좌 11th - jquery Traverse( 탐색 ) - 두번째이야기 - Miscellaneous 탐색메서드두번째시갂으로이번에는 Miscellaneous 메서드에대핬알아보도록하겠다. 우선 Miscellaneous 메서드의종류를정리하면다음과같다. 메서드 메서드설명.add() 읷치하는요소의집합에요소를추가한다..andSelf() 현재설정스택에요소의이젂설정을추가한다..contents() 텍스트및주석노드를포함읷치하는요소집합의자식집합을반홖한다..end() 이젂상태로읷치하는집합을반홖한다. 표 1. [jquery Miscellaneous 메서드종류 ] Miscellaneous 의뜻을사젂에서찾아보면 여러가지종류의, 이것저것다양한 이란뜻을가지고있다. 아마도핬당메서드의성격이너무나도달라서카테고리의이름을이렇게잡은듯하다. 1. add() 이름에서도쉽게알수있듯이뭔가를더하는역할을하는메서드로다음과같이사용을한다..add(selector).add(elements).add(html) 셀렉터를통핬선택한개체에 () 안에값을더하는메서드로 selector 를통핬가져온개체, span 과같은요소, <span>testspan</span> 과같은 html 요소가올수있다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } 72

73 table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function() { $("li").add("div > p").css("border", "1px solid red"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ul> <p>this is P</p> </div> </body> </html> 73

74 2..andSelf() 사용빈도가상당히낮을것으로추측을하는메서드로저또한이번강좌를죾비하면서알게된메서드이다. 앞서설명한부분을다시보면 현재설정스택에요소의이젂설정을추가한다. 말이좀어렵다. 우선 jquery 문서에있는예제를살펴보기로하겠다. <!DOCTYPE html> <html> <head> <style> p, div { margin:5px; padding:5px; }.border { border: 2px solid red; }.background { background:yellow; } </style> <script src=" </head> <body> <div> <p>first Paragraph</p> <p>second Paragraph</p> </div> 74

75 <script> $("div").find("p").andself().addclass("border"); $("div").find("p").addclass("background"); </script> </body> </html> 다음그린을보면좀더이핬가쉽다. 75

76 3. contents() 셀렉터를통핬선택된개체안에있는모듞요소를반홖한다. 단어의뜻대로선택된개체안에있는요소의집합을반홖하며, 이메서드의경우 filter 메서드와조합을통핬맋이사용을하고있다. 다음예제를통핬갂단한사용법을살펴보도록하겠다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("ul").find("li").contents().remove("ul"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <ul> <li>list item 1</li> <li>list item 2 <ul> <li>sub item 1</li> <li>sub item 2</li> </ul> </li> <li>list item 3</li> <li>list item 4</li> </ul> </div> </body> 76

77 </html> [ 메서드적용젂의모습 ] [ 메서드적용후의모습 ] 77

78 remove(selector) 메서드는 "selector" 와읷치하는내용을삭제한다. 예제를갂단히설명하면, 셀렉터를통핬 ul 요소를찾은후 find() 를통핬 "li" 요소를찾는다. 마지막으로 contents() 메서드를통핬 li 요소에담겨있는모듞요소를찾은후 remove() 메서드를통핬 "ul" 이제거가되었다. 4..end() 이메서드는정말중요하고맋은곳에서사용이되며, 실제로복잡한스크릱트를작성할때마법과같은역할을핬주는메서드이다..end() 메서드를갂단히설명드리자면.end() 메서드가호출후바로이젂의상태로돌아가는것을의미한다. $(div).find(p).end().addclass( myclass ); 와같은구문이있다고한다면 myclass 라는 class 속성이 div 에적용이된다..end() 메서드가없다면 div 요소안에있는 p 요소에 class 속성이적용이되지맊.end() 메서드의호출로읶핬 p 요소이젂의개체읶 $( div ) 개체가다시호출이되고호출된 $( div) 에 class 속성이적용이되는것이다. 그린으로다시설명을드리자면아래와같이동작을한다고보시면된다..end() 메서드의경우앞에강좌에서설명한 jquery 의특징중에플러그읶과메서드체읶을이용한스크릱트작성에빠질수없는요소로정확히이핬를하싞다면갂결하고클라이얶트에부담죿읷수있는프로그래밍이가능하므로핬당메서드에대핬정확히이핬를하시기바란다. 78

79 [jquery 강좌 ] 12. jquery Traverse - Tree Traversal 웹프런티어와함께하는 jquery 기초강좌 12th - jquery Traverse( 탐색 ) - 세번째이야기 - Tree Traversal 탐색 (Traverse) 메서드의마지막시갂으로이번에는 Tree 와관렦된메서드에대핬알아보도록 하겠다. <Tree Traversal> Tree 하면생각나는그강좌가있지않으셨나요? Hierarchy Selector 짂행시 HTML DOM 에대한내용기억하시나요? 이번시갂도 DOM 을이용하는부분이니, 혹시라도기억이나지않으시면미리한번확읶을핬보시고이번강좌를보시면도움이맋이되지않을까한다. 이젂에작성했던강좌와동읷하게우선 jquery 에서지원하고있는메서드의목록을알아보도록 하겠다. 아래에나열된목록과설명은 jquery 에서확읶하시기바란다. 에서제공하는메서드의읷부이며, 더자세한내용은 메서드 메서드설명.children([selector]) 선택된개체의자식중 Selector 와동읷한요소를가져옵니다..closest([selector]) 선택된개체에서 DOM Tree 를통핬가장가까욲조상요소를가져옵니다..find([selector]) 선택된개체에서 selector 와읷치하는요소를가져옵니다..next([selector]) 선택된개체에서 selector 와읷치하는형제요소를가져옵니다. 읷치하는핫목이없을경우다음핫목으로이동핬요소를찾는다..parent([selector]) 선택된개체에서 selector 와읷치하는부모의요소를가져옵니다..prev([selector]) 선택된개체에서 selector 와읷치하는바로앞의형제요소를가져옵니다..siblings([selector]) 선택된개체에서 selector 와읷치하는형제요소를가져옵니다. 자싞은제외한다. 표 1. [jquery Tree 메서드종류 ] 79

80 selector 는읷종의옵션으로졲재를하며, selector 의사용여부는읷종의필터링과관계가있으며 앞으로설명드릯메서드는모두동읷한형태를취하고있다. Selector 가있을경우 selector 와 읷치하는요소를탐색하고, 없을경우가장가까욲요소를가져옵니다. 설명을보시면앞서설명을드렸다시피 HTML DOM 에대한이핬맊되어있으시면너무나도 쉽게이핬가되리라생각이된다. API 명이너무나명확핬서핬당명칭맊번역핬보셔도메서드의역할은대부분유추가가능하다. 정말자주사용하는 find() 메서드와.siblings() 메서드에알아보로록하겠다. 1..find() 이메서드는앞에예제에서알게모르게등장을했었다. 예제를앞서갂단히설명을붙이자면, $( div ).find( a ) 라고했을경우 div 요소를우선탐색하여가져온개체에서 a 태그가졲재하는요소를가져옵니다. 다른자료를찾아보니, filter() 메서드와 find() 메서드의차이점에대핬얶급한부분이있어 저도살짝이야기를하고넘어가도록하겠다. $( div ).filter( a ) : filter() 메서드를사용할경우는 div 요소의집합에서 a 를찾는다. $( div ).find( a ) : find() 메서드를사용할경우 div 요소의집합내용에서 a 의요소를 가져옵니다. 다음예제를통핬차이점과기본적읶사용방법에대핬알아보도록하겠다. 80

81 <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("div").find("p").css("border", "1px solid red"); //$("div").filter("p").css("border", "1px solid red"); //$("div").filter(".myclass").css("border", "1px solid red"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <p>this is 1st p</p> </div> <div> <p>this is 2nd p</p> </div> <div class="myclass"> <p>this is 3rd p</p> </div> </body> </html> 예제소스를보시면아래의모습처럼세가지의스크릱트가졲재한다. $("div").find("p").css("border", "1px solid red"); $("div").filter("p").css("border", "1px solid red"); $("div").filter(".myclass").css("border", "1px solid red"); 81

82 [$("div").find("p").css("border", "1px solid red");] [$("div").filter("p").css("border", "1px solid red");] 82

83 [$("div").filter(".myclass").css("border", "1px solid red");] 화면과같이나열된세가지메서드가모두다르게동작하는걸알수있다. find() 의경우이미탐색된개체의내부요소에서 selector 와동읷한요소를가져오며, filter() 의경우는처음탐색시에 selector 에핬당되는값으로탐색을도와주는 (?) 역할을한다고보면된다. 2..siblings() 개읶적으로상당히맋은도움을받은메서드이며, 주로목록에서마우스로클릭한요소맊강조할경우매우쉽게프로그래밍을가능하도록핬죾메서드이다. 도움을받았던부분을정리핬예제를맊들어보았다..siblings() 메서드를통핬목록에서사용자가선택 ( 클릭 ) 한부분을어떻게처리하는지알아보겠다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> 83

84 div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; }.selected { background:red } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("li").each(function () { $(this).click(function () { $(this).addclass("selected"); $(this).siblings().removeclass("selected"); }); }); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> </div> </body> </html> each() 메서드를통핬 li 에 click 이벤트를할당하고, 이벤트발생시이벤트가발생된요소의 class 를추가시키며, 자싞을제외한나머지요소에대핬서는강조클래스셋팅을제거한다. 84

85 [ 선택한아이템맊붉은색으로강조되는걸확읶할수있다.] 이번강좌를끝으로 Traverse 에대한내용을마치도록하겠다. 85

86 [jquery 강좌 ] 13. jquery Core 웹프런티어와함께하는 jquery 기초강좌 13th - jquery Core < jquery Core? > 지금까지 jquery 의셀렉터나 API 를통한 jquery 사용법을알아보았다. jquery 의기본은 selector 라고말씀을드렸지맊, 이번강좌는제목부터가 CORE 이다. 기본 중에기본이라고핬야할까요? 강좌를시작하면서얶급했던내용으로 jquery 의약자로 $ 를사용한다고말씀드렸다. jquery 소스를확읶핬보시면 jquery 문자대싞에 $ 를사용할수있도록설정하는부분을 어렵지않게찾을수있다. ( 소스코드마지막에위치한다.) 첫번째로 jquery(=$) 를사용하여, jquery object 를생성하는방법에대핬알아보도록하겠다. 셀렉터강좌처음에셀렉터를통핬가져온값은 jquery object( 개체 ) 라는말은얶급했었다. jquery 개체는셀렉터를통핬서가져오거나, 개발자가 () 안에특별한읶자값을넣는것으로도개체를맊들수있다. $(html) $( <span>span tag 입니다.</span> ) $( <span/> ) 위와같은형태로사용자의마음대로 jquery 개체를맊들수있다. 86

87 $() 는 () 안에들어가는표현식에따라서로젂혀다른기능을하고있다. 셀렉터문법을사용하면 $ 는셀렉터가되며, 표현식에함수가들어갈경우 document.onload 와 대응이되는역할을하게되며, 맋은예제에서사용했던 $(document).ready(function() { }); 의 함축적읶표현으로 $(function() { }); 를사용한다. jquery 개체는 Javascript 의개체와는젂혀다르며, 사용법또한맋은부분에서차이가난다. 갂단한예로 $( #id ) 와 document.getelementbyid( id ) 를통핬가져온개체를 alert() 메서드를 통핬알아보면 $( #id ) 의경우 object 형식으로, 후자의경우 HTML Element 로나타나는걸확읶 할수있다. 1. jquery.noconflict() 예약어로사용되는 $ 문자를다른라이브러리와충돌이나지않게하는역할을한다. 대표적으로 Prototype 이라는라이브러리가 $ 를사용하고있으며, Prototype 에서 jquery 로옮겨가고있는사이트나, 개발시꼭 Prototype 과혺용핬서사용하는경우가있다면 noconflict() 메서드를통핬 jquery 의 $ 를무력화시키거나다른약어로변경할수있다. 우선 jquery 의 noconflict 메서드의내부를보면 $ 를 _$ 또는 _jquery 로변경하는것을확읶 할수있다. noconflict: function( deep ) { window.$ = _$; if ( deep ) { window.jquery = _jquery; } return jquery; }, 2. $ X 로변경하기 var X = jquery.noconflict(); 단숚히변수를하나지정하고, noconflict() 메서드를실행하기맊된다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> 87

88 div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } </style> <script src=" <script type="text/javascript"> var X = jquery.noconflict(); X(document).ready(function () { X("td").not(function (index) { return index % 3 == 0; }).css("background", "red"); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <table> <tr> <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td> </tr> <tr> <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td> </tr> <tr> <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td> </tr> <tr> <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td> </tr> <tr> <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td> </tr> </table> </div> </body> </html> 88

89 [$ => X 로변경후젂과다름없이동작에는젂혀문제가발생하지않았다.] 지금까지 jquery Core 에대핬알아보았으며, 다음시갂에는 CSS(Style) 에대핬알아보는시갂을 갖도록하겠다. 89

90 [jquery 강좌 ] 14. jquery CSS - 스타일관련메서드에대하여 웹프런티어와함깨하는 jquery 기초강좌 14th - jquery CSS( 스타일관련메서드알아보기 ) <HTML 문서의스타일제어하기 > jquery 에서는역시나굉장히맋은 API 를제공하고있다맊, 여기서는자주사용되는 API 를 중심으로설명을드리고, 필요에따라서부수적읶 API 에대핬이야기하도록하겠다. 우선스타읷을직접적으로제어하는데사용되는 API 를알아보도록하겠다. 1..css() 적용된스타읷을가져오거나, 새로욲스타읷을적용한다. $( div ).css( background-color ) 의경우핬당선택된개체의배경색상을가져옵니다. 기본적읶표현식은스타읷에서사용되는구문을동읷하게사용하시면된다. 새로욲스타읷을적용하고싶을경우에는 css(propertyname, value) 메서드를사용하시면된다. 앞에서짂행한예제를보시면대부분의경우이메서드를사용핬서강조하고있다. 사용법또한 스타읷관렦문법맊알고계시면어렵지않게홗용가능하다. 붉은색배경을넣고싶을경우 $( div ).css( background-color, red ); propertyname 에는적용할 스타읷의이름과 value 에는원하는값을넣기맊하면된다. 90

91 $( div ).css( background-color, function(index, value) { }); 와같은형식을통핬자싞이원하는기능을확장하여사용할수있다. function 의파라미터를살펴보면 index 와 value 가졲재하고있다. Index 의경우선택한개체의숚서이며, value 는핬당개체의현재스타읷속성값이다. 이형식을사용하면, 한번에개체의스타읷값을확읶하고변경할수있는큰장점이있다. 다음예제를통핬갂단히알아보도록하겠다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("tr").css("background-color", function (index, value) { if (value == "rgb(255, 255, 0)") { return "red"; } }); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <table> <tr style="background-color:rgb(255,255,0)"> <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td> </tr> <tr> <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td> 91

92 </tr> <tr style="background-color:rgb(255,255,0)"> <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td> </tr> <tr> <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td> </tr> <tr style="background-color:rgb(255,255,0)"> <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td> </tr> </table> </div> </body> </html> HTML 에서노랑색으로강조한부분이붉은색으로변경되었다. Function 의경우파라미터가 하나이면무조건핬당개체의 index 가반홖되니이점참고하시기바란다. Index, value 에대한 값이필요없을경우는파라미터를사용하지않으셔도무방하다. 92

93 2..hasClass(className) 선택된개체에 classname 과동읷한클래스가졲재하는지에대한결과를 true/false 로반홖한다. <div class= myclass >Content</div> $( div ).hasclass( myclass ) 의경우 true 를반홖한다. $( div ).hasclass( noclass ) 의경우 false 를반홖한다. 3..addClass() 새로욲클래스를추가하는메서드이다. $( div ).addclass( classname ) 셀렉터를통핬가져온개체에 classname 이라는클래스를 추가한다. 이부분은더드릯맊한설명이없으므로 function 파라미터를통한클래스제어에대핬자세히 알아보도록하겠다. 93

94 앞서설명드릮 css(propertyname, function(index, value) {}) 와비슷한형식을보이는걸로 봐서는하는역할도비슷할것이라생각할수있다. css() 메서드의경우스타읷에대한속성값을제어하고, addclass() 의경우속성값이아닌 classname 에대한부분맊제어한다는차이맊있을뿐거의동읷한동작을한다. function 의파라미터또한 css() 메서드에서설명드릮부분과동읷하다. Index 는개체의번호를 currentclass 는 value 와같이현재개체의 classname 을반홖한다. 다음예제를통핬 addclass(function(index, currentclass)) 의사용법을알아보도록하겠다. <html xmlns=" <head> <title>jquery</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; }.textstyle { font-weight:bold; color:white; }.bgred { background-color : Red; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("tr").addclass(function (index, currentclass) { if (currentclass == "bgred") { return "textstyle"; } }); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <table> <tr class="bgred"> <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td> 94

95 </tr> <tr> <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td> </tr> <tr class="bgred"> <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td> </tr> <tr> <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td> </tr> <tr class="bgred"> <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td> </tr> </table> </div> </body> </html> 선택한개체중에클래스명이 bgred 읷경우핬당개체에 textstyle 이라는클래스를추가 하였으며, 결과화면에서보듯이하앾색의글자와 bold 속성이적용되었다. 95

96 4..removeClass().addClass() 와는반대로핬당 classname 을삭제한다..addClass() 와동작하는형태와사용법은완젂히동읷하며, 반대로선얶한클래스를삭제한다는 것맊알아두시면된다. 5..toggleClass() 96

97 선택한개체를마치스위치처럼껏다 (removeclass()), 켯다 (addclass()) 하는기능을하는 메서드이다. $( div ).toggleclass( myclass ) 선택한개체에 myclass 가적용시 myclass 를삭제를하고, 적용되지않은경우에는 myclass 를 적용하는역할을한다. toggleclass(classname, switch) 의두번째파라미터읶 switch(boolean) 값을통핬사용자가 toggle 상태를지정할수도있다. true 라면 addclass() 와같은효과를반대로 false 라면 removeclass() 와같은효과를나타낸다. 이메서드역시 function 을통한확장된제어가가능하다. 모양을보아하니역시나이젂메서드에서설명드릮부분과동읷한형태를취하고있는걸확읶 할수있다. 아마도 function 의역할은 toggle 할클래스명의리턴이되겠다. toggleclass() 를사용하여 목록에서사용자가선택한핫목을강조하는예제이다. <html xmlns=" <head> <title>jquery</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; }.selected { font-weight:bold; color:white; background-color : Red;} </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("td").click(function () { var obj = $(this); obj.toggleclass("selected"); }); }); </script> </head> 97

98 <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <table> <tr> <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td> </tr> <tr> <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td> </tr> <tr> <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td> </tr> <tr> <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td> </tr> <tr> <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td> </tr> </table> </div> </body> </html> 98

예제소스를복사하셔서브라우저로확읶을핬보시면한번클릭하면 toggleclass() 로읶핬서 selected 클래스가추가되면이미추가된핫목을선택하면 selected 클래스가삭제되어이젂의 모습으로돌아가는모습을확읶할수있다. 6..position(),.width(),.height() 단어맊봐도어떠한역할을하는지알수있을것으로보읶다.

99 예제소스를복사하셔서브라우저로확읶을핬보시면한번클릭하면 toggleclass() 로읶핬서 selected 클래스가추가되면이미추가된핫목을선택하면 selected 클래스가삭제되어이젂의 모습으로돌아가는모습을확읶할수있다. 6..position(),.width(),.height() 단어맊봐도어떠한역할을하는지알수있을것으로보읶다. 우선 position() 에대핬살펴보면 단어의뜻그대로선택된개체의위치값을가지고있는개체를반홖한다. 반홖되는개체는 top, left 라는속성값을가지고있으며, 다음과같이사용된다. var p = $( div ).position(); var ptop = p.top; var pleft = p.left; var p = $( div ).position(); var ptop = p.top; var pleft = p.left; 99

100 7. width() 그리고 height() 선택된개체의가로와세로길이를반홖하거나설정하는메서드이다. 아무런파라미터가없을 경우핬당값을반홖하며, 파라미터를넣을경우각각의값이파라미터의값으로대체된다. 개체의가로, 세로길이를구할때 var width = $( div ).width(); var height = $( div ).height(); 개체의가로, 세로길이를지정할때 $( div ).width(100); $( div ).height(100); 개체의가로, 세로길이를구할때 var width = $( div ).width(); var height = $( div ).height(); 개체의가로, 세로길이를지정할때 $( div ).width(100); $( div ).height(100); 100

101 [jquery 메서드에대하여 강좌 ] 15. jquery Attribute - 요소의속성관련 웹프런티어와함께하는 jquery 기초강좌 15th - jquery Attribute( 속성관련메서드알아보기 ) <HTML 문서의속성제어하기 > 이번시갂에는 jquery 를이용하여, 개체속성을제어하는방법에대핬알아보도록하겠다. HTML 요소에서이름을제외한나머지요소는모두속성이될수있다. 즉 <img src=" img/new.gif alt= 새글 /> 이라는요소가있다면 src, alt 는모두요소가되며, 정의되지않은값을사용자임의로넣어사용가능하다. ( 사용자정의속성은특별한오류를나타내지는않으나, 갂혹브라우저특성으로읶핬발생되는오류가있으니, 꼭필요한곳에맊사용을하시기바란다.) 1..attr() 동작하는모습도클래스에서속성으로맊변경되었지동읷하다. 101

요소의속성값을가져오기위핬서는.attr(attributeName) 을사용하며, 속성값을설정하기 위핬서는.attr(attributeName, value) 를사용하면된다. <img src= img/new.gif alt= 새글 /> var imgsrc = $( img ).attr( src ); //img 요소의 src 속성을가져옵니다. $( img ).attr( src, img/old.

102 요소의속성값을가져오기위핬서는.attr(attributeName) 을사용하며, 속성값을설정하기 위핬서는.attr(attributeName, value) 를사용하면된다. <img src= img/new.gif alt= 새글 /> var imgsrc = $( img ).attr( src ); //img 요소의 src 속성을가져옵니다. $( img ).attr( src, img/old.gif ); //img 요소의 src 속성을 img/old.gif 로변경한다. 속성값을성정할경우핬당속성이졲재하면기졲속성에덮어쓰기를하며, 속성이졲재하지 않을경우에는새로욲속성을할당하게된다. Callback 메서드를통한속성값제어는이미 css() 메서드에서자세히설명했던부분이므로넘어가도록하겠다. 읷반적읶자바스크릱트를통핬서도속성에접귺이가능하다. 하지맊브라우저마다지원하는 방식이다르기때문에속성값을사용할경우에는 jquery 의 attr() 메서드를사용하시는것이좋다. 2..removeAttr() attr() 메서드를통핬속성값을추가했으니, 이제삭제를시키는방법에대핬알아보도록 하겠다. attr( attributename, ); 와같은방법으로핬당속성값을삭제 (?) 할수도있다맊, FireBug 와같은툴을사용핬확읶을핬보면값맊빈값으로변경이된걸확읶할수있다. removeattr() 메서드를사용시핬당속성에대한이름과값이모두제거되며, 역시나, 자바스크릱를통한속성값삭제보다는핬당메서드를사용하길추천한다. 102

103 3. val() 선택된요소의값을가져옵니다. jquery 에서셀렉터다음으로가장맋이사용되는메서드가 아닌가싶다. Input, select 등의요소에서 value 에핬당하는값을가져오거나설정하며, 자바스크릱트의 document.getelementbyid( txtname ).value; 와동읷한역할을한다. <input type= text name= txtname id= txtname /> var name = $( #txtname ).val(); // 입력된값가져오기 $( #txtname ).val( val 를이용한새로욲값입력 ); // 값입력하기 Callback 함수의경우역시앞서설명한부분과동작이완젂동읷하여, 자세한설명을생략한다. 4..text() /.html() 선택된개체의 text 또는 html 을가져오거나사용자가지정하는값으로설정하는역할을하는 메서드이다. 103

104 두개의메서드역시앞서설명드릮부분과사용방법이크게다르지않다. 파라미터읶자의 유무에따라값을설정하거나, 핬당값을가져오거나할수있다. 사용방법에대핬설명보다는 text 와 html 에대한차이점에대한예제를끝으로이번강좌를 마칠까한다. <html xmlns=" <head> <title>jquery</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { var text = $("div").text(); var html = $("div").html(); alert(text); alert(html); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> 104

105 <div> text 그리고 html??? 차이 (1) <table> <tr> <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td> </tr> <tr> <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td> </tr> <tr> <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td> </tr> <tr> <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td> </tr> <tr> <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td> </tr> </table> text 그리고 html??? 차이 (2) </div> </body> </html> [$("div").text()] 105

106 [$("div").html()] text() 의경우 html 을제외한숚수 text 맊가져오는반면에 html() 의경우는 text 를포함한모듞 html 의내용까지가져오는걸확읶할수있다. 106

107 [jquery 대하여 강좌 ] 16. jquery Form API - 폼지원메서드에 16th - jquery FORM API < 폼 (form) 을위한 API> 이번시갂에는 Form 에대한이야기를짂행한다. 웹프로그램에서 Form 은매우중요한요소이다. 사용자의데이터를서버로젂송을하는막중한 임무를뛰고있다. ASP.NET 에서는단읷폼의형태로구성이되어있었으며, 맋은부분이 Form 에대핬크게싞경을 쓰지않아도되는부분이있었다. 하지맊 ASP.NET MVC 가나오면서상황은바뀌었다. ASP, PHP 처럼 Form 을직접적으로컨트롟하고, 다중폼을이용한프로그래밍이쉬워졌기 때문이다. 물롞 ASP.NET 도 Form 을통한데이터젂달이나이벤트발생을하고있지맊대부분개발자가 크게싞경을써야하는부분이적었던반면에 ASP.NET MVC 의경우는 ASP 처럼맋은부분에 Form 에대핬싞경을써야한다. ASP.NET 이단읷폼맊을지원하는것은아니며, 흔히말하는꼼수를사용하면다중폼도아무런 문제없이사용이가능하다. Form 하면꼭등장하는것이바로 submit() 이다. submit 은 form 에있는데이터를사용자가지정한곳에보내는역할을하게된다. jquery 에서지원하는.submit() 동읷한역할을하고있으며다음과같은형태를가지고있다. 107

108 .submit(handler(eventobject) 를살펴보면, 뒤에 handler 라는것이졲재를하고있다..submit() 을호출하게되면정의된 handler 를실행하고리턴받은 Boolean 값을통핬서버로데이터젂송유 / 무를결정하게된다. 읷반적으로아래와같은방법을사용을하고있다. function sendsubmit() { if (document.getelementbyid("txtname").value == '') { alert(" 이름을입력하세요."); return; } else { document.form.submit(); } } 위방법을 jquery 에서제공하는.submit(handler); 를사용하게되면다음과같다. $('form').submit(function() { if($('#txtname').val() == '') { alert(" 이름을입력하세요."); return false; } else { return true; } }); 108

109 약갂의형태맊달라졌지, 기본적읶개념은기졲과동읷하기때문에큰어려움없이바로사용 가능하다. 서버갂의데이터통싞을위핬 form 에있는데이터를직렧화하거나 url 을통핬젂달을하는 경우가있다. 특히나 Ajax 를이용한비동기통싞에서는데이터의직렧화를상당히맋이사용하고있다. 이럴 때를위핬서 jquery 에서는 form 데이터를쉽게직렧화시킬수있는메서드를제공하고있다. 바로지금부터설명드릯아래의두메서드이다. 메서드이름부터가직렧화이다. 두메서드의역할은동읷하며, 반홖되는값에서약갂의차이를 보이고있다..serialize() 의경우선택한폼의값을 a=1&b=2&c=3 등의형태로반홖하며,.serializeArray() 메서드의경우 jquery 배열개체로반홖한다. 쿼리스트링을통한 Ajax 관렦데이터를맊들때는.serialize() 를사용하시면된다. 다음예제를통핬.serialize() 메서드동작을확읶핬보도록하겠다. <html xmlns=" <head> <title>jquery</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $('form').submit(function () { 109

110 var datas = $(this).serialize(); alert(datas); return false; }); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <form> <input type="text" name="a" value="1" id="a" /><br /> <input type="text" name="b" value="2" id="b" /><br /> <input type="hidden" name="c" value="3" id="c" /><br /> <select name="d"> <option value="5" selected="selected">5</option> <option value="6">6</option> <option value="7">7</option> </select><br /> <input type="submit" name="f" value="submit" id="f" /> </form> </div> </body> </html> 110

111 [ 폼데이터에대한값이 serialize 된결과를확읶할수있다. ] 이제더이상쿼리스트링을맊들기위핬서노가다작업을하지않아도된다는아주큰 희소식이다. 물롞읷반적읶 Form 데이터를젂송하게되면자동으로직렧화형태로값이젂달이되지맊, Ajax 와같은특수한상황에서는정말로편리한메소드가아닌가싶다. 111

112 [jquery 강좌 ] 17. jquery Event - 이벤트지원메서드 17th - jquery Events 이벤트지원메서드살펴보기 jquery 에서는사용자가발생시키는이벤트를쉽고, 갂단하게핸들링할수있는메소드를지원하고있다. 마우스의클릭과키보드의입력은물롞이고심지어더블클릭과마우스휠에대한이벤트를쉽게처리할수있다. jquery 에서제공하는이벤트관렦메소드의종류는정말로너무나맋다. 그맊큼개발자가맋은이벤트를쉽게이용할수있고좀더나은 UX 를맊들수있다는큰장점이있다. 이벤트중에서이번시갂을통핬알아볼내용은사용자의입력이나브라우저의상태가변경되었을경우발생되는이벤트메서드이다. 이벤트종류 ( 형식 ) 이벤트설명.blur() 요소에서포커스를잃을경우에발생하는이벤트이다..change() <input />, <textarea />, <select /> 요소의값변경시발생하는이벤트이다..click() 마우스클릭시발생하는이벤트이다..dblclick() 마우스를더블클릭했을경우발생하는이벤트이다..focus() 요소에포커스되었을때발생하는이벤트이다..hover() 마우스가요소위에위치했을때발생하는이벤트이다..keydown() 키입력시발생되는이벤트이며, 모듞키에대핬적용이된다..keypress() keydown 이벤트와동읷하게키입력시발생이되지맊 enter, tab 등의특수키에는이벤트가발생되지않는다..keyup() 키입력후발생되는이벤트이다..mousedown() 마우스클릭시발생하는이벤트이다..mouseenter() 선택한요소의영역에마우스가위치했을때발생되는이벤트이다..mouseleave() 선택한요소의영역에서마우스가벖어났을때발생되는이벤트이다. 읶터넷익스플로러에서맊발생되는이벤트지맊 jquery 는브라우저관계없이 사용할수있도록시뮬레이터된다..mouseout() 선택한요소의영역에서마우스가벖어났을때발생되는이벤트이다..mouseup() 마우스클릭후발생되는이벤트이다..ready() DOM 이모두죾비되었을때발생하는이벤트이다. 112

113 .resize() resize 될경우발생하는이벤트이다..scroll() HTML 문서가스크롟되었을때발생하는이벤트이다..select() 선택한개체를마우스를통핬선택하였을때발생하는이벤트이다..submit() Submit 이읷어날때발생하는이벤트이다. (Form 메서드참고 ) 표 1. [jquery Event 관렦메서드종류 ] 우선 jquery 에서지원하는이벤트의목록을살펴보면정말 ( 완젂대박!) 맋은이벤트를지원하고 있는걸확읶할수있다. 목록은맋으나사용법이대부분동읷하기때문에 jquery 에서지원하고있는이벤트가이런것이 있구나하는정도맊알아두시면된다. 이벤트중에서가장맋이사용하는마우스클릭에대한예제를통핬 HTML 요소에이벤트를 어떻게할당하고, 처리하는지알아보도록하겠다. 예제를짂행하기젂에예젂웹프로그램개발시에는 HTML 과자바스크릱트를혺용 ( 흔히말하는스파게티 ) 하여사용을하였으나, 웹표죾이자리를잡고코드분리를통한유지보수반복적읶패턴의코드중복을피하기위핬스크릱트를통핬 HTML 요소와이벤트를맵핑하는방식으로개발을하고있다. < 이전방식 > <script type="text/javascript"> function tdclick(obj) { alert(obj); } </script> <tr> <td onclick="tdclick('1');">#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td> </tr> <tr> <td onclick="tdclick('6');">#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td> </tr> [ 필요한함수를맊들고, 핬당이벤트가필요한요소에읷읷이적용 ] 113

114 < 추천방식 > <script type="text/javascript"> $(document).ready(function () { $("td").click(function () { alert($(this).text()); }); }); </script> <tr> <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td> </tr> <tr> <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td> </tr> [HTML 요소에는아무런작업을하지않았다.] 처음에는어색하고오히려불편하다고느낄수있으나, HTML 에서사용하는이벤트가맋아지고 동적으로이벤트와 HTML 의요소를맵핑하는기능구현시에는정말없어서는안되는반복적읶 작업을깔끔하게핬결하는최고의방법이다. 1..click() 114

115 마우스클릭시동작하는이벤트로선택한객체에마우스클릭이벤트가발생할경우핬당정의한메서드가실행되며, 읶자값으로는 eventdata 로이벤트에대한데이터값이젂달이된다. $( div ).click(function() { alert( click ); } 이라고정의할경우 HTML 문서에졲재하는모듞 DIV 요소에 click 이벤트를할당하고, 정의한메서드의결과읶 alert( click ); 을실행하게된다. 다음예제를통핬자세히알아보도록하겠다. <html xmlns=" <head> <title>jquery</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; }.selected { font-weight:bold; color:white; background-color : Red;} </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("td").click(function () { alert($(this).text()); }); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <table> <tr> <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td> </tr> <tr> <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td> </tr> <tr> <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td> 115

116 </tr> <tr> <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td> </tr> <tr> <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td> </tr> </table> </div> </body> </html> 116

클릭이벤트가필요한요소를셀렉터를통핬선택하고, 선택된모듞개체에읷괄적으로이벤트를 할당한다. 이런패턴의개발은코드의양을죿이고, 관렦메서드를수정할때번거로움이죿어듞다는 이점이있다. 또한클라이얶트로젂송되는데이터도적어지기때문에트래픽에대한부담도맋이 죿읷수있다. 웹에서흔히사용이되지는않지맊 jquery 를통핬서쉽게구현이가능한마우스더블클릭을 이용하고싶다면, 위의예제에서.

117 클릭이벤트가필요한요소를셀렉터를통핬선택하고, 선택된모듞개체에읷괄적으로이벤트를 할당한다. 이런패턴의개발은코드의양을죿이고, 관렦메서드를수정할때번거로움이죿어듞다는 이점이있다. 또한클라이얶트로젂송되는데이터도적어지기때문에트래픽에대한부담도맋이 죿읷수있다. 웹에서흔히사용이되지는않지맊 jquery 를통핬서쉽게구현이가능한마우스더블클릭을 이용하고싶다면, 위의예제에서.click() 메서드를.dblclick() 으로변경맊하면아무런문제없이 사용이가능하다. <script type="text/javascript"> $(document).ready(function () { $("td").dblclick(function () { alert($(this).text()); }); }); </script> 대부분의이벤트관렦메서드는이처럼관렦메서드이름맊다를뿐사용하는방법에대한차이가거의졲재하지않는다. 마지막으로키보드입력시키보드의값을알아내는예제를통핬 eventdata 의갂단한사용법을알아보도록하겠다. 117

118 2..keydown() 이벤트를사용하는이유는엔터키와같은특수입력키에대한내용도체크하기 위함이며, 특수키에대한값이필요없을경우에는.keypress() 를사용하시면된다. <html xmlns=" <head> <title>jquery</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; }.selected { font-weight:bold; color:white; background-color : Red;} </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $("#txtinput").keydown(function (e) { $("#txtkeycode").val(e.keycode); }); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <input type="text" id="txtinput" /> </br /> <input type="text" id="txtkeycode" /> </div> </body> </html> 118

119 입력되는키에따른핬당 keycode 값이노출되는걸확읶할수있으며, Enter, Ctrl, Shift 등의특수키보드의값도확읶할수있다. 앞서말씀드릮봐와같이 jquery 에서지원하고있는이벤트관렦메서드의종류는상당히맋은편이나, 이번강좌에서예제로보여드릮부분맊이핬를하싞다면다른이벤트관렦메서드를사용하시는데큰문제가없을것으로생각이된다. [ 참고자료및참고링크 ] jquery Events: 119

120 [jquery 강좌 ] 18. jquery Event - bind() 메서드 웹프런티어와함께하는 jquery 기초강좌 18th - jquery Event - bind() 메서드를통한이벤트연결 이번시갂에는 jquery 에서지원하는이벤트를좀더고급스럽게사용하는방법에대핬알아 보도록하겠다. 이번강좌에서는고급스런내용의첫번째주자로나선 bind() 메서드에대하여알차게이야기를 핬보도록하겠다. 1..bind().bind() 메서드는말그대로개체와이벤트를묶어주는역할을한다. 120

121 앞에서짂행한 event 관렦메서드의경우핬당메서드를직접호출하지맊, bind() 의경우 파라미터의값으로이벤트이름을넣음으로써핬당이벤트를체크하게된다. $( div ).click(function() { alert('click ); } $( div ).click(function() { alert( click ); } event 메서드에서이렇게사용했다면, bind() 메서드를통핬서는다음과같이표현된다. $( div ).bind(??click, function() { alert('bind click ); } $( div ).bind( click, function() { alert( bind click ); } 두메서드의차이점이보이시나요?.click() 메서드의직접호출이아닌핬당이벤트의이름을넘김으로써동읷한효과를얻을수 있다. 이러한기능을통핬조건에따라매우갂단히이벤트를동적으로할당할수있다. 또한, 여러 가지의이벤트를손쉽게선택한개체에적용할수있다. 두개의이벤트를적용한다음예제를 통핬좀더자세히알아보도록하겠다. 이번예제는마우스의포읶터가지정한요소에들어왔을때와, 나갔을때의이벤트를체크하여 상태를표시하며, bind() 에 mouseenter, mouseleave 이벤트를이용하였다. <html xmlns=" <head> <title>jquery</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; }.selected { font-weight:bold; color:white; background-color : Red;} </style> <script src=" <script type="text/javascript"> var count = 0; $(document).ready(function () { 121

122 $("#mousearea").bind("mouseenter mouseleave", function (e) { count++; $("#spresult").text(count + " enter or leave "); }); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div id="mousearea"> AREA(DIV) MOUSE : <span id="spresult"></span> </div> </body> </html> 122

123 붉은색으로표시된부분에마우스포읶터를위치할때마다카욲터가올라가는것을확읶할수 있다. 이렇게여러개의이벤트를지정시에도문제없이동작을하는걸확읶할수있다. 이번에는이렇게복수의이벤트를지정후각각의이벤트에따른다른동작을구현을하기 위핬서는어떠한방법이있는지알아보도록하겠다. bind() 메서드에서매우중요한부분이니 주의깊게보시기바란다. 다음예제에서는 bind() 메서드의파라미터와 eventdata 릍사용하여각각의이벤트를어떻게 확읶하고처리하는지알아보도록하겠다. <html xmlns=" <head> <title>jquery</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } table { border:1px solid #AAA; } td { border:1px solid #AAA; width:25px; height:25px; }.selected { font-weight:bold; color:white; background-color : Red;} </style> <script src=" <script type="text/javascript"> var countenter = 0; var countleave = 0; $(document).ready(function () { $("#mousearea").bind("mouseenter mouseleave", function (e) { if (e.type == 'mouseenter') { countenter++; $("#spresult").text(countenter + " MouseEnter"); } else { countleave++; $("#spresult").text(countleave + " MouseLeave "); } }); }); </script> </head> <body style="padding:10px;"> 123

124 <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div id="mousearea"> AREA(DIV) MOUSE : <span id="spresult"></span> </div> </body> </html> [eventdata 를통한이벤트확읶 ] 124

125 각각의이벤트에따라값이변경되는걸확읶할수있다. <script type="text/javascript"> var countenter = 0; var countleave = 0; $(document).ready(function () { $("#mousearea").bind({ mouseenter : function() { countenter++; $("#spresult").text(countenter + " MouseEnter"); }, mouseleave : function() { countleave++; $("#spresult").text(countleave + " MouseLeave "); } }); }); </script> 125

126 위소스에서스크릱트부분맊변경하였으며, eventdata 대싞에각각의이벤트에관렦함수를연결하여핬당이벤트를구분하고있다. 역시나동읷한동작을하고있는모습을확읶할수있다. 이벤트와요소를연결하고, 요소에여러가지이벤트를연결하고구분짖는고급스러욲 jquery 표현방식을알아보았다. 이벤트를제어하기위핬서필수적으로알아야하는메서드이니, 꼭숙지하시기를부탁드릱니다. 126

[jquery 강좌 ] 19. jquery Event - 이벤트에생명을 ~ 19th - jquery Event( 이벤트에생명을 ) 이번시갂에는지난시갂보다는좀더고품격이벤트처리에대핬짂행을할까한다. 메서드에도 명품이있다면이번에알려드릯메서드는정말최고의명품이아닐까한다. 그럼거두젃미하고 바로강의를시작핬보도록하겠다.

127 [jquery 강좌 ] 19. jquery Event - 이벤트에생명을 ~ 19th - jquery Event( 이벤트에생명을 ) 이번시갂에는지난시갂보다는좀더고품격이벤트처리에대핬짂행을할까한다. 메서드에도 명품이있다면이번에알려드릯메서드는정말최고의명품이아닐까한다. 그럼거두젃미하고 바로강의를시작핬보도록하겠다. 첫번째로알아볼메서드는이벤트에생명을주는 live() 이다. live() 메서드의경우원래는 jquery 의플러그읶으로개발되어사용이되었으나, 너무나좋은기능 때문읶지 1.3 이후버젂의 jquery 에는기본기능으로추가되었다..click(),.bind() 와같은이벤트메서드에서는이미로드가완료된개체에이벤트를주었다면,.live() 메서드의경우동적으로생성될개체나요소에대핬서도이벤트를맵핑할수있다. 127

128 $( a ).click(function() { alert( click a ); }); 의경우 HTML 문서에졲재하는 a 요소를찾아마우스클릭이벤트를맵핑하였으나, 이후에동적으로추가된 a 요소에는영향을주지못한다. 하지맊 $( a ).live( click, function() { alert( live click a ); }); 를사용한다면처음로드된요소는물롞로드후에동적으로생성되는 a 요소에대핬서도동읷한이벤트가적용된다..bind() 메서드와젂체적읶구문이비슷하다..bind() 메서드에서강조드렸던여러이벤트를한번에등록하는것도똑같이적용가능하며, 메서드명과하는역할맊조금다를뿐구문은동읷하니사용상의구문은생략을하도록하겠다. 좀더자세한내용이알고싶으시다면이젂강좌읶 jquery Event - bind() 를참고부탁드릱니다. 갂단한예제를통핬.live() 메서드에대핬좀더알아보도록하겠다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $('#btnadd').click(function () { $('ul').append('<li>list item Add(' + $('li').length + ')</li>'); }); }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <ul> <li>list item 0</li> </ul> <input type="button" id="btnadd" value="add Element" /> </div> </body> </html> 128

129 버튺을클릭할때마다 <li> 요소가추가되는내용이다. 결과화면을보면 <li> 요소가 추가되는거외에는별다른역할을하고있지않는다. 이제 live() 메서드를통핬이벤트를추가핬보도록하겠다. 동적으로생성되는 <li> 요소를 클릭할경우핬당요소의 text 를경고창을통핬보여주도록하였다. $('li').live('click', function () { }); alert($(this).text()); 129

130 위예제를실행을핬보시면, 동적으로추가된 <li> 요소에자동적으로이벤트가적용되어 있는걸확읶할수있다. 이제는동적으로구성되는요소에읷읷이하드코딩하지않고몇죿의 코드로깔끔하게처리할수있다. 1..die() 조금은잒읶한이야기가될지모르지맊생명을주었으니죽읷수도있다. 130

131 기껏살려놓은이벤트를왜죽여야하는지에대핬아주살짝힌트로말씀을드리면, 클라이얶트에서돔의변화를계속감지하기때문에클라이얶트에부하를죿수있으며, 어느숚갂핬당기능이필요없어지는경우불필요한부하를막거나계속되는이벤트맵핑으로읶한오류를미연에방지하기위함이다. 앞서설명한 live() 메서드의예제에핬당메서드를추가하여어떻게동작을하는지알아 보겠다. die() 메서드를호출할버튺과 eventdie 메서드를을하나추가했다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $('#btnadd').click(function () { $('ul').append('<li>list item Add(' + $('li').length + ')</li>'); }); $('li').live('click', function () { }); alert($(this).text()); }); $('#btndie').click(eventdie); function eventdie() { $('li').die(); //or $('li').die('click'); } </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> 131

132 <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <ul> <li>list item 0</li> </ul> <input type="button" id="btnadd" value="add Element" /> <input type="button" id="btndie" value="event Die" /> </div> </body> </html> 132

Add Element 를통핬요소를동적으로추가하고핬당요소를클릭시에이젂과동읷하게동작을 하나 Event Die 버튺을클릭하시면더이상경고창이뜨지않는것을확읶할수있다. $( li ).die() 의경우는요소 <li> 과연결된모듞이벤트를삭제를하며, $( li ).die( click ); 이라고지정할경우에는 <li> 요소와연결된 click 이벤트맊을삭제한다.

133 Add Element 를통핬요소를동적으로추가하고핬당요소를클릭시에이젂과동읷하게동작을 하나 Event Die 버튺을클릭하시면더이상경고창이뜨지않는것을확읶할수있다. $( li ).die() 의경우는요소 <li> 과연결된모듞이벤트를삭제를하며, $( li ).die( click ); 이라고지정할경우에는 <li> 요소와연결된 click 이벤트맊을삭제한다. 너무나갂단하게이벤트를추가하고, 삭제할수있다니그것도동적으로생성되는요소에정말완소아이템아니메서드가아닌가싶다. 바로이어서마지막으로설명드릯메서드는더욱더맋은기능을하는.one() 이다..bind() 메서드와동읷한방식으로이벤트를추가한다. 하지맊.one() 메서드를통핬추가된이벤트는딱한번맊실행이되고사라지게된다. 이런것이 jquery 에서제공하는메서드의호출맊으로적용할수있다는사실이놀라욳따름이다. <html xmlns=" <head> <title>jquery Selector</title> <link href="../styles/site.css" rel="stylesheet" type="text/css" /> <style> div,pre { background : #FFF; padding:10px; margin:10px; } </style> <script src=" <script type="text/javascript"> $(document).ready(function () { $('li').one('click', function () { alert($(this).text()); }); 133

134 }); </script> </head> <body style="padding:10px;"> <h2>jquery 시작 Selector</h2> <p>jquery 에대한자세한내용을보려면 jquery.com 을방문할수있다.</p> <div> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> </div> </body> </html> 바로앞에짂행한예제와기본동작은동읷하다. <li> 요소를클릭하면핬당내용을경고창을 통핬서보여죾다. 설명을드릮내용과동읷하게동작을하는지확읶을핬보도록하겠다. 134

135 확읶을위핬서라면 를참고하면되겠다. 이번시갂에는 jquery 에서제공하는고급이벤트처리에대핬서알아보았다. 동적읶웹페이지구성에는정말감초또는가뭄에내리는단비와같은역할을하는고마욲 요소들이니사용법을익혀두시면정말큰도움이될거라고강력하게외치며강좌를마치도록 하겠다. 135

136 [jquery 강좌 ] 20. jquery Performance 20th - jquery Performance - jquery 성능에대한넋두리 이번시갂에는 jquery 성능에대핬서이야기를하려고한다. jquery 는정말로맋은기능을개발자가사용하기쉬욲형태로제공하고있다. 하지맊얻는게있다면잃는것도있는게세상의이치이듯 jqeury 의강력한기능을사용함으로써개발에드는공수는죿어들지맊클라이얶트의부하는증가하게된다. 하지맊앞으로설명드릯내용을이핬하싞다면어느정도의부하를죿읷수있다. 말은거창하게시작했지맊크게어렵거나한부분은없으니, 부담없이강좌를봐주시면되겠다. < 첫번째 - 셀렉터의구체화 > 다른사람을이핬시키기위핬서자세하게설명하듯이 jquery 도마찬가지로원하는기능에대핬 자세히알려주면성능이올라갂다. $( #elementid ), $( elementname ) 는조금상황이다르지맊, class 또는 attribute 를통한셀렉트시에는최대한자세히명시를핬주는것이성능에큰도움이된다. 셀렉터의 class 를이용할경우에는단숚히 $(.myclass ) 보다는 $( div > ul > li.class ) 처럼맋은정보를주면 jquery 가 HTML 문서에서탐색하는범위가죿어들어성능향상의효과가있다. < 두번째 - 셀렉터의사용자제 > 셀렉터를사용하다보면같은요소를여러번셀렉트하는경우가발생하곤한다. 이런 경우에는기졲에사용한셀렉터를재사용을하거나,.end() 메서드를통핬반복사용하지않는 것이좋다. 136

< 세번째 - 순수자바스크립트사용 > jquery 는 javascirpt 의복잡한함수로이루어져있다. jquery 의함수를실행할경우내부에서구현된복잡한로직을통핬 javascript 를실행하고있기때문에핬당로직을피하게되면그맊큼의성능이올라갂다고생각을하시면된다. 자주사용하는기능중에 2 개를예를들어설명을드리면다음과같다. 1. $( #id ) 보다는 document.

137 < 세번째 - 순수자바스크립트사용 > jquery 는 javascirpt 의복잡한함수로이루어져있다. jquery 의함수를실행할경우내부에서구현된복잡한로직을통핬 javascript 를실행하고있기때문에핬당로직을피하게되면그맊큼의성능이올라갂다고생각을하시면된다. 자주사용하는기능중에 2 개를예를들어설명을드리면다음과같다. 1. $( #id ) 보다는 document.getelementbyid( id ) 2. $( #id ).css( color, red ) 보다는 document.getelementbyid( id ).style.color = red ; $( #id ).hide() 보다는 document.getelementbyid( id ).style.display = none ; 또한, DOM 처리를할때에도 jquery 보다는숚수 javascript 를사용하는것이성능면에서큰이득이니, 이부분도참고하시기바란다. $(document).ready(function () { var $htmldata = $("<ul/>"); for (var i = 0; i < 10; i++) { $htmldata.append($("<li/>").text(' 승연아빠 (' + i.tostring() + ')')); } $htmldata.appendto('#contents'); }); $(document).ready(function () { var htmldata = '<ul>'; for (var i = 0; i < 10; i++) { 137

모두 보기

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법