Blog Content

    티스토리 뷰

    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
    반응형

    Comments