06.jQuery - 메서드 체인 ( 06.Chain )
[ 메서드 체인 ]
| 일반적인 코드 |
| var obj = $(":header:eq(0)") obj = obj.css("font-weight", "bold"); obj = obj.css("color", "blue"); |
| 메서드 체인 (일반) |
| $(":header:eq(0)").css("font-weight", "bold").css("color", "blue"); |
| 메서드 체인 (권장) |
| $(":header:eq(0)") .css("font-weight", "bold") .css("color", "blue"); |
[ 출처 : Taeyo ]
| 표현식 | 설명 |
| :nth-child (index/even/odd) | 자식 중 index로 지정된 위치의 요소들과 일치되거나, even, odd에 해당하는 자식들과 일치됩니다. 단, 여기서의 index는 1부터 시작합니다. |
| :first-child | 첫 번째 자식인 모든 요소와 일치됩니다. |
| :last-child | 마지막 자식인 모든 요소와 일치됩니다. |
| :only-child | 자신이 부모 요소의 유일한 자식인 모든 요소와 일치됩니다. |
[ 출처 : Taeyo ]
[ 그림으로 설명 ]
[그림6-1][ 출처 : Taeyo ]
| 06.Chain.htm |
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>메서드 체인</title> <style type="text/css"> .redColor { color:Red; } .blueColor { color:Blue; } </style> <script src="jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('td:contains("RedPlus")') //td 중 "RedPlus" 포함하는 셀 찾음 .siblings() //현제 요소들에게 .addClass("redColor") //전경색을 Red .parent() //부모로 이동 .find('td:eq(0)') //0번째 셀을 찾아서 .addClass('blueColor'); //RedPlus : Blue }); </script> </head> <body> <table> <tr> <td>NickName</td><td>이름</td><td>비고</td> </tr> <tr> <td>RedPlus</td><td>레드플러스</td><td>닷넷</td> </tr> <tr> <td>Hawaso</td><td>하와소</td><td>강의</td> </tr> </table> </body> </html> |
| 결과화면 |
 [그림6-2] |
06.Chain.htm